zoukankan      html  css  js  c++  java
  • js验证码实现

    <script language="javascript">
    var code; //在全局 定义验证码
    function createCode()
    { //创建验证码函数
     code = "";
     var codeLength =4;//验证码的长度
     var selectChar = 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 charIndex =Math.floor(Math.random()*36);
      code +=selectChar[charIndex];     
     }
    // 设置验证码的显示样式,并显示
     document.getElementById("discode").style.fontFamily="Fixedsys";  //设置字体
     document.getElementById("discode").style.letterSpacing="5px";  //字体间距
     document.getElementById("discode").style.color="#0ab000";   //字体颜色
     document.getElementById("discode").innerHTML=code;      // 显示
    }
    
    function but()
    {//验证验证码输入是否正确
         var val1=document.getElementById("t1").value;
         var val2=code;
         if(val1!=val2){
             alert("验证码错误!");
            document.getElementById('t1').value="";
             }
        }
    </script>

    验证码框

                    <div class="input">
                    <input id="t1"   type="text" name="u"   placeholder="验证码" onblur="but()" />
                    <span id="discode"></span>
                    <input type="button" value="换一换" class="c" style="height:20px;"onClick="createCode()">
                    </div>

    效果

  • 相关阅读:
    解决GIT可视化工具Sourcetree拉取失败问题
    记录常用Git命令
    vue开发移动端使用rem的适配方案
    使用HBuilderX实现打包vue项目成app
    使用vue+webpack从零搭建项目
    整理最近面试问道的问题
    模块化之seaJs学习和使用
    理解Object.defineProperty的作用
    vue生命周期
    使用gulp编译sass
  • 原文地址:https://www.cnblogs.com/tk55/p/7519134.html
Copyright © 2011-2022 走看看