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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了编写js实现随机验证码的生成（初始生成随机验证码，点击刷新按钮重新刷新随机验证码），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1403字，纯文字阅读大概需要3分钟。

内容图文

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

<!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>

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

内容总结

以上是互联网集市为您收集整理的编写js实现随机验证码的生成（初始生成随机验证码，点击刷新按钮重新刷新随机验证码）全部内容，希望文章能够帮你解决编写js实现随机验证码的生成（初始生成随机验证码，点击刷新按钮重新刷新随机验证码）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1014929.html

来源：【匿名】