Web全栈笔记之生成随机验证码

最新推荐文章于 2025-04-09 13:15:33 发布

原创最新推荐文章于 2025-04-09 13:15:33 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JS验证码 #js #web #前端

Web前端开发专栏收录该内容

37 篇文章

订阅专栏

本文介绍了一个简单的JavaScript验证码生成示例。通过使用HTML和JavaScript，该示例实现了点击刷新验证码的功能。每次点击登录框，都会生成一个新的四位字符验证码。

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>js验证码</title>
<style type="text/css">
 #login{
    width:50px;
    height:30px;
    line-height:30px;
    margin:0 auto;
    background-color:#eee;
    text-align:center;
    color:red;
 }
 p{
    width:75px;
    height:30px;

    margin:0 auto;
 }

</style>
</head>
<body>
<p>验证码：</p>
<div id="login" onclick="show()"><a href="#"></a></div>
<script type="text/javascript">
    function codes(n){
            var a="azxcvbnmsdfghjklqwertyuiopZXCVBNMASDFGHJKLQWERTYUIOP0123456789";
            var b="";
        for (var i = 0;i<n;i++){
            var index=Math.floor(Math.random()*62);
             b+=a.charAt(index);

        }
        return b;
        };
        function show(){
            document.getElementById("login").innerHTML=codes(4);

   }
   window.onload=show;
</script>
</body>
</html>