案例分析
- 字符串
獲取地址欄中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及字符串
隨機驗證碼
真實項目中的驗證碼:
- 真實項目中驗證碼一般都是后臺處理的,后臺返回給客戶端展示的是一個圖片(圖片中包含了驗證碼)
驗證碼形式:
- 數(shù)字字母
- 問答
- 圖片選擇
- 文字順序
- 拖拽
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;
// 四位不重復的驗證碼
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;
// 四位大小寫不重復的驗證碼
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;
