javascript实现彩色验证码

效果图：

代码实现：

	<form action="login.php" method="post">
                    <div class="panel loginbox">
                        <div class="text-center margin-big padding-big-top">
                            <h1>后台管理中心</h1>
                        </div>
                        <div class="panel-body" style="padding:30px; padding-bottom:10px; padding-top:10px;">
                            <div class="form-group">
                                <div class="field field-icon-right">
                                    <input type="text" class="input input-big" name="name" placeholder="登录账号"
                                        data-validate="required:请填写账号" />
                                    <span class="icon icon-user margin-small"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="field field-icon-right">
                                    <input type="password" class="input input-big" name="password" placeholder="登录密码"
                                        data-validate="required:请填写密码" />
                                    <span class="icon icon-key margin-small"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="field">
                                    <input type="text" id="code_input" class="input input-big" name="code" placeholder="填写右侧的验证码"
                                        data-validate="required:请填写右侧的验证码" />
                                    <!-- <img src="images/passcode.jpg" alt="" width="100" height="32" class="passcode" style="height:43px;cursor:pointer;" onclick="this.src=this.src+'?'">   -->
                                    <div class="passcode" onclick="create_code(4)" id="code"
                                        style="width: 102px;font-size: 23px;"></div>
                                </div>
                            </div>
                        </div>
                        <div style="padding:30px;"><input type="submit"
                                class="button button-block bg-main text-big input-big" id="login" value="登录"></div>
                    </div>
                </form>
    <script>
        // 验证码
        window.onload = function () {
           var real_code = create_code(4);

            // 登录验证
            var loginbtn = document.getElementById('login');
            loginbtn.addEventListener('click',function(){
                // 获取验证码表单框里的值
                var code_input = document.getElementById('code_input').value;
                console.log(real_code)
                if(!real_code.toLocaleLowerCase() == code_input.toLocaleLowerCase()){
                   alert('验证嘛不正确')
                   real_code = create_code(4);
                   console.log(real_code)
                }
            })
        }

        function create_code(num) {
            var code_arr = 'ZXCVBNMLKJHGFDSAQWERTYUIOPzxcvbnmlkjhgfdsaqwertyuiop123465798';
            var code_box = document.getElementById('code');
            var code = '';
            var color = '#';
            var color_arr = '0123456789abcdef';
            var real_code = '';

            for (var i = 0; i < num; i++) {
                // 生成颜色
                for (var k = 0; k < 6; k++) {
                    var color_index = Math.floor(Math.random() * color_arr.length);
                    color += color_arr[color_index];
                    // console.log(color)
                }
                var index = Math.floor(Math.random() * code_arr.length);
                code += "<span style='color:" + color + "'>" + code_arr[index] + "</span>";
                color = '#';
                real_code += code_arr[index];
            }

            
            code_box.innerHTML = code;
            return real_code;
        }
    </script>