一个登录框+验证码（纯JS实现）

练手，做了一个登录框。用JS实现了验证码、以及检测验证码是否正确。
欢迎大家批评指正。最终结果如图所示:

深度截图20170705162952.png

HTML---：

    
    
    
    


    

        

            
系统登录
            

                

                    

                    
                    

                    
                    

                    
                    
                    

                        忘记密码？
                    
                    
                    

                        

                        版权所有-©CopyRight 2017
                        
                
            

        
    

CSS---：

.main_bar{
    width: 100%;
    height: 100%;
    background-color: #6495ED;
    margin-top: 10%;
}
#login_form{
    width: 40%;
    height: 100%;
    background-color: #112435;
    margin: 0 auto;
}
.title{
    width: 100%;
    height: 55px;
    color: #ffffff;
    border-bottom: 1px solid #ffffff;
}
#form_widget{
    width:100%;
    height: 300px;
    background-color: #808080;
}
.txt{
    display: block;
    width: 70%;
    height: 35px;
    margin: 0 auto;
    font-size: 16px;
    border-radius: 5px;
    border: 0;
    padding-left: 10px;
}
#vcode{
    width: 40%;
    height: 35px;
    margin-left: 15%;
    font-size: 16px;
    border-radius: 5px;
    border: 0;
    padding-left: 10px;
}
#code{
    color: #ffffff;
    background-color: #000000;
    font-size: 20px;
    padding: 5px 35px 10px 35px;
    margin-left: 5%;
    cursor: pointer;
}
#forget_pass{
    width:70%;
    text-align: right;
    margin: 0 auto;
    padding: 5px;
}
#forget_pass a{
    color: #000000;
    text-decoration: none;
}
#forget_pass a:hover{
    color: #ff0000;
    text-decoration: underline;
}
.btn{
    width:70%;
    margin-left: 15%;
    height: 40px;
    border: 0;
    font-size: 14px;
    background-color: #fc5628;
    color: #ffffff;
    cursor: pointer;
    border-radius: 20px;
}
#copyright{
    width:100%;
    text-align: center;
    padding-top: 20px;
    color: #e0e0e0;
}

JS---：

/**
 * Created by young on 17-7-5.
 */
function changeImg() {
    var arrays =['1','2','3','4','5','6','7','8','9','0',
        'a','b','c','d','e','f','g','h','i','j',
        'k','l','m','n','o','p','q','r','s','t',
        'u','v','w','x','y','z',
        'A','B','C','D','E','F','G','H','I','J',
        'K','L','M','N','O','P','Q','R','S','T',
        'U','V','W','X','Y','Z'];
    code='';
    for(var i=0;i<4;i++){
        var r=parseInt(Math.random()*arrays.length);
        code+=arrays[r];
    }
    document.getElementById('code').innerHTML=code;
}
function check() {
    var input_code=document.getElementById("vcode").value;
    if(input_code.toLowerCase()===code.toLowerCase()){
        return true;
    }else {
        alert("验证码不正确！");
        changeImg();
        return false;
    }
}

如果您有更好的想法，欢迎交流……一只正在飞起的前段小菜鸟～～