收集的一些原生Js工具函数

本文汇总了多种实用的JavaScript技巧,包括浏览器版本判断、图片加载检测、HTML5元素支持检查、字符串验证、节点操作等,旨在帮助开发者提升工作效率。

判断ie/7/8

var isIE6 = navigator.userAgent.toLowerCase().indexOf("msie 6") > -1; //IE6
//判断ie6/7/8
var ua = navigator.userAgent.toLocaleLowerCase();
var ie = 0;
if(ua.indexOf('ie 6') > -1 || ua.indexOf('ie 7') > -1  || ua.indexOf('ie 8') > -1 ){
    ie = 1;//判断IE 6/7/8
}






判断图片是否加载完成
if(!img.complete){
    img.on('load',function(){
        //已加载完
    });
}else{
    //未加载完
}
移动端判断是否支持html5元素


1
2
3
var i = document.createElement("input");
i.setAttribute("type", "date");
return i.type !== "text"; //当浏览器不支持这个输入类型,将返回"text"。




验证5个中文10个英文

function checkName(value, byteLength,obj) {
    var newvalue = value.replace(/[^\x00-\xff]/g, "**");
    var length = newvalue.length;
    if (length * 1 <=byteLength * 1){
        return;
    }
    var limitDate = newvalue.substr(0, byteLength);
    var count = 0;
    var limitvalue = "";
    for (var i = 0; i < limitDate.length; i++) {
         var flat = limitDate.substr(i, 1);
        if (flat == "*") {
              count++;
        }
    }
    var size = 0;
    var istar = newvalue.substr(byteLength * 1 - 1, 1);
    if (count % 2 == 0) {
        size = count / 2 + (byteLength * 1 - count);
        limitvalue = value.substr(0, size);
    } else {
        size = (count - 1) / 2 + (byteLength * 1 - count);
        limitvalue = value.substr(0, size);
    }
    obj.val(limitvalue);
    return;
}






追加节点

//追加节点
var oFragmeng = document.createDocumentFragment();//创建文档碎片
var html = '<span>mss</span>';
var div = document.createElement('div');
div.innerHTML = html;
oFragmeng.appendChild(div);
document.getElementById('xxx').appendChild(oFragmeng);






禁止readonly和disabled的input退格键返回上一页

$(document).keydown(function(e){ 
    var keyEvent;
    if(e.keyCode==8){ 
        var d=e.srcElement||e.target; 
        if(d.tagName.toUpperCase()=='INPUT'||d.tagName.toUpperCase()=='TEXTAREA'){ 
            keyEvent=d.readOnly||d.disabled; 
        }else{ 
            keyEvent=true; 
        } 
    }else{ 
        keyEvent=false; 
    } 
    if(keyEvent){ 
        e.preventDefault(); 
    } 
});






获取指定范围内的随机数
function areaRandom(max, min){
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
areaRandom(100, 10);//49
areaRandom(100, 10);//12




生成随机字母字符串
function generateRandomAlphaNum(len) {
    var rdmString = "";
    for( ; rdmString.length < len; rdmString  += Math.random().toString(36).substr(2));
    return  rdmString.substr(0, len);
}
generateRandomAlphaNum(10);//fa8y393e9a
generateRandomAlphaNum(10);//j15mhox8bs




验证是否为数字
function isNumber(n){
    return !isNaN(parseFloat(n)) && isFinite(n);
}
isNumber(1);//true
isNumber('a');//false


验证是否为数组
function isArray(obj){
    return Object.prototype.toString.call(obj) === '[object Array]' ;
}
isArray([1,2,3]);//true


获取数组中的最大值和最小值
var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; 
var maxInNumbers = Math.max.apply(Math, numbers);//122205
var minInNumbers = Math.min.apply(Math, numbers);//-85411


去除字符串前后空格
function trim(str){
    return this.replace(/^\s+|\s+$/g, '');
}
trim(' affccc  ');//affccc
移除所有的’-‘


1
'2016-05-25'.replace(new RegExp('-','g'),'');//20160525




获取滚动条宽度
function getScrollWidth() {
var noScroll, scroll, oDiv = document.createElement("DIV");
oDiv.style.cssText = "position:absolute; top:-1000px; width:100px; height:100px; overflow:hidden;";
noScroll = document.body.appendChild(oDiv).clientWidth;
oDiv.style.overflowY = "scroll";
scroll = oDiv.clientWidth;
document.body.removeChild(oDiv);
return noScroll-scroll;
}
getScrollWidth();//17 Chrome下测试




获取url参数
function getUrlParam(name){
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
//location.href = http://baidu.com/?name=mss&age=24
getUrlParam(name);//mss
getUrlParam(age);//24




原生ajax

function ajax(params) {
params = params || {};
if (!params.url) {
throw new Error('Necessary parameters are missing.'); //必要参数未填
}
var options = {
url: params.url || '',
type: (params.type || 'GET').toUpperCase(),
timeout: params.timeout || 5000,
async: true,
complete: params.complete || function() {},
error: params.error || function() {},
success: params.success || function() {},
dataType: params.dataType || 'json',
data: params.data || {},
jsonp: 'callback',
jsonpCallback: ('jsonp_' + Math.random()).replace('.', '')
};
var formatParams = function(json) {
var arr = [];
for (var i in json) {
arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(json[i]));
}
return arr.join("&");
};
if (options.dataType == 'jsonp') {
//插入动态脚本及回调函数
var $head = document.getElementsByTagName('head')[0];
var $script = document.createElement('script');
$head.appendChild($script);
window[options.jsonpCallback] = function(json) {
$head.removeChild($script);
window[options.jsonpCallback] = null;
hander && clearTimeout(hander);
options.success(json);
options.complete();
};
//发送请求
options.data[options.jsonp] = options.jsonpCallback;
$script.src = options.url + '?' + formatParams(options.data);
//超时处理
var hander = setTimeout(function() {
$head.removeChild($script);
window[options.jsonpCallback] = null;
options.error();
options.complete();
}, options.timeout);
} else {
//创建xhr对象
var xhr = new(self.XMLHttpRequest || ActiveXObject)("Microsoft.XMLHTTP");
if (!xhr) {
return false;
}
//发送请求
options.data = formatParams(options.data);
if (options.type == 'POST') {
xhr.open(options.type, options.url, options.async);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xhr.send(options.data);
} else {
xhr.open(options.type, options.url + '?' + options.data, options.async);
xhr.send(null);
}
//超时处理
var requestDone = false;
setTimeout(function() {
requestDone = true;
if (xhr.readyState != 4) {
xhr.abort();
}
}, options.timeout);
//状态处理
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && !requestDone) {
if (xhr.status >= 200 && xhr.status < 300) {
var data = options.dataType == "xml" ? xhr.responseXML : xhr.responseText;
console.log(data)
if (options.dataType == "json") {
try {
data = JSON.parse(data);
} catch (e) {
data = eval('(' + data + ')');
}
}
options.success(data);
} else {
options.error();
}
options.complete();
}
};
}
}

 

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值