本文实例为大家分享了js实现验证码功能的具体代码，供大家参考，具体内容如下

#前面是拆解着讲的，不想看可以直接跳过，带注释的完整版代码和效果在后面

首先在页面中准备一个输入框，一个显示验证码的盒子和一个提交按钮

提交

然后加一些样式

input {

width: 150px;

height: 30px;

outline: none;

font-size: 24px;

vertical-align: middle;

}

button {

outline: none;

vertical-align: middle;

cursor: pointer;

}

div {

display: inline-block;

width: 90px;

height: 40px;

line-height: 40px;

text-align: center;

vertical-align: middle;

background-color: #ddd;

cursor: pointer;

}

然后大概长这样(有点丑，不过无所谓，主要内容是js)

好，那么开始写js

首先获取这些元素

var input = document.querySelector('input');

var btn = document.querySelector('button');

var div = document.querySelector('div');

然后搞一个字符库和一个保存验证码的字符串

var characters = "QWETYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm1234567890";