|
|
51CTO旗下网站
|
|
移动端

分享前端开发常用代码片段

本文作者总结了31个前端开发常用代码片段,其中包括预加载图像、检查图像是否加载、自动修复破坏的图像和悬停切换等等,希望对大家有所帮助。

作者:佚名来源:前端大全|2018-05-10 15:35

分享前端开发常用代码片段

一、预加载图像

如果你的网页中需要使用大量初始不可见的(例如,悬停的)图像,那么可以预加载这些图像。

二、检查图像是否加载

有时为了继续脚本,你可能需要检查图像是否全部加载完毕。

你也可以使用 ID 或 CLASS 替换<img> 标签来检查某个特定的图像是否被加载。

三、自动修复破坏的图像

逐个替换已经破坏的图像链接是非常痛苦的。不过,下面这段简单的代码可以帮助你。

四、悬停切换

当用户鼠标悬停在可点击的元素上时,可添加类到元素中,反之则移除类。

只需要添加必要的 CSS 即可。更简单的方法是使用 toggleClass() 方法。

五、淡入淡出/显示隐藏

六、鼠标滚轮

  1. $('#content').on("mousewheel DOMMouseScroll"function (event) {  
  2.     // chrome & ie || // firefox  
  3.     var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  
  4.         (event.originalEvent.detail && (event.originalEvent.detail > 0 ? -1 : 1));        
  5.  
  6.     if (delta > 0) {  
  7.         console.log('mousewheel top');  
  8.     } else if (delta < 0) {  
  9.         console.log('mousewheel bottom');  
  10.     }  
  11. }); 

七、鼠标坐标

1、JavaScript实现

  1. X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" />  
  2. function mousePosition(ev){  
  3.     if(ev.pageX || ev.pageY){  
  4.         return {x:ev.pageX, y:ev.pageY};  
  5.     }  
  6.     return {  
  7.         x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,  
  8.         y:ev.clientY + document.body.scrollTop - document.body.clientTop  
  9.     };  
  10.   
  11.  
  12. function mouseMove(ev){  
  13.     ev = ev || window.event;  
  14.     var mousePos = mousePosition(ev);  
  15.     document.getElementById('xxx').value = mousePos.x;  
  16.     document.getElementById('yyy').value = mousePos.y; 
  17.  
  18. document.onmousemove = mouseMove; 

2、jQuery实现

  1. $('#ele').click(function(event){  
  2.     //获取鼠标在图片上的坐标  
  3.     console.log('X:' + event.offsetX+'\n Y:' + event.offsetY);      
  4.  
  5.     //获取元素相对于页面的坐标  
  6.     console.log('X:'+$(this).offset().left+'\n Y:'+$(this).offset().top);  
  7. }); 

八、禁止移动端浏览器页面滚动

1、HTML实现

  1. <body ontouchmove="event.preventDefault()" > 

2、JavaScript实现

  1. document.addEventListener('touchmove'function(event) {  
  2.     event.preventDefault();  
  3. }); 

九、阻止默认行为

  1. // JavaScript  
  2. document.getElementById('btn').addEventListener('click'function (event) {  
  3.     event = event || window.event;  
  4.     if (event.preventDefault){  
  5.         // W3C  
  6.         event.preventDefault();  
  7.     } else 
  8.         // IE  
  9.         event.returnValue = false 
  10.     }  
  11. }, false);   
  12.  
  13. // jQuery  
  14. $('#btn').on('click'function (event) {  
  15.     event.preventDefault();  
  16. }); 

十、阻止冒泡

  1. // JavaScript  
  2. document.getElementById('btn').addEventListener('click'function (event) {  
  3.     event = event || window.event;   
  4.     if (event.stopPropagation){  
  5.         // W3C  
  6.         event.stopPropagation();  
  7.     } else 
  8.         // IE  
  9.         event.cancelBubble = true 
  10.     }  
  11. }, false);   
  12.  
  13. // jQuery  
  14. $('#btn').on('click'function (event) {  
  15.     event.stopPropagation();  
  16. }); 

十一、检测浏览器是否支持svg

  1. function isSupportSVG() {  
  2.     var SVG_NS = 'http://www.w3.org/2000/svg' 
  3.     return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect;  
  4.  
  5. console.log(isSupportSVG()); 

十二、检测浏览器是否支持canvas

  1. function isSupportCanvas() {  
  2.     if(document.createElement('canvas').getContext){  
  3.         return true 
  4.     }else 
  5.         return false 
  6.     }  
  7.   
  8. console.log(isSupportCanvas()); 

十三、检测是否是微信浏览器

  1. function isWeiXinClient() {  
  2.     var ua = navigator.userAgent.toLowerCase();  
  3.     if (ua.match(/MicroMessenger/i)=="micromessenger") {  
  4.         return true 
  5.     } else {  
  6.         return false 
  7.     }  
  8.   
  9.  
  10. alert(isWeiXinClient()); 

十四、检测是否移动端及浏览器内核

  1. var browser = {  
  2.     versions: function() {  
  3.         var u = navigator.userAgent;  
  4.         return {  
  5.             trident: u.indexOf('Trident') > -1, //IE内核  
  6.             presto: u.indexOf('Presto') > -1, //opera内核  
  7.             webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核  
  8.             gecko: u.indexOf('Firefox') > -1, //火狐内核Gecko  
  9.             mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否移动终端  
  10.             ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios  
  11.             android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android  
  12.             iPhone: u.indexOf('iPhone') > -1 , //iPhone  
  13.             iPad: u.indexOf('iPad') > -1, //iPad  
  14.             webApp: u.indexOf('Safari') > -1 //Safari  
  15.         };  
  16.     }  
  17.  
  18. if (browser.versions.mobile() || browser.versions.ios() || browser.versions.android() || browser.versions.iPhone() || browser.versions.iPad()) {  
  19.     alert('移动端');  

十五、检测是否电脑端/移动端

  1. var browser={  
  2.     versions:function(){  
  3.         var u = navigator.userAgent, app = navigator.appVersion;  
  4.         var sUserAgent = navigator.userAgent;  
  5.         return {  
  6.         trident: u.indexOf('Trident') > -1,  
  7.         presto: u.indexOf('Presto') > -1,  
  8.         isChrome: u.indexOf("chrome") > -1,  
  9.         isSafari: !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u),  
  10.         isSafari3: !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u) && u.indexOf('webkit/5') != -1,  
  11.         webKit: u.indexOf('AppleWebKit') > -1,  
  12.         gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,  
  13.         mobile: !!u.match(/AppleWebKit.*Mobile.*/),  
  14.         ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),  
  15.         android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,  
  16.         iPhone: u.indexOf('iPhone') > -1,  
  17.         iPad: u.indexOf('iPad') > -1,  
  18.         iWinPhone: u.indexOf('Windows Phone') > -1  
  19.         };  
  20.     }()  
  21.  
  22. if(browser.versions.mobile || browser.versions.iWinPhone){  
  23.     window.location = "http:/www.baidu.com/m/" 

十六、检测浏览器内核

  1. function getInternet(){     
  2.     if(navigator.userAgent.indexOf("MSIE")>0) {    
  3.       return "MSIE";       //IE浏览器    
  4.     }     
  5.  
  6.     if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){      
  7.       return "Firefox";     //Firefox浏览器    
  8.     }    
  9.  
  10.     if(isSafari=navigator.userAgent.indexOf("Safari")>0) {    
  11.       return "Safari";      //Safan浏览器    
  12.     }   
  13.     if(isCamino=navigator.userAgent.indexOf("Camino")>0){    
  14.       return "Camino";   //Camino浏览器  
  15.     }    
  16.     if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){      
  17.       return "Gecko";    //Gecko浏览器    
  18.     }      

十七、强制移动端页面横屏显示

  1. $( window ).on"orientationchange"function( event ) {  
  2.     if (event.orientation=='portrait') {  
  3.         $('body').css('transform''rotate(90deg)');  
  4.     } else {  
  5.         $('body').css('transform''rotate(0deg)');  
  6.     }  
  7. });  
  8. $( window ).orientationchange(); 

十八、电脑端页面全屏显示

  1. function fullscreen(element) {  
  2.     if (element.requestFullscreen) {  
  3.         element.requestFullscreen();  
  4.     } else if (element.mozRequestFullScreen) {  
  5.         element.mozRequestFullScreen();  
  6.     } else if (element.webkitRequestFullscreen) {  
  7.         element.webkitRequestFullscreen();  
  8.     } else if (element.msRequestFullscreen) {  
  9.         element.msRequestFullscreen(); 
  10.     } 
  11.   
  12.  
  13. fullscreen(document.documentElement); 

十九、获得/失去焦点

1、JavaScript实现

  1. <input id="i_input" type="text" value="会员卡号/手机号"/> 
  2. // JavaScript  
  3. window.onload = function(){  
  4.     var oIpt = document.getElementById("i_input");  
  5.  
  6.     if(oIpt.value == "会员卡号/手机号"){  
  7.         oIpt.style.color = "#888" 
  8.     }else 
  9.         oIpt.style.color = "#000" 
  10.     }; 
  11.  
  12.     oIpt.onfocus = function(){  
  13.         if(this.value == "会员卡号/手机号"){  
  14.             this.value="" 
  15.             this.style.color = "#000" 
  16.             this.type = "password" 
  17.         }else 
  18.             this.style.color = "#000" 
  19.         } 
  20.     };      
  21.  
  22.     oIpt.onblur = function(){  
  23.         if(this.value == ""){  
  24.             this.value="会员卡号/手机号" 
  25.             this.style.color = "#888" 
  26.             this.type = "text" 
  27.         }  
  28.     };  

2、jQuery实现

  1. <input type="text" class="oldpsw" id="showPwd" value="请输入您的注册密码"/>  
  2. <input type="password" name="psw" class="oldpsw" id="password" value="" style="display:none;"/>  
  3.  
  4. // jQuery  
  5. $("#showPwd").focus(function() {  
  6.     var text_value=$(this).val();  
  7.     if (text_value =='请输入您的注册密码') {  
  8.         $("#showPwd").hide();  
  9.         $("#password").show().focus();  
  10.     }  
  11. });  
  12. $("#password").blur(function() {  
  13.     var text_value = $(this).val();  
  14.     if (text_value == "") {  
  15.         $("#showPwd").show();  
  16.         $("#password").hide();  
  17.     }  
  18. }); 

二十、获取上传文件大小

  1. <input type="file" id="filePath" onchange="getFileSize(this)"/> 
  2.  
  3. // 兼容IE9低版本  
  4. function getFileSize(obj){  
  5.     var filesize;  
  6.  
  7.     if(obj.files){  
  8.         filesize = obj.files[0].size 
  9.     }else 
  10.         try{  
  11.             var path,fso;  
  12.             path = document.getElementById('filePath').value;  
  13.             fso = new ActiveXObject("Scripting.FileSystemObject");  
  14.             filesize = fso.GetFile(path).size 
  15.         }  
  16.         catch(e){  
  17.             // 在IE9及低版本浏览器,如果不容许ActiveX控件与页面交互,点击了否,就无法获取size  
  18.             console.log(e.message); // Automation 服务器不能创建对象  
  19.             filesize = 'error'; // 无法获取  
  20.         }  
  21.     }  
  22.     return filesize;  

二十一、限制上传文件类型

1、高版本浏览器

  1. <input type="file" name="filePath" accept=".jpg,.jpeg,.doc,.docxs,.pdf"/> 

2、限制图片

  1. <input type="file" class="file" value="上传" accept="image/*"

3、低版本浏览器

  1. <input type="file" id="filePath" onchange="limitTypes()"  
  2.  
  3. /* 通过扩展名,检验文件格式。  
  4. * @parma filePath{string} 文件路径  
  5. * @parma acceptFormat{Array} 允许的文件类型  
  6. * @result 返回值{Boolen}:true or false  
  7. */ 
  8.  
  9. function checkFormat(filePath,acceptFormat){  
  10.     var resultBool= false 
  11.         ex = filePath.substring(filePath.lastIndexOf('.') + 1);  
  12.         ex = ex.toLowerCase();          
  13.  
  14.     for(var i = 0; i < acceptFormat.length; i++){  
  15.     if(acceptFormat[i] == ex){  
  16.             resultBool = true 
  17.             break;  
  18.     } 
  19.      }  
  20.     return resultBool;  
  21. };          
  22.  
  23. function limitTypes(){  
  24.     var obj = document.getElementById('filePath');  
  25.     var path = obj.value;  
  26.     var result = checkFormat(path,['bmp','jpg','jpeg','png']);      
  27.  
  28.     if(!result){  
  29.         alert('上传类型错误,请重新上传');  
  30.         obj.value = '' 
  31.     }  

二十二、正则表达式

  1. //验证邮箱  
  2. /^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/   
  3. //验证手机号  
  4. /^1[3|5|8|7]\d{9}$/  
  5. //验证URL  
  6. /^http:\/\/.+\./   
  7.  
  8. //验证身份证号码  
  9. /(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/  
  10.   
  11.  
  12. //匹配字母、数字、中文字符  
  13. /^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/  
  14.   
  15. //匹配中文字符  
  16. /[\u4e00-\u9fa5]/ 
  17.   
  18.  
  19. //匹配双字节字符(包括汉字)  
  20. /[^\x00-\xff]/ 

二十三、限制字符数

  1. <input id="txt" type="text" 
  2.  
  3. //字符串截取  
  4. function getByteVal(val, max) {  
  5.     var returnValue = '' 
  6.     var byteValLen = 0;  
  7.     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;  
  8.         returnValue += val[i];  
  9.     }  
  10.     return returnValue;  
  11.  
  12. $('#txt').on('keyup'function () {  
  13.     var val = this.value;  
  14.     if (val.replace(/[^\x00-\xff]/g, "**").length > 14) {  
  15.         this.value = getByteVal(val, 14);  
  16.     }  
  17. }); 

二十四、验证码倒计时

  1. <input id="send" type="button" value="发送验证码"
  2.  
  3. // JavaScript  
  4. var times = 60, // 时间设置60秒  
  5. timer = null   
  6.  
  7. document.getElementById('send').onclick = function () {  
  8.  // 计时开始  
  9.  timer = setInterval(function () {  
  10.  times--;   
  11.  
  12.  if (times <= 0) {  
  13.  send.value = '发送验证码' 
  14.  clearInterval(timer);  
  15.  send.disabled = false 
  16.  times = 60;  
  17.  } else {  
  18.  send.value = times + '秒后重试' 
  19.  send.disabled = true 
  20.  }  
  21.  }, 1000);  
  22.  
  23.  
  24. var times = 60,  
  25.     timer = null
  26.  
  27. $('#send').on('click'function () {  
  28.     var $this = $(this);      
  29.  
  30.     // 计时开始  
  31.     timer = setInterval(function () {  
  32.         times--;  
  33.         if (times <= 0) {  
  34.             $this.val('发送验证码');  
  35.             clearInterval(timer);  
  36.             $this.attr('disabled'false);  
  37.             times = 60;  
  38.         } else {  
  39.             $this.val(times + '秒后重试');  
  40.             $this.attr('disabled'true);  
  41.         }  
  42.     }, 1000);  
  43. }); 

二十五、时间倒计时

  1. <p id="_lefttime"></p>  
  2. var times = 60,  
  3.     timer = null  
  4.  
  5. $('#send').on('click'function () {  
  6.     var $this = $(this);      
  7.  
  8.     // 计时开始  
  9.     timer = setInterval(function () {  
  10.         times--;          
  11.  
  12.         if (times <= 0) {  
  13.             $this.val('发送验证码');  
  14.             clearInterval(timer);  
  15.             $this.attr('disabled'false);  
  16.             times = 60;  
  17.         } else {  
  18.             $this.val(times + '秒后重试');  
  19.             $this.attr('disabled'true);  
  20.         }  
  21.     }, 1000);  
  22. }); 

二十六、倒计时跳转

  1. <div id="showtimes"></div>  
  2.  
  3. // 设置倒计时秒数    
  4. var t = 10;     
  5.  
  6. // 显示倒计时秒数    
  7. function showTime(){  
  8.  
  9.     t -= 1;    
  10.     document.getElementById('showtimes').innerHTML= t;     
  11.  
  12.     if(t==0){    
  13.         location.href='error404.asp';    
  14.     }     
  15.  
  16.     //每秒执行一次 showTime()    
  17.     setTimeout("showTime()",1000);    
  18. }   
  19.  
  20. showTime(); 

二十七、时间戳、毫秒格式化

  1. function formatDate(now) {  
  2.     var y = now.getFullYear();  
  3.     var m = now.getMonth() + 1; // 注意 JavaScript 月份+1  
  4.     var d = now.getDate();  
  5.     var h = now.getHours();  
  6.     var m = now.getMinutes();  
  7.     var s = now.getSeconds();      
  8.  
  9.     return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s;  
  10.  
  11. var nowDate = new Date(1442978789184);  
  12. alert(formatDate(nowDate)); 

二十八、当前日期

  1. var calculateDate = function(){  
  2.     var date = new Date();  
  3.     var weeks = ["日","一","二","三","四","五","六"];    
  4.     return date.getFullYear()+"年"+(date.getMonth()+1)+"月" 
  5.     date.getDate()+"日 星期"+weeks[date.getDay()];  
  6.  
  7. $(function(){  
  8.     $("#dateSpan").html(calculateDate());  
  9. }); 

二十九、判断周六/周日

  1. <p id="text"></p> 
  2.  
  3. function time(y,m){  
  4.     var tempTime = new Date(y,m,0);  
  5.     var time = new Date();  
  6.     var saturday = new Array();  
  7.     var sunday = new Array();      
  8.  
  9.     for(var i=1;i<=tempTime.getDate();i++){  
  10.         time.setFullYear(y,m-1,i);      
  11.  
  12.         var day = time.getDay();          
  13.  
  14.         if(day == 6){  
  15.             saturday.push(i);  
  16.         }else if(day == 0){  
  17.             sunday.push(i);  
  18.         }  
  19.     } 
  20.  
  21.     var text = y+"年"+m+"月份"+"<br />"  
  22.                 +"周六:"+saturday.toString()+"<br />"  
  23.                 +"周日:"+sunday.toString();                  
  24.  
  25.     document.getElementById("text").innerHTML = text;  
  26.  
  27. time(2018,5); 

三十、AJAX调用错误处理

当 Ajax 调用返回 404 或 500 错误时,就执行错误处理程序。如果没有定义处理程序,其他的 jQuery 代码或会就此罢工。定义一个全局的 Ajax 错误处理程序

三十一、链式插件调用

jQuery 允许“链式”插件的方法调用,以减轻反复查询 DOM 并创建多个 jQuery 对象的过程。

通过使用链式,可以改善

还有一种方法是在(前缀$)变量中高速缓存元素

链式和高速缓存的方法都是 jQuery 中可以让代码变得更短和更快的最佳做法。

【编辑推荐】

  1. 为什么程序员千万不要重写代码?
  2. 35行代码利用python生成字符画,非常适合初学者练习,附源码!
  3. 我们可以在同一个虚拟机中运行Python 2和3代码而不需要更改代码吗?
  4. 技术出身的互联网大佬们,写出的代码有什么不同?
  5. Java Web应用的代码分层最佳实践
【责任编辑:庞桂玉 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

网络渗透测试——保护网络安全的技术、工具和过程

网络和计算机安全问题已经成为政府、企业必须面对的现实问题。应对安全威胁的途径之一就是采用渗透测试的方法模拟黑客的攻击,找出网络和计...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊