分享前端开发中最常用的JavaScript代码片段【干货】|网站前端开发_前端开发者

网站前端开发_前端开发者丨css

https://www.rokub.com

HTML5 DOM 选择器

javascript 代码

// querySelector() 返回匹配到的第一个元素<br /><br /> var item = document.querySelector(‘.item’);<br /><br /> console.log(item);</p><br /> <p>// querySelectorAll() 返回匹配到的所有元素，是一个nodeList集合<br /><br /> var items = document.querySelectorAll(‘.item’);<br /><br /> console.log(items[0]);

阻止默认行为

javascript 代码

// 原生<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/javascript" title="js">js</a></span><br /><br /> document.getElementById(‘btn’).addEventListener(‘click’, function (event) {<br /><br /> event = event || window.event；</p><br /> <p> if (event.preventDefault){<br /><br /> // w3c方法 阻止默认行为<br /><br /> event.preventDefault();<br /><br /> } else{<br /><br /> // ie 阻止默认行为<br /><br /> event.returnValue = false;<br /><br /> }<br /><br /> }, false);</p><br /> <p>// <span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/jquery" title="jquery">jquery</a></span><br /><br /> $(‘#btn’).on(‘click’, function (event) {<br /><br /> event.preventDefault();<br /><br /> });

阻止冒泡

javascript 代码

// 原生<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/javascript" title="js">js</a></span><br /><br /> document.getElementById(‘btn’).addEventListener(‘click’, function (event) {<br /><br /> event = event || window.event；</p><br /> <p> if (event.stopPropagation){<br /><br /> // w3c方法 阻止冒泡<br /><br /> event.stopPropagation();<br /><br /> } else{<br /><br /> // ie 阻止冒泡<br /><br /> event.cancelBubble = true;<br /><br /> }<br /><br /> }, false);</p><br /> <p>// <span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/jquery" title="jquery">jquery</a></span><br /><br /> $(‘#btn’).on(‘click’, function (event) {<br /><br /> event.stopPropagation();<br /><br /> });

鼠标滚轮事件

javascript 代码

$(‘#content’).on(“mousewheel DOMMouseScroll”, function (event) {<br /><br /> // chrome & ie || // firefox<br /><br /> var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1)) || (event.originalEvent.detail && (event.originalEvent.detail > 0 ? -1 : 1)); </p><br /> <p> if (delta > 0) {<br /><br /> // 向上滚动<br /><br /> console.log(‘mousewheel top’);<br /><br /> } else if (delta < 0) {<br /><br /> // 向下滚动<br /><br /> console.log(‘mousewheel bottom’);<br /><br /> }<br /><br /> });

检测浏览器是否支持svg

javascript 代码

function isSupportSVG() {<br /><br /> var SVG_NS = ‘http://www.w3.org/2000/svg’;<br /><br /> return !!document.createElementNS &&!!document.createElementNS(SVG_NS, ‘svg’).createSVGRect;<br /><br /> } </p><br /> <p>// 测试<br /><br /> console.log(isSupportSVG());

检测浏览器是否支持canvas

javascript 代码

function isSupportCanvas() {<br /><br /> if(document.createElement(‘canvas’).getContext){<br /><br /> return true;<br /><br /> }else{<br /><br /> return false;<br /><br /> }<br /><br /> }</p><br /> <p>// 测试，打开谷歌浏览器控制台查看结果<br /><br /> console.log(isSupportCanvas());

检测是否是微信浏览器

javascript 代码

function isWeiXinClient() {<br /><br /> var ua = navigator.userAgent.toLowerCase();<br /><br /> if (ua.match(/MicroMessenger/i)==”micromessenger”) {<br /><br /> return true;<br /><br /> } else {<br /><br /> return false;<br /><br /> }<br /><br /> }</p><br /> <p>// 测试<br /><br /> alert(isWeiXinClient());

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

javascript 代码

$(‘#myImage’).click(function(event){<br /><br /> //获取鼠标在图片上的坐标<br /><br /> console.log(‘X：’ + event.offsetX+’\n Y:’ + event.offsetY); </p><br /> <p> //获取元素相对于页面的坐标<br /><br /> console.log(‘X：’+$(this).offset().left+’\n Y:’+$(this).offset().top);<br /><br /> });

验证码倒计时代码

html 代码

<!– dom –><br /><br /> <input id=”send” type=”button” value=”发送验证码”>

javascript 代码

// 原生js版本<br /><br /> var times = 60, // 临时设为60秒<br /><br /> timer = null;</p><br /> <p>document.getElementById(‘send’).onclick = function () {<br /><br /> // 计时开始<br /><br /> timer = setInterval(function () {<br /><br /> times–;</p><br /> <p> if (times <= 0) {<br /><br /> send.value = ‘发送验证码’;<br /><br /> clearInterval(timer);<br /><br /> send.disabled = false;<br /><br /> times = 60;<br /><br /> } else {<br /><br /> send.value = times + ‘秒后重试’;<br /><br /> send.disabled = true;<br /><br /> }<br /><br /> }, 1000);<br /><br /> }

javascript 代码

// <span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/jquery" title="jquery">jquery</a></span>版本<br /><br /> var times = 60,<br /><br /> timer = null;</p><br /> <p>$(‘#send’).on(‘click’, function () {<br /><br /> var $this = $(this);</p><br /> <p> // 计时开始<br /><br /> timer = setInterval(function () {<br /><br /> times–;</p><br /> <p> if (times <= 0) {<br /><br /> $this.val(‘发送验证码’);<br /><br /> clearInterval(timer);<br /><br /> $this.attr(‘disabled’, false);<br /><br /> times = 60;<br /><br /> } else {<br /><br /> $this.val(times + ‘秒后重试’);<br /><br /> $this.attr(‘disabled’, true);<br /><br /> }<br /><br /> }, 1000);<br /><br /> });

常用的一些正则表达式

javascript 代码

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

JavaScript时间戳、毫秒格式化

javascript 代码

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

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

html 代码

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

javascript 代码

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

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

javascript 代码

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

getBoundingClientRect() 获取元素位置

javascript 代码

//它返回一个对象，其中包含了left、right、top、bottom四个属性<br /><br /> var myDiv = document.getElementById(‘myDiv’);<br /><br /> var x = myDiv.getBoundingClientRect().left;<br /><br /> var y = myDiv.getBoundingClientRect().top; </p><br /> <p>// 相当于<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/jquery" title="jquery">jquery</a></span>的： $(this).offset().left、$(this).offset().top // js的：this.offsetLeft、this.offsetTop

HTML5全屏

javascript 代码

function fullscreen(element) {<br /><br /> if (element.requestFullscreen) {<br /><br /> element.requestFullscreen();<br /><br /> } else if (element.mozRequestFullScreen) {<br /><br /> element.mozRequestFullScreen();<br /><br /> } else if (element.webkitRequestFullscreen) {<br /><br /> element.webkitRequestFullscreen();<br /><br /> } else if (element.msRequestFullscreen) {<br /><br /> element.msRequestFullscreen();<br /><br /> }<br /><br /> }</p><br /> <p>fullscreen(document.documentElement);

网站前端开发_前端开发者丨css

https://www.rokub.com