前端设计师们最常用的JS代码汇总

逛社区时看到的文章，我修改调整了内容，如果大家觉得也有帮助可以收藏下~

HTML5 DOM 选择器

// querySelectorAll() 返回匹配到的所有元素，是一个nodeList集合
var items = document.querySelectorAll('.item');
console.log(items[0]);

阻止默认行为

if (event.preventDefault){
// w3c方法阻止默认行为
event.preventDefault();
} else{
// ie 阻止默认行为
event.returnValue = false;
}
},false);

// jQuery
$('#btn').on('click',function (event) {
event.preventDefault();
});

阻止冒泡

方法阻止冒泡 event.stopPropagation(); } else{ // ie 阻止冒泡 event.cancelBubble = true; } },false); // jQuery $('#btn').on('click',function (event) { event.stopPropagation(); });

鼠标滚轮事件

0 ? 1 : -1)) || (event.originalEvent.detail && (event.originalEvent.detail > 0 ? -1 : 1));

if (delta > 0) {
// 向上滚动
console.log('mousewheel top');
} else if (delta < 0) {
// 向下滚动
console.log('mousewheel bottom');
}
});

检测浏览器是否支持svg

检测浏览器是否支持canvas

检测是否是微信浏览器

jQuery 获取鼠标在图片上的坐标

获取鼠标在图片上的坐标 console.log('X：' + event.offsetX+'\n Y:' + event.offsetY);

//获取元素相对于页面的坐标
console.log('X：'+$(this).offset().left+'\n Y:'+$(this).offset().top);
});

验证码倒计时代码

document.getElementById('send').onclick = function () {
// 计时开始
timer = setInterval(function () {
times--;

if (times <= 0) {
  send.value = '发送验证码';
  clearInterval(timer);
  send.disabled = false;
  times = 60;
} else {
  send.value = times + '秒后重试';
  send.disabled = true;
}

},1000);
}

// jQuery版本
var times = 60,timer = null;
$('#send').on('click',function () {
var $this = $(this);

// 计时开始
timer = setInterval(function () {
times--;

if (times <= 0) {
  $this.val('发送验证码');
  clearInterval(timer);
  $this.attr('disabled',false);
  times = 60;
} else {
  $this.val(times + '秒后重试');
  $this.attr('disabled',true);
}

},1000);
});

常用的一些正则表达式

中文字符 /^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/ //验证邮箱 /^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/ //验证手机号 /^1[3|5|8|7]\d{9}$/ //验证URL /^http:\/\/.+\./ //验证身份证号码 /(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/ //匹配中文字符的正则表达式 /[\u4e00-\u9fa5]/ //匹配双字节字符(包括汉字在内) /[^\x00-\xff]/

js时间戳、毫秒格式化

return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s;
}
var nowDate = new Date(2016,5,13,19,18,30,20);
console.log(nowDate.getTime()); // 获得当前毫秒数: 1465816710020
console.log(formatDate(nowDate));

js限定字符数（注意：一个汉字算2个字符）

截取 function getByteVal(val,max) { var returnValue = ''; var byteValLen = 0; for (var i = 0; i < val.length; i++) { if (val[i].match(/[^\x00-\xff]/ig) != null) byteValLen += 2; else byteValLen += 1; if (byteValLen > max) break; returnValue += val[i]; } return returnValue; } $('#txt').on('keyup',function () { var val = this.value; if (val.replace(/[^\x00-\xff]/g,"**").length > 14) { this.value = getByteVal(val,14); } });

js判断是否移动端及浏览器内核

-1,//IE内核 presto: u.indexOf('Presto') > -1,//opera内核 webKit: u.indexOf('AppleWebKit') > -1,//苹果、谷歌内核 gecko: u.indexOf('Firefox') > -1,//火狐内核Gecko mobile: !!u.match(/AppleWebKit.*Mobile.*/),//是否为移动终端 ios: !!u.match(/\(i[^;]+;( U;)? cpu.+Mac OS X/),//ios android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,//android iPhone: u.indexOf('iPhone') > -1,//iPhone iPad: u.indexOf('iPad') > -1,//iPad webApp: u.indexOf('Safari') > -1 //Safari }; } } if (browser.versions.mobile() || browser.versions.ios() || browser.versions.android() || browser.versions.iPhone() || browser.versions.iPad()) { alert('移动端'); }

之前我用过一个检测客户端的库觉得挺好用的，也推荐给大家叫 device.js，大家可以 Googel 或百度 GItHub仓库地址：

getBoundingClientRect() 获取元素位置

属性 var myDiv = document.getElementById('myDiv'); var x = myDiv.getBoundingClientRect().left; var y = myDiv.getBoundingClientRect().top; // 相当于jquery的： $(this).offset().left、$(this).offset().top // js的：this.offsetLeft、this.offsetTop

HTML5全屏

fullscreen(document.documentElement);