发表于： 2019-12-21 22:19:13
1 1306
一些常用的需求
时间字符串的处理
let time = '2019-7-24 12:6:23';
//=> 变为自己需要呈现的格式，例如：
// "2019年07月24日 12时06分23秒"
// "2019年07月24日"
// "07/24 12:06"
// ...
//不足十位补零的方法
let addZero = val => val.length < 2 ? '0' + val : val;
//处理方式
let ary = time.split(/(?: |-|:)/g);
//=>["2019", "7", "24", "12", "6", "23"]
time = ary[0] + '年' + addZero(ary[1]) + '月' + addZero(ary[2]) + '日';
实现一个方法 queryURLParameter 获取一个URL地址问号后面传递的参数信息
/*
* queryURLParams：获取URL地址中问号传参的信息和哈希值
* @params
* url [string] 要解析的URL字符串
* @return
* [object] 包含参数和哈希值信息的对象
* by zhouxiaotian on 2019/07/24 16:29:00
*/
function queryURLParams(url) {
//1.获取?和#后面的信息
let askIn = url.indexOf('?'),
wellIn = url.indexOf('#'),
askText = '',
wellText = '';
// #不存在
wellIn === -1 ? wellIn = url.length : null;
// ?存在
askIn >= 0 ? askText = url.substring(askIn + 1, wellIn) : null;
wellText = url.substring(wellIn + 1);
//2.获取每一部分信息
let result = {};
wellText !== '' ? result['HASH'] = wellText : null;
if (askText !== '') {
let ary = askText.split('&');
ary.forEach(item => {
let itemAry = item.split('=');
result[itemAry[0]] = itemAry[1];
});
}
return result;
}
/*
//基于正则封装的才是最完美的
function queryURLParams(url) {
let result = {},
reg1 = /([^?=&#]+)=([^?=&#]+)/g,
reg2 = /#([^?=&#]+)/g;
url.replace(reg1, (n, x, y) => result[x] = y);
url.replace(reg2, (n, x) => result['HASH'] = x);
return result;
}
*/
let aa = 'http://www.zhufengpeixun.cn/index.html?lx=1&name=zhufeng&teacher=aaa#box';
let paramsObj = queryURLParams(aa);
console.log(paramsObj);
实现一个最LOW的验证码：数字+字母共四位
验证码目的：防止外挂程序恶意批量注入的
<body>
<input type="text" id="codeInp">
<br>
<span id="codeBox">AAAA</span>
<button id="changeCode">看不清换一张</button>
<!-- IMPORT JS -->
<script>
let codeInp = document.getElementById('codeInp'),
codeBox = document.getElementById('codeBox'),
changeCode = document.getElementById('changeCode');
/*
* queryCode：获取到四位随机验证码，然后放到指定的盒子中
* @params
* @return
* by Team on 2019/07/24
*/
function queryCode() {
// 准备获取范围的字符串 0~61
let area = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
let result = "";
for (let i = 0; i < 4; i++) {
// 每一次循环都获取一个随机的数字索引
let ran = Math.round(Math.random() * 61);
// 再根据获取的索引从范围字符串中找到对应的字符，把找到的字符拼接到最后的结果中
result += area.charAt(ran);
}
// 放到盒子里面
codeBox.innerHTML = result;
}
// 第一次加载页面需要执行方法，让其显示在页面中
queryCode();
// 点击看不清按钮，需要重新执行方法生成新的验证码
changeCode.onclick = queryCode;
// 文本框失去焦点的时候：验证用户输入的内容和验证码是否相同，给予相关的提示，如果不一样需要重新生成验证码
// onblur：文本框失去焦点事件
codeInp.onblur = function () {
// 获取用户和验证码内容（表单元素.value / 非标单元素.innerHTML 获取内容）
let val = codeInp.value,
code = codeBox.innerHTML;
// 不区分大小写的验证（都转成小写）
if (val.toLowerCase() === code.toLowerCase()) {
alert('温馨提示：验证码输入成功！');
} else {
alert('温馨提示：验证码输入有误，请重试！');
codeInp.value = '';
// 重新生成验证码
queryCode();
}
}
</script>
</body>
返回列表
评论