HTML部分：


1

2

3

4

5

6

7




​​<​​​​body​​ ​​onload​​​​=​​​​'createCode()'​​​​> ​​

​​<​​​​div​​​​>验证码：  ​​

​​<​​​​input​​ ​​type​​ ​​= ​​​​"text"​​ ​​id​​ ​​= ​​​​"input"​​​​/>  ​​

​​<​​​​input​​ ​​type​​​​=​​​​"button"​​ ​​id​​​​=​​​​"code"​​ ​​onclick​​​​=​​​​"createCode()"​​ ​​style​​​​=​​​​"width:60px"​​ ​​title​​​​=​​​​'点击更换验证码'​​ ​​/></​​​​br​​​​>​​

​​<​​​​input​​ ​​type​​ ​​= ​​​​"button"​​ ​​value​​ ​​= ​​​​"验证"​​ ​​onclick​​ ​​= ​​​​"validate()"​​​​/>​​

​​</​​​​div​​​​>  ​​

​​</​​​​body​​​​>​​


CSS部分：


1

2

3

4

5

6

7

8

9




​​#​​​​code​​​​{​​

​​font-family​​​​:​​​​Arial​​​​,宋体;​​

​​font-style​​​​:​​​​italic​​​​;​​

​​color​​​​:​​​​green​​​​;​​

​​border​​​​:​​​​0​​​​;​​

​​padding​​​​:​​​​5px​​ ​​10px​​​​;​​

​​letter-spacing​​​​:​​​​3px​​​​;​​

​​font-weight​​​​:​​​​bolder​​​​;​​

​​}​​


JavaScript部分：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28




​​var​​ ​​code ; ​​​​//在全局定义验证码         ​​

​​function​​ ​​createCode(){​​

​​code = ​​​​""​​​​;   ​​

​​var​​ ​​codeLength = 4;​​​​//验证码的长度  ​​

​​var​​ ​​checkCode = document.getElementById(​​​​"code"​​​​);   ​​

​​var​​ ​​random = ​​​​new​​ ​​Array(0,1,2,3,4,5,6,7,8,9,​​​​'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'​​​​);​​​​//随机数  ​​

​​for​​​​(​​​​var​​ ​​i = 0; i < codeLength; i++) {​​​​//循环操作  ​​

​​var​​ ​​index = Math.floor(Math.random()*36);​​​​//取得随机数的索引（0~35）  ​​

​​code += random[index];​​​​//根据索引取得随机数加到code上  ​​

​​}  ​​

​​checkCode.value = code;​​​​//把code值赋给验证码  ​​

​​}​​

​​//校验验证码  ​​

​​function​​ ​​validate(){  ​​

​​var​​ ​​inputCode = document.getElementById(​​​​"input"​​​​).value.toUpperCase(); ​​

​​//取得输入的验证码并转化为大写        ​​

​​if​​​​(inputCode.length <= 0) { ​​​​//若输入的验证码长度为0  ​​

​​alert(​​​​"请输入验证码！"​​​​); ​​​​//则弹出请输入验证码  ​​

​​}​​​​else​​ ​​if​​​​(inputCode != code ) { ​​​​//若输入的验证码与产生的验证码不一致时  ​​

​​alert(​​​​"验证码输入错误!"​​​​); ​​​​//则弹出验证码输入错误  ​​

​​createCode();​​​​//刷新验证码  ​​

​​document.getElementById(​​​​"input"​​​​).value = ​​​​""​​​​;​​​​//清空文本框  ​​

​​}​​​​else​​ ​​{ ​​​​//输入正确时  ​​

​​alert(​​​​"验证通过"​​​​);​​

​​}​​

​​}​​