zoukankan      html  css  js  c++  java
  • 原生JS制作验证码(优化)

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    </head>
    
    <body>
    请输入验证码:<input type="text" id="yzm">
                   <span id="yzm1" style="background: #ccc"></span><br>
                   <button id="btn">验证</button>
    <!--               <textarea name="" id="" cols="30" rows="10"></textarea>-->
    </body>
    </html>
        <script>
            var yzm=document.getElementById("yzm"); //获取用户输入的验证码对象
            var yzm1=document.getElementById("yzm1");//获取随机生成的验证码对象
            var btn=document.getElementById("btn"); //获取提交按钮对象
            yzm1.onclick=getyzm; //给span添加点击事件并赋值
            getyzm(); //调用函数
        
            
            function getyzm(){
                var str="123456789qwertyuiopasdfghjklzxcvbnm"; //先定义一个字符串,用来随机从里面取值
                str=str.split(""); //把这个字符串的元素分割成字符串数组
    //            console.log(str);
                var zhi="";   //定义一个空的字符串变量用来取值
                for(var i=0;i<4;i++){ //循环四次也就是取四个值
                    zhi+=str[parseInt(Math.random()*str.length)];  //取随机数作为下标,+=字符串拼接到值里面去
                }
                yzm1.innerHTML=zhi; //页面中赋值
            }
                btn.onclick=function(){  //通过按钮点击判断
                var zhi1=yzm.value;
                var zhi2=yzm1.innerHTML;
                if(zhi1==zhi2){
                    alert("对了");
                }else{
                    alert("不对");
                }
            }
        </script>
  • 相关阅读:
    struts2的核心和工作原理
    JAVA NIO学习笔记1
    [深入JUnit] 测试运行的入口
    阿里巴巴最新开源项目
    数据库进阶之路(五)
    flutter 常用plugins
    小程序 自定义组件 并实现组件间通讯
    小程序 背景叠阴影
    小程序 navigateTo传对象参数
    小程序 解决同行cell中 多点击事件冲突
  • 原文地址:https://www.cnblogs.com/lsqbk/p/10259026.html
Copyright © 2011-2022 走看看