js实现图片验证码(完整编码)

HTML

<div class="form-group mg-t20">
                        <i class="icon-passagewaysum icon_font"></i>
                        <input type="text" class="login_input" id="yanzheng" name="yanzheng" placeholder="请输入验证码" lay-verify="required"  autocomplete="off" lay-reqtext="请输入验证码？" />
                    </div>
                  
                    <div id="verificationCode" class="verificationCode"  >
                        <canvas width="100px" height="100px" id="verifyCanvas"></canvas>
                        <img id="code_img">
                    </div>

CSS

 #grad {
        background: -webkit-linear-gradient(#4990c1, #52a3d2, #6186a3); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(#4990c1, #52a3d2, #6186a3); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(#4990c1, #52a3d2, #6186a3); /* Firefox 3.6 - 15 */
        background: linear-gradient(#4990c1, #52a3d2, #6186a3); /* 标准的语法 */
    }

    .verificationCode{
         width: 170px;
         height: 60px;
         position: absolute;
         /*right: 0;*/
     }
    canvas{
        width: 100%;
        height: 100%;
    }
    #code_img {
        width: 100%;
        height: 100%;
        cursor: pointer;
        vertical-align: top;
    }

用到的js包
jquery/jquery.js
jquery/jquery.min.js
verificationCode.js
在这里:点击下载