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

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

// querySelector（） 返回匹配到的第一个元素var item = document.querySelector（".item"）;console.log（item）;// querySelectorAll（） 返回匹配到的所有元素，是一个nodeList集合var items = document.querySelectorAll（".item"）;console.log（items[0]）;

阻止默认行为

// 原生jsdocument.getElementById（"btn"）.addEventListener（"click", function （event） {event = event || window.event；if （event.preventDefault）{// w3c方法 阻止默认行为event.preventDefault（）;} else{// ie 阻止默认行为event.returnValue = false;}}, false）;// jQuery$（"#btn"）.on（"click", function （event） {event.preventDefault（）;}）;

阻止冒泡

// 原生jsdocument.getElementById（"btn"）.addEventListener（"click", function （event） {event = event || window.event；if （event.stopPropagation）{// w3c方法 阻止冒泡event.stopPropagation（）;} else{// ie 阻止冒泡event.cancelBubble = true;}}, false）;// jQuery$（"#btn"）.on（"click", function （event） {event.stopPropagation（）;}）;

鼠标滚轮事件

$（"#content"）.on（"mousewheel DOMMouseScroll", function （event） { // chrome & ie || // firefoxvar delta = （event.originalEvent.wheelDelta && （event.originalEvent.wheelDelta > 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

function isSupportSVG（） { var SVG_NS = "http://www.w3.org/2000/svg";return ！！document.createElementNS &&！！document.createElementNS（SVG_NS, "svg"）.createSVGRect; } // 测试console.log（isSupportSVG（））;

检测浏览器是否支持canvas

function isSupportCanvas（） {if（document.createElement（"canvas"）.getContext）{return true;}else{return false;}}// 测试，打开谷歌浏览器控制台查看结果console.log（isSupportCanvas（））;

检测是否是微信浏览器

function isWeiXinClient（） {var ua = navigator.userAgent.toLowerCase（）; if （ua.match（/MicroMessenger/i）=="micromessenger"） { return true; } else { return false; }}// 测试alert（isWeiXinClient（））;

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

$（"#myImage"）.click（function（event）{//获取鼠标在图片上的坐标 console.log（"X：" + event.offsetX+"
 Y:" + event.offsetY）; //获取元素相对于页面的坐标 console.log（"X："+$（this）.offset（）.left+"
 Y:"+$（this）.offset（）.top）;}）;

验证码倒计时代码

<！-- dom --><input id="send" type="button" value="发送验证码">

// 原生js版本var times = 60, // 临时设为60秒timer = null;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时间戳、毫秒格式化

function formatDate（now） { var y = now.getFullYear（）;var m = now.getMonth（） + 1; // 注意js里的月要加1 var d = now.getDate（）;var h = now.getHours（）; var m = now.getMinutes（）; var s = now.getSeconds（）;return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s; } var nowDate = new Date（2016, 5, 13, 19, 18, 30, 20）;console.log（nowDate.getTime（））; // 获得当前毫秒数: 1465816710020console.log（formatDate（nowDate））;

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

<input id="txt" type="text">

//字符串截取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判断是否移动端及浏览器内核

var browser = { versions: function（） { var u = navigator.userAgent; return { trident: u.indexOf（"Trident"） > -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仓库地址：https://github.com/matthewhudson/device.js
getBoundingClientRect（）获取元素位置

//它返回一个对象，其中包含了left、right、top、bottom四个属性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全屏

function fullscreen（element） {if （element.requestFullscreen） {element.requestFullscreen（）;} else if （element.mozRequestFullScreen） {element.mozRequestFullScreen（）;} else if （element.webkitRequestFullscreen） {element.webkitRequestFullscreen（）;} else if （element.msRequestFullscreen） {element.msRequestFullscreen（）;}}fullscreen（document.documentElement）;