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

lijiajun95

于 2017-01-23 17:13:04 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端开发文章标签： JS验证码 js web 前端

本文链接：https://blog.youkuaiyun.com/lijiajun95/article/details/54694758

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

37 篇文章

订阅专栏

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