js获取随机验证码，自定义时间更新验证码

最新推荐文章于 2023-11-03 11:05:37 发布

屈小康

最新推荐文章于 2023-11-03 11:05:37 发布

阅读量280

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： js

本文链接：https://blog.youkuaiyun.com/qq_45557681/article/details/115429516

js 专栏收录该内容

42 篇文章

订阅专栏

不多解释代码如下（1.0版本），我设置的时间比较短为了测试使用，建议大家设置时间为 3 - 5 分钟

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<div onclick="Updata()" style="height: 100px;width: 100px;background-color: blanchedalmond;text-align: center;line-height: 100px;">

	</div>
	<button onclick="submits()">提交</button>
</body>

</html>
<script>
	var str = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
	var timer = null
	var count = []
	var div = document.querySelector('div')
	function getMath() {
		for (let i = 0; i <= 3; i++) {
			var index = Math.floor(Math.random() * 10)
			count.push(str[index])
		}
		div.innerHTML = String(count[0]) + String(count[1]) + String(count[2]) + String(count[3])
		count = []
		SetTime()

	}
	getMath()

	function SetTime() {
		timer = setInterval(() => {
			clearInterval(timer)
			getMath()
		}, 2000)
		// 3  分钟 :   1000 *  60 * 3
		// 5 分钟  ： 1000 * 60 * 5
	}

	function Updata() {
		clearInterval(timer)
		getMath()	
	}
	function submits(){
		clearInterval(timer)
		console.log(div.innerHTML);
	}

</script>

2.0版本进行封装抽离优化代码

//html
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<div 
		style="height: 100px;width: 100px;background-color: blanchedalmond;text-align: center;line-height: 100px;">

	</div>
	
</body>

</html>
<script src="./Cody.js"></script>
<script>

	var div = document.querySelector('div')

	init( div , 2000 , 4) 
	// div : 对应的元素 必填 
	// 时间 必填
	// 3  分钟 :  1000 *  60 * 3
	// 5  分钟 :  1000 * 60 * 5
	// 需要多少个 验证码 ， 选填 ， 不填就是 4 个
    
	
</script>


 // 封装js
function init(obj, time, index, callback) {
	var area = '0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM'
	let codeText = ''

	if(index === '' || index === undefined) {
		index = 4
	
	}
	clearInterval(obj.timer)

	function getCdey() {

		var count = index

		while (count !== 0) {
			let ran = Math.round(Math.random() * (60 - 0) + 0)
			let char = area.charAt(ran)
			if (!codeText.toUpperCase().includes(char.toUpperCase())) { //判断所有的都不一样  包括大小写
				codeText += char
				count--
			}
			// if (!codeText.includes(char)) { //不做判断大小写英文字符
			// 	codeText += char
			// 	index--
			// }

		}
		obj.innerHTML = codeText
		console.log(codeText);
		codeText = ''
		setTime()


	}

	getCdey()

	function setTime() {
		obj.timer = setInterval(() => {
			clearInterval(obj.timer)
			getCdey()

			if (callback) {
				callback()
			}

		}, time)
	}

	obj.onclick = function () {
	
		clearInterval(obj.timer)
		getCdey()
	}


}