验证码

金讯教育有一节课讲的是验证码;代码如下：

html:

                   <label>

                        <input type="text" />

                        <span id="yz" style=" background:url(1.png) -10px -15px;80px;font-style: italic; height: 20px;border: 1px solid black;display: inline-block;"></span>

                        <a href="javascript:;" id='btn'>看不清</a>

                    </label>

js:

         

    // 验证码 数字和字母组成6位 0-9 a-zA-Z

    /*

         "0" ------ 48 "9"------ 57 48-57

         "a"-------97 "z"------122 97-122

         "A"-------65 "Z"------90 65-90

            48-122

    */

    function yzm() {

        // 循环六次 每次产生一个随机的数字或字母

        var str = "";

        for (var i = 0; i < 6; i++) {

            var code = rand(48, 122); //这是封装好函数 function rand(min,max) {return Math.round(Math.random()*(max-min))+min;}取48~122随机数

            if (code >= 48 && code <= 57 || code >= 65 && code <= 90 || code >= 97 && code <= 122) {

                str += String.fromCharCode(code); // Unicode 编码转为一个字符:

                console.log(code)

            } else {

                i--;    // 如果条件不符例如弹出60就让 i--重新计算

            }

        }

        return str;

    }

    $("yz").innerHTML = yzm(); //也是封装好的函数获取id的DOM元素    function $(id) {return document.getElementById(id);}

    $("btn").onclick = function () {

        $("yz").innerHTML = yzm();

    }

代码效果如图： 这样就出现了验证码的效果