案例分析

• 字符串

獲取地址欄中URL地址問號傳遞的參數(shù)值
https://www.baidu.com/s?wd=javascript&rsv_spt=1&issp=1

目標: 把問號傳遞的參數(shù)值分別的解析出來
obj={wd:'javascript',rsv_spt:1,issp:1}

var str = "https://www.baidu.com/s?wd=javascript&rsv_spt=1&issp=1";
// -> 目標: {wd:'javascript',rsv_spt:1,issp:1}

// -> 方案一: 
var questionIndex = str.indexOf('?');
str = str.substring(questionIndex + 1) // -> "wd=javascript&rsv_spt=1&issp=1"
var ary = str.split('&') // -> ["wd=javascript", "rsv_spt=1", "issp=1"]
var obj = {};
for(var i=0;i<ary.length;i++){
    var cur = ary[i],
    // console.log(cur)
        curAry = cur.split("="),
        key = curAry[0],
        value = curAry[1];
        obj[key] = value;
}
console.log(obj)  // -> {wd: "javascript", rsv_spt: "1", issp: "1"}

var str = "https://www.baidu.com/s?wd=javascript&rsv_spt=1&issp=1";
// -> 目標: {wd:'javascript',rsv_spt:1,issp:1}

// -> 方案二: 
function  queryURLParameter(url){
    // -> 傳遞的參數(shù)(我們當前要解析的url地址) 
    var questionIndex = url.indexOf('?'),
        obj = {};
    if(questionIndex === -1){
        // -> url中沒有問號傳參: 直接返回空對象
        return obj;
    }
    url = url.substring(questionIndex+1),
        ary = url.split("&");
    for(var i=0;i<ary.length;i++){
        var curAry = ary[i].split('=');
        obj[curAry[0]] = curAry[1];
    }
    return obj;
}
console.log(queryURLParameter("https://www.baidu.com/s?wd=javascript&rsv_spt=1&issp=1"))
// -> {wd: "javascript", rsv_spt: "1", issp: "1"}

console.log(queryURLParameter("https://www.baidu.com/s?wd=node&rsv_spt=1&issp=1"))
// -> {wd: "node", rsv_spt: "1", issp: "1"}

console.log(queryURLParameter("https://www.baidu.com/s?wd=前端"))
// -> {wd: "前端"}

var str = "https://www.baidu.com/s?wd=javascript&rsv_spt=1&issp=1";
// -> 目標: {wd:'javascript',rsv_spt:1,issp:1}

// -> 方案三: 
String.prototype.myQueryURLParameter = function myQueryURLParameter(){
    var obj = {},
        reg = /([^?&=]+)=([^?&=]+)/g;
    this.replace(reg,function(){
        var arg = arguments;
        obj[arg[1]] = arg[2];
    });
    return obj;
} 
console.log(str.myQueryURLParameter())

• Math及字符串

隨機驗證碼

真實項目中的驗證碼:

• 真實項目中驗證碼一般都是后臺處理的,后臺返回給客戶端展示的是一個圖片(圖片中包含了驗證碼)

驗證碼形式:

1. 數(shù)字字母
2. 問答
3. 圖片選擇
4. 文字順序
5. 拖拽

HTML/CSS

<style type="text/css">
    #codeBox{width: 300px;height: 50px;line-height: 50px;font-size: 28px;text-align: center;border: 2px solid #ddd;margin: 200px auto;user-select: none;}
</style>
<div id="codeBox">qwer</div>

JavaScript

// 簡單實現(xiàn)
var codeBox = document.getElementById("codeBox");
var areaStr = '0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM'
var result = "";
for(var i=0;i<4;i++){
    // 隨機獲取一個0-61之間的隨機整數(shù): 作為接下來獲取字符的索引
    var ran = Math.round(Math.random()*61);
    // -> 根據(jù)索引獲取一個隨機字符
    var str1 = areaStr.charAt(ran)
    // -> 把每一次循環(huán)獲取的字符存放在最后結(jié)果中
    result += str1
}
codeBox.innerHTML = result

// 點擊切換
var codeBox = document.getElementById('codeBox');
function getCode(){
    var result = '',
        areaStr = '0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM';
    for (var i = 0; i < 4; i++) {
        var ran = Math.round(Math.random()*61);
        result += areaStr.charAt(ran);
    }
    codeBox.innerHTML = result;
}

// -> 加載頁面是需要執(zhí)行一次這個方法: 生成四位驗證碼
getCode();
// -> 點擊盒子重新生成驗證碼(此處不加小括號,這塊只是再把函數(shù)綁定給點擊事件)
codeBox.onclick = getCode;

// 四位不重復(fù)的驗證碼
var codeBox = document.getElementById("codeBox");
function getCode(){
    var result = "",
        str = "1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";
    for (var i = 0; i < 4; i++) {
        var ran = Math.round(Math.random()*61),
            cur = str.charAt(ran);
            // -> 驗證一下新獲取的char字符是否已經(jīng)在 result 中存在了
            // -> 如果存在了我們不存儲,重新再獲取一遍,反之才累加到 result 中
            if (result.indexOf(cur)>-1) {
                i--;
                continue;
            }
        result += cur;
    }
    codeBox.innerHTML = result;
}
getCode()
codeBox.onclick = getCode;

// 四位大小寫不重復(fù)的驗證碼
var codeBox = document.getElementById("codeBox");
function getCode(){
    var result = "",
        str = "1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";
    for (var i = 0; i < 4; i++) {
        var ran = Math.round(Math.random()*61),
            cur = str.charAt(ran);
            // -> 驗證一下新獲取的char字符是否已經(jīng)在 result 中存在了
            // -> 如果存在了我們不存儲,重新再獲取一遍,反之才累加到 result 中
            if (result.toUpperCase().indexOf(cur.toUpperCase())>-1) {
                i--;
                continue;
            }
        result += cur;
    }
    codeBox.innerHTML = result;
}
getCode()
codeBox.onclick = getCode;