前端開發常用程式碼片段（下篇）

人生需笑對發表於2018-05-10
前端

二十二、正規表示式

//驗證郵箱

/^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)$)/


//匹配字母、數字、中文字元

/^([A-Za-z0-9]|[u4e00-u9fa5])*$/


//匹配中文字元

/[u4e00-u9fa5]/


//匹配雙位元組字元(包括漢字)

/[^x00-xff]/

二十三、限制字元數

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

    }

});

二十四、驗證碼倒數計時

<input id="send" type="button" value="傳送驗證碼">

1、JavaScript實現

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

}

2、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);

});

二十五、倒數計時跳轉

<div id="showtimes"></div>
// 設定倒數計時秒數  

var t = 10;  

// 顯示倒數計時秒數  

function showTime(){  

    t -= 1;  

    document.getElementById(`showtimes`).innerHTML= t;  

    if(t==0){  

        location.href=`error404.asp`;  

    }  

    //每秒執行一次 showTime()  

    setTimeout("showTime()",1000);  

}  

showTime();

二十六、時間戳、毫秒格式化

function formatDate(now) {

    var y = now.getFullYear();

    var m = now.getMonth() + 1; // 注意 JavaScript 月份+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(1442978789184);

alert(formatDate(nowDate));

二十七、當前日期

var calculateDate = function(){

    var date = new Date();

    var weeks = ["日","一","二","三","四","五","六"];

    return date.getFullYear()+"年"+(date.getMonth()+1)+"月"+

    date.getDate()+"日 星期"+weeks[date.getDay()];

}

$(function(){

    $("#dateSpan").html(calculateDate());

});

二十八、判斷週六/週日

<p id="text"></p>
function time(y,m){

    var tempTime = new Date(y,m,0);

    var time = new Date();

    var saturday = new Array();

    var sunday = new Array();

    for(var i=1;i<=tempTime.getDate();i++){

        time.setFullYear(y,m-1,i);

        var day = time.getDay();

        if(day == 6){

            saturday.push(i);

        }else if(day == 0){

            sunday.push(i);

        }

    }

    var text = y+"年"+m+"月份"+"<br />"

                +"週六："+saturday.toString()+"<br />"

                +"週日："+sunday.toString();

    document.getElementById("text").innerHTML = text;

}

time(2018,5);

二十九、AJAX呼叫錯誤處理

當 Ajax 呼叫返回 404 或 500 錯誤時，就執行錯誤處理程式。如果沒有定義處理程式，其他的 jQuery 程式碼或會就此罷工。定義一個全域性的 Ajax 錯誤處理程式

$(document).ajaxError(function (e,xhr,settings,error){
　　console.log(error);
})

三十、鏈式外掛呼叫

jQuery 允許“鏈式”外掛的方法呼叫，以減輕反覆查詢 DOM 並建立多個 jQuery 物件的過程。

$(`#elem`).show();
$(`#elem`).html(`bla`);
$(`#elem`).otherStuff();

通過使用鏈式，可以改善

$(`#elem`).show().html(`bla`).otherStuff();

還有一種方法是在（字首$）變數中快取記憶體元素

var $elem = $(`#elem`);
$elem.show();
$elem.html(`bla`);
$elem.otherStuff();

鏈式和快取記憶體的方法都是 jQuery 中可以讓程式碼變得更短和更快的最佳做法。

 

相關文章