javascript随机验证码

随机验证码

  #box {
            width: 100px;
            height: 40px;
            background: #b0b0b0;
            text-align: center;
            line-height: 40px;
            font-size: 30px;
            margin: 50px auto;

        }

<div id="box">RG8g</div>

  var box = document.getElementById('box');
        var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'A', 'B', 'C', 'D', 'E', 'F', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; //0-21
        var strr = "qwertyuiopasdfghjklzcvnmQWERTYUIOPASDFGHKLZXCVBNM1234567890";

        // 这是一个命名函数：封装一段代码，创建的时候不会运行
        function change() {
            var str = '';
            for (var i = 0; i < 4; i++) {
                var index = Math.round(Math.random() * (strr.length - 1));
                var fs = Math.round(Math.random() * (30 - 12) + 12);
                var r = Math.round(Math.random() * 255);
                var g = Math.round(Math.random() * 255);
                var b = Math.round(Math.random() * 255);
                str = str + "<span style='font-size:" + fs + "px;color:rgb(" + r + "," + g + "," + b + ");'>" + strr[index] + "</span>";
                //'<span style="color:rgb('+ +','+ +','+ +');font-size:'+ +'px;">'+  strr[index] +'</span>'
            }
            box.innerHTML = str;
        }
        //运行函数
        change();

        box.onclick = function () {
            change();
        }

效果图