【原】jQuery与CSS自动生成验证码

原文链接： https://www.mk2048.com/blog/blog.php?id=h0ca00a1b2cb&title=%E3%80%90%E5%8E%9F%E3%80%91jQuery%E4%B8%8ECSS%E8%87%AA%E5%8A%A8%E7%94%9F%E6%88%90%E9%AA%8C%E8%AF%81%E7%A0%81

模板：

<button class="r receive_code">获取验证码</button>
<span class="r code"></span>

脚本：

// 生成六位数字验证码
    $(".code").html(null);
    function createCode() {
        var code = "";
        var length = 6;
        var i;
        var str = "";
        var content;
        var codeSpan = $(".code");
        var arrColor = ["blue", "red", "green", "brown", "gray", "pink", "red", "green", "brown", "blue"];
        codeSpan.html(null);
        for (i = 0; i < length; i  ) {
            index = Math.floor(Math.random() * 6);
            code = Math.floor(Math.random() * 10);
            str  = code;
            color = arrColor[index];
            content = $("<i></i>").html(code);
            content.appendTo(codeSpan);
            $(".code i").eq(index).css({"color": color});
        }
        codeSpan.attr("data-val", str);
    }

    $(".receive_code").click(createCode);

更多专业前端知识，请上 【猿2048】www.mk2048.com