js验证码,保存html直接可以看效果吆-CSDN博客

本文链接：https://blog.csdn.net/lzh3521/article/details/84059348

<html xmlns="http://www.w3.org/1999/xhtml" >   
<head runat="server">   
<title>无标题页</title>   
</head>   
 <body>   
  <form id="form1" runat="server">   
 <div>   
   <div id="divCode" style="background-color:White; width:52px; height:16px; padding:5px; text-align:center; vertical-align:middle; letter-spacing:5px; border:solid 1px blue">
   <span></span><span ></span><span ></span><span ></span></div>   
   </div><input id="Button1" type="button" value="换一张" οnclick="JavaScript:validteCode()"/>   
     </form>   
 </body>   
 </html>   
 <script language="JavaScript" type="text/JavaScript">   
 function validteCode()   
 {   
     var codes = new Array(4);       //用于存储随机验证码   
     var colors = new Array("Red","Green","Gray","Blue","Maroon","Aqua","Fuchsia","Lime","Olive","Silver");   
     for(var i=0;i < codes.length;i++)   
    {//获取随机验证码   
        codes[i] = Math.floor(Math.random()*10);   
    }   
     var spans = document.getElementById("divCode").all;   
    for(var i=0;i<spans.length;i++)   
     {   
        spans[i].innerHTML=codes[i];   
        spans[i].style.color = colors[Math.floor(Math.random()*10)];    //随机设置验证码颜色              
     }   
 }   
 document.onload = validteCode();   
 </script>