编写js实现随机验证码的生成（初始生成随机验证码，点击刷新按钮重新刷新随机验证码）

2021-04-10 09:58:23 阅读：137 来源： 互联网

标签：box 48 验证码 122 num 随机 unicode 刷新 var

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    #box{
        width: 180px;
        height: 90px;      
        margin:100px auto;
        border: 1px solid black;    
        position: relative;    
    }
    #box #box_random{
        width: 80px;
        height: 50px;
        font-size: 16px;
        text-align: center;
        line-height: 50px;
        color: blue;
        border: 1px solid red;
        cursor: pointer;
        margin: auto;
    }
    #box input{
        position: absolute;
        left: 10px;
        top: 14px;
    }

</style>

</head>
<body>

    <div id="box">
    <input type="button" value="刷新" onclick="ran_creat()">
    <div id="box_random"></div>
    </div>
    
</body>


    <script>
        //0-9  A-Z   a-z对应的unicode是 48-57  65-90  97-122

	function ranNum(min,max){
		return function(){
			// 利用闭包，等我们需要产生随机数在调用
			return parseInt(Math.random()*(max-min+1)+min)
		}
	}
    
    function ran_creat(){
    // 即将产生在48-122区间的随机的一个unicode编码，未调用
	var myUni = ranNum(48,122)
	// 用来装四个符合[0-9    a-z    A-Z]的unicode编码
    var str = "";
    var n = 0;
	// 产生四个unicode放入arr数组中
	while(true){
		// 产生一个随机码
		var num = myUni()
		// 符合需求在48-57,65-90,97-122的随机数放入arr数组中，知道arr装满四个
        if (num >= 48 && num <= 57 || num >= 65 && num <= 90 || num >= 97 && num <= 122){
            var s = String.fromCharCode(num)
            str += s ;
            n++;
        }
        if(n==4)
            break;
	}

	document.getElementById('box_random').innerHTML = str ;
    }

    ran_creat();//先调用一次，否则初始没有验证码

    </script>


</html>

在这里插入图片描述

标签：box,48,验证码,122,num,随机,unicode,刷新,var
来源： https://blog.csdn.net/qq_45696288/article/details/111460558

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

编写js实现随机验证码的生成（初始生成随机验证码，点击刷新按钮重新刷新随机验证码）