日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
分享前端開發(fā)常用代碼片段

一、預(yù)加載圖像

為橫山等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及橫山網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、橫山網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

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

二、檢查圖像是否加載

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

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

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

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

四、懸停切換

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

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

五、淡入淡出/顯示隱藏

六、鼠標(biāo)滾輪 

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

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

1、JavaScript實(shí)現(xiàn) 

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

2、jQuery實(shí)現(xiàn) 

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

八、禁止移動(dòng)端瀏覽器頁(yè)面滾動(dòng)

1、HTML實(shí)現(xiàn) 

 
 
 
 
    
  
  
  
  
  1.  
    2.

2、JavaScript實(shí)現(xiàn) 

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

九、阻止默認(rèn)行為 

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

十、阻止冒泡 

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

十一、檢測(cè)瀏覽器是否支持svg 

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

十二、檢測(cè)瀏覽器是否支持canvas 

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

十三、檢測(cè)是否是微信瀏覽器 

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

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

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

十五、檢測(cè)是否電腦端/移動(dòng)端 

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

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

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

十七、強(qiáng)制移動(dòng)端頁(yè)面橫屏顯示 

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

十八、電腦端頁(yè)面全屏顯示 

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

十九、獲得/失去焦點(diǎn)

1、JavaScript實(shí)現(xiàn) 

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2. // JavaScript  
    3. 
  
  
  
  
  3. window.onload = function(){  
    4. 
  
  
  
  
  4.     var oIpt = document.getElementById("i_input");  
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6.     if(oIpt.value == "會(huì)員卡號(hào)/手機(jī)號(hào)"){  
    7. 
  
  
  
  
  7.         oIpt.style.color = "#888";  
    8. 
  
  
  
  
  8.     }else{  
    9. 
  
  
  
  
  9.         oIpt.style.color = "#000";  
    10. 
  
  
  
  
  10.     }; 
    11. 
  
  
  
  
  11.  
    12. 
  
  
  
  
  12.     oIpt.onfocus = function(){  
    13. 
  
  
  
  
  13.         if(this.value == "會(huì)員卡號(hào)/手機(jī)號(hào)"){  
    14. 
  
  
  
  
  14.             this.value="";  
    15. 
  
  
  
  
  15.             this.style.color = "#000";  
    16. 
  
  
  
  
  16.             this.type = "password";  
    17. 
  
  
  
  
  17.         }else{  
    18. 
  
  
  
  
  18.             this.style.color = "#000";  
    19. 
  
  
  
  
  19.         } 
    20. 
  
  
  
  
  20.     };      
    21. 
  
  
  
  
  21.  
    22. 
  
  
  
  
  22.     oIpt.onblur = function(){  
    23. 
  
  
  
  
  23.         if(this.value == ""){  
    24. 
  
  
  
  
  24.             this.value="會(huì)員卡號(hào)/手機(jī)號(hào)";  
    25. 
  
  
  
  
  25.             this.style.color = "#888";  
    26. 
  
  
  
  
  26.             this.type = "text";  
    27. 
  
  
  
  
  27.         }  
    28. 
  
  
  
  
  28.     };  
    29. 
  
  
  
  
  29. } 
    30.

2、jQuery實(shí)現(xiàn) 

 
 
 
 
    
  
  
  
  
  1.   
    2. 
  
  
  
  
  2.   
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. // jQuery  
    5. 
  
  
  
  
  5. $("#showPwd").focus(function() {  
    6. 
  
  
  
  
  6.     var text_value=$(this).val();  
    7. 
  
  
  
  
  7.     if (text_value =='請(qǐng)輸入您的注冊(cè)密碼') {  
    8. 
  
  
  
  
  8.         $("#showPwd").hide();  
    9. 
  
  
  
  
  9.         $("#password").show().focus();  
    10. 
  
  
  
  
  10.     }  
    11. 
  
  
  
  
  11. });  
    12. 
  
  
  
  
  12. $("#password").blur(function() {  
    13. 
  
  
  
  
  13.     var text_value = $(this).val();  
    14. 
  
  
  
  
  14.     if (text_value == "") {  
    15. 
  
  
  
  
  15.         $("#showPwd").show();  
    16. 
  
  
  
  
  16.         $("#password").hide();  
    17. 
  
  
  
  
  17.     }  
    18. 
  
  
  
  
  18. }); 
    19.

二十、獲取上傳文件大小 

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. // 兼容IE9低版本  
    4. 
  
  
  
  
  4. function getFileSize(obj){  
    5. 
  
  
  
  
  5.     var filesize;  
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7.     if(obj.files){  
    8. 
  
  
  
  
  8.         filesize = obj.files[0].size;  
    9. 
  
  
  
  
  9.     }else{  
    10. 
  
  
  
  
  10.         try{  
    11. 
  
  
  
  
  11.             var path,fso;  
    12. 
  
  
  
  
  12.             path = document.getElementById('filePath').value;  
    13. 
  
  
  
  
  13.             fso = new ActiveXObject("Scripting.FileSystemObject");  
    14. 
  
  
  
  
  14.             filesize = fso.GetFile(path).size;  
    15. 
  
  
  
  
  15.         }  
    16. 
  
  
  
  
  16.         catch(e){  
    17. 
  
  
  
  
  17.             // 在IE9及低版本瀏覽器，如果不容許ActiveX控件與頁(yè)面交互，點(diǎn)擊了否，就無(wú)法獲取size  
    18. 
  
  
  
  
  18.             console.log(e.message); // Automation 服務(wù)器不能創(chuàng)建對(duì)象  
    19. 
  
  
  
  
  19.             filesize = 'error'; // 無(wú)法獲取  
    20. 
  
  
  
  
  20.         }  
    21. 
  
  
  
  
  21.     }  
    22. 
  
  
  
  
  22.     return filesize;  
    23. 
  
  
  
  
  23. } 
    24.

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

1、高版本瀏覽器 

 
 
 
 
    
  
  
  
  
  1.  
    2.

2、限制圖片 

 
 
 
 
    
  
  
  
  
  1.  
    2.

3、低版本瀏覽器 

 
 
 
 
    
  
  
  
  
  1.    
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. /* 通過(guò)擴(kuò)展名，檢驗(yàn)文件格式。  
    4. 
  
  
  
  
  4. * @parma filePath{string} 文件路徑  
    5. 
  
  
  
  
  5. * @parma acceptFormat{Array} 允許的文件類型  
    6. 
  
  
  
  
  6. * @result 返回值{Boolen}：true or false  
    7. 
  
  
  
  
  7. */ 
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9. function checkFormat(filePath,acceptFormat){  
    10. 
  
  
  
  
  10.     var resultBool= false,  
    11. 
  
  
  
  
  11.         ex = filePath.substring(filePath.lastIndexOf('.') + 1);  
    12. 
  
  
  
  
  12.         ex = ex.toLowerCase();          
    13. 
  
  
  
  
  13.  
    14. 
  
  
  
  
  14.     for(var i = 0; i < acceptFormat.length; i++){  
    15. 
  
  
  
  
  15.     　　if(acceptFormat[i] == ex){  
    16. 
  
  
  
  
  16.             resultBool = true;  
    17. 
  
  
  
  
  17.             break;  
    18. 
  
  
  
  
  18.     　　} 
    19. 
  
  
  
  
  19.      }  
    20. 
  
  
  
  
  20.     return resultBool;  
    21. 
  
  
  
  
  21. };          
    22. 
  
  
  
  
  22.  
    23. 
  
  
  
  
  23. function limitTypes(){  
    24. 
  
  
  
  
  24.     var obj = document.getElementById('filePath');  
    25. 
  
  
  
  
  25.     var path = obj.value;  
    26. 
  
  
  
  
  26.     var result = checkFormat(path,['bmp','jpg','jpeg','png']);      
    27. 
  
  
  
  
  27.  
    28. 
  
  
  
  
  28.     if(!result){  
    29. 
  
  
  
  
  29.         alert('上傳類型錯(cuò)誤，請(qǐng)重新上傳');  
    30. 
  
  
  
  
  30.         obj.value = '';  
    31. 
  
  
  
  
  31.     }  
    32. 
  
  
  
  
  32. } 
    33.

二十二、正則表達(dá)式 

 
 
 
 
    
  
  
  
  
  1. //驗(yàn)證郵箱  
    2. 
  
  
  
  
  2. /^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/   
    3. 
  
  
  
  
  3. //驗(yàn)證手機(jī)號(hào)  
    4. 
  
  
  
  
  4. /^1[3|5|8|7]\d{9}$/  
    5. 
  
  
  
  
  5. //驗(yàn)證URL  
    6. 
  
  
  
  
  6. /^http:\/\/.+\./   
    7. 
  
  
  
  
  7.  
    8. 
  
  
  
  
  8. //驗(yàn)證身份證號(hào)碼  
    9. 
  
  
  
  
  9. /(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/  
    10. 
  
  
  
  
  10.   
    11. 
  
  
  
  
  11.  
    12. 
  
  
  
  
  12. //匹配字母、數(shù)字、中文字符  
    13. 
  
  
  
  
  13. /^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/  
    14. 
  
  
  
  
  14.   
    15. 
  
  
  
  
  15. //匹配中文字符  
    16. 
  
  
  
  
  16. /[\u4e00-\u9fa5]/ 
    17. 
  
  
  
  
  17.   
    18. 
  
  
  
  
  18.  
    19. 
  
  
  
  
  19. //匹配雙字節(jié)字符(包括漢字)  
    20. 
  
  
  
  
  20. /[^\x00-\xff]/ 
    21.

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

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

二十四、驗(yàn)證碼倒計(jì)時(shí) 

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. // JavaScript  
    4. 
  
  
  
  
  4. var times = 60, // 時(shí)間設(shè)置60秒  
    5. 
  
  
  
  
  5. timer = null;    
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7. document.getElementById('send').onclick = function () {  
    8. 
  
  
  
  
  8.  // 計(jì)時(shí)開始  
    9. 
  
  
  
  
  9.  timer = setInterval(function () {  
    10. 
  
  
  
  
  10.  times--;   
    11. 
  
  
  
  
  11.  
    12. 
  
  
  
  
  12.  if (times <= 0) {  
    13. 
  
  
  
  
  13.  send.value = '發(fā)送驗(yàn)證碼';  
    14. 
  
  
  
  
  14.  clearInterval(timer);  
    15. 
  
  
  
  
  15.  send.disabled = false;  
    16. 
  
  
  
  
  16.  times = 60;  
    17. 
  
  
  
  
  17.  } else {  
    18. 
  
  
  
  
  18.  send.value = times + '秒后重試';  
    19. 
  
  
  
  
  19.  send.disabled = true;  
    20. 
  
  
  
  
  20.  }  
    21. 
  
  
  
  
  21.  }, 1000);  
    22. 
  
  
  
  
  22. }  
    23. 
  
  
  
  
  23.  
    24. 
  
  
  
  
  24. var times = 60,  
    25. 
  
  
  
  
  25.     timer = null; 
    26. 
  
  
  
  
  26.  
    27. 
  
  
  
  
  27. $('#send').on('click', function () {  
    28. 
  
  
  
  
  28.     var $this = $(this);      
    29. 
  
  
  
  
  29.  
    30. 
  
  
  
  
  30.     // 計(jì)時(shí)開始  
    31. 
  
  
  
  
  31.     timer = setInterval(function () {  
    32. 
  
  
  
  
  32.         times--;  
    33. 
  
  
  
  
  33.         if (times <= 0) {  
    34. 
  
  
  
  
  34.             $this.val('發(fā)送驗(yàn)證碼');  
    35. 
  
  
  
  
  35.             clearInterval(timer);  
    36. 
  
  
  
  
  36.             $this.attr('disabled', false);  
    37. 
  
  
  
  
  37.             times = 60;  
    38. 
  
  
  
  
  38.         } else {  
    39. 
  
  
  
  
  39.             $this.val(times + '秒后重試');  
    40. 
  
  
  
  
  40.             $this.attr('disabled', true);  
    41. 
  
  
  
  
  41.         }  
    42. 
  
  
  
  
  42.     }, 1000);  
    43. 
  
  
  
  
  43. }); 
    44.

二十五、時(shí)間倒計(jì)時(shí) 

 
 
 
 
    
  
  
  
  
  1.   
    2. 
  
  
  
  
  2. var times = 60,  
    3. 
  
  
  
  
  3.     timer = null;   
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. $('#send').on('click', function () {  
    6. 
  
  
  
  
  6.     var $this = $(this);      
    7. 
  
  
  
  
  7.  
    8. 
  
  
  
  
  8.     // 計(jì)時(shí)開始  
    9. 
  
  
  
  
  9.     timer = setInterval(function () {  
    10. 
  
  
  
  
  10.         times--;          
    11. 
  
  
  
  
  11.  
    12. 
  
  
  
  
  12.         if (times <= 0) {  
    13. 
  
  
  
  
  13.             $this.val('發(fā)送驗(yàn)證碼');  
    14. 
  
  
  
  
  14.             clearInterval(timer);  
    15. 
  
  
  
  
  15.             $this.attr('disabled', false);  
    16. 
  
  
  
  
  16.             times = 60;  
    17. 
  
  
  
  
  17.         } else {  
    18. 
  
  
  
  
  18.             $this.val(times + '秒后重試');  
    19. 
  
  
  
  
  19.             $this.attr('disabled', true);  
    20. 
  
  
  
  
  20.         }  
    21. 
  
  
  
  
  21.     }, 1000);  
    22. 
  
  
  
  
  22. }); 
    23.

二十六、倒計(jì)時(shí)跳轉(zhuǎn) 
  
  •  
  • // 設(shè)置倒計(jì)時(shí)秒數(shù)    
  • var t = 10;     
  •  
  • // 顯示倒計(jì)時(shí)秒數(shù)    
  • function showTime(){  
  •  
  •     t -= 1;    
  •     document.getElementById('showtimes').innerHTML= t;     
  •  
  •     if(t==0){    
  •         location.href='error404.asp';    
  •     }     
  •  
  •     //每秒執(zhí)行一次 showTime()    
  •     setTimeout("showTime()",1000);    
  • }   
  •  
  • showTime(); 

    • 二十七、時(shí)間戳、毫秒格式化 

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

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

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

    二十九、判斷周六/周日 

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

    三十、AJAX調(diào)用錯(cuò)誤處理

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

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

    jQuery 允許“鏈?zhǔn)健辈寮姆椒ㄕ{(diào)用，以減輕反復(fù)查詢 DOM 并創(chuàng)建多個(gè) jQuery 對(duì)象的過(guò)程。

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

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

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


    當(dāng)前標(biāo)題：分享前端開發(fā)常用代碼片段
    路徑分享：http://www.dlmjj.cn/article/dpsshci.html