前端开发验证码(字符串和Math综合应用)

web前端开发技术储久良答案
web前端技术开发
web前端开发技术的实践教学

代码片段 1

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <title>验证码</title>
        <style>
            html,
            body,
            div {
                margin: 0;
                padding: 0;
            }
            #validate {
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -50px;
                margin-top: -20px;
                width: 100px;
                height: 40px;
                background: #f0f000;
                font-size: 28px;
                line-height: 40px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id=”validate”></div>
        <script>
            //0-61个索引中随机生成四个索引数,通过charAt取到对应的字符
            var codeStr =
                ‘abcdefghijklmnopqrstuvwxzyABCDEFGHIJKLMNOPQRSTUVWXZY0123456789’
            var validate = document.getElementById(‘validate’)
            function getRandom(n, m) {
                n = Number(n)
                m = Number(m)
                if (isNaN(n) || isNaN(m)) {
                    return Math.random()
                }
                if (n > m) {
                    var temp = n
                    n = m
                    m = temp
                }
                return Math.round(Math.random() * (m – n) + n)
            }
            function getCode() {
                var str = ”
                for (var i = 0; i < 4; i++) {
                    var random = getRandom(0, 61)
                    str += codeStr.charAt(random)
                }
                validate.innerHTML = str
            }
            getCode()
            validate.onclick = function() {
                getCode()
            }
        </script>
    </body>
</html>
web前端开发技术现状
中高级前端开发技术
web前端开发技术汇总 【转】
» 本文来自:前端开发者 » 《前端开发验证码(字符串和Math综合应用)》
» 本文链接地址:https://www.rokub.com/7521.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!