自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

分享前端開發(fā)常用代碼片段

作者：佚名
開發(fā) 前端
本文作者總結(jié)了31個前端開發(fā)常用代碼片段，其中包括預(yù)加載圖像、檢查圖像是否加載、自動修復(fù)破壞的圖像和懸停切換等等，希望對大家有所幫助。

分享前端開發(fā)常用代碼片段

一、預(yù)加載圖像

如果你的網(wǎng)頁中需要使用大量初始不可見的（例如，懸停的）圖像，那么可以預(yù)加載這些圖像。

二、檢查圖像是否加載

有時為了繼續(xù)腳本，你可能需要檢查圖像是否全部加載完畢。

你也可以使用 ID 或 CLASS 替換<img> 標(biāo)簽來檢查某個特定的圖像是否被加載。

三、自動修復(fù)破壞的圖像

逐個替換已經(jīng)破壞的圖像鏈接是非常痛苦的。不過，下面這段簡單的代碼可以幫助你。

四、懸停切換

當(dāng)用戶鼠標(biāo)懸停在可點擊的元素上時，可添加類到元素中，反之則移除類。

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

五、淡入淡出/顯示隱藏

六、鼠標(biāo)滾輪 

  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. }); 

七、鼠標(biāo)坐標(biāo)

1、JavaScript實現(xiàn) 

  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實現(xiàn) 

  1. $('#ele').click(function(event){  
  2.     //獲取鼠標(biāo)在圖片上的坐標(biāo)  
  3.     console.log('X：' + event.offsetX+'\n Y:' + event.offsetY);      
  4.  
  5.     //獲取元素相對于頁面的坐標(biāo)  
  6.     console.log('X：'+$(this).offset().left+'\n Y:'+$(this).offset().top);  
  7. }); 

八、禁止移動端瀏覽器頁面滾動

1、HTML實現(xiàn) 

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

2、JavaScript實現(xiàn) 

  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.  
  6. 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()); 

十四、檢測是否移動端及瀏覽器內(nèi)核 

  1. var browser = {  
  2.     versions: function() {  
  3.         var u = navigator.userAgent;  
  4.         return {  
  5.             trident: u.indexOf('Trident') > -1, //IE內(nèi)核  
  6.             presto: u.indexOf('Presto') > -1, //opera內(nèi)核  
  7.             webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內(nèi)核  
  8.             gecko: u.indexOf('Firefox') > -1, //火狐內(nèi)核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('移動端');  
  20. } 

十五、檢測是否電腦端/移動端 

  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/";  
  24. } 

十六、檢測瀏覽器內(nèi)核 

  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.     }      
  19. } 

十七、強制移動端頁面橫屏顯示 

  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實現(xiàn) 

  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.     };  
  29. } 

2、jQuery實現(xiàn) 

  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 服務(wù)器不能創(chuàng)建對象  
  19.             filesize = 'error'; // 無法獲取  
  20.         }  
  21.     }  
  22.     return filesize;  
  23. } 

二十一、限制上傳文件類型

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.     }  
  32. } 

二十二、正則表達式 

  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. //匹配字母、數(shù)字、中文字符  
  13. /^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/  
  14.   
  15. //匹配中文字符  
  16. /[\u4e00-\u9fa5]/ 
  17.   
  18.  
  19. //匹配雙字節(jié)字符(包括漢字)  
  20. /[^\x00-\xff]/ 

二十三、限制字符數(shù) 

  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.  
  13. $('#txt').on('keyup', function () {  
  14.     var val = this.value;  
  15.     if (val.replace(/[^\x00-\xff]/g, "**").length > 14) {  
  16.         this.value = getByteVal(val, 14);  
  17.     }  
  18. }); 

二十四、驗證碼倒計時 

  1. <input id="send" type="button" value="發(fā)送驗證碼"> 
  2.  
  3. // JavaScript  
  4. var times = 60, // 時間設(shè)置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 = '發(fā)送驗證碼';  
  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('發(fā)送驗證碼');  
  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('發(fā)送驗證碼');  
  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. }); 

二十六、倒計時跳轉(zhuǎn) 

  1. <div id="showtimes"></div>  
  2.  
  3. // 設(shè)置倒計時秒數(shù)    
  4. var t = 10;     
  5.  
  6. // 顯示倒計時秒數(shù)    
  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.     //每秒執(zhí)行一次 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.  
  12. var nowDate = new Date(1442978789184);  
  13. alert(formatDate(nowDate)); 

二十八、當(dāng)前日期 

  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.  
  8. $(function(){  
  9.     $("#dateSpan").html(calculateDate());  
  10. }); 

二十九、判斷周六/周日 

  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調(diào)用錯誤處理

當(dāng) Ajax 調(diào)用返回 404 或 500 錯誤時，就執(zhí)行錯誤處理程序。如果沒有定義處理程序，其他的 jQuery 代碼或會就此罷工。定義一個全局的 Ajax 錯誤處理程序

三十一、鏈?zhǔn)讲寮{(diào)用

jQuery 允許“鏈?zhǔn)?rdquo;插件的方法調(diào)用，以減輕反復(fù)查詢 DOM 并創(chuàng)建多個 jQuery 對象的過程。

通過使用鏈?zhǔn)?，可以改?/p>

還有一種方法是在（前綴$）變量中高速緩存元素

 

鏈?zhǔn)胶透咚倬彺娴姆椒ǘ际?jQuery 中可以讓代碼變得更短和更快的最佳做法。 

責(zé)任編輯：龐桂玉 來源： 前端大全
前端代碼圖像
相關(guān)推薦

2021-10-31 07:36:17

前端JavaScript編程

2012-11-27 10:23:18

CSSWeb開發(fā)

2011-07-07 10:35:53

htaccess

2011-07-11 10:16:07

JavaScript

2023-09-03 16:46:09

Pandas工具

2011-07-14 10:07:19

PHP

2020-11-16 16:04:42

CSS設(shè)計代碼

2024-12-05 14:06:29

JS代碼片段

2025-04-03 04:11:00

JS代碼URL

2024-05-28 00:03:00

JavaScript開發(fā)

2024-08-02 17:19:36

2011-08-22 14:31:53

iPhone開發(fā)

2018-01-19 22:36:23

idea插件編碼

2016-04-13 11:18:08

jQuery代碼片段Web開發(fā)

2012-03-06 16:57:40

jQuery mobijQuery mobiframework

2011-07-29 14:48:48

iPhone開發(fā)

2015-08-19 09:15:11

C#程序員實用代碼

2025-01-08 08:53:05

2015-10-29 10:30:41

C#程序員實用代碼

2016-04-25 10:07:18

jQuery代碼Web開發(fā)效率
點贊
收藏

51CTO技術(shù)棧公眾號