原生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>

 

转载于:https://www.cnblogs.com/lsqbk/p/10259026.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
牙科就诊管理系统利用当下成熟完善的SSM框架,使用跨平台的可开发大型商业网站的Java语言,以及最受欢迎的RDBMS应用软件之一的Mysql数据库进行程序开发。实现了用户在线查看数据。管理员管理病例管理、字典管理、公告管理、药单管理、药品管理、药品收藏管理、药品评价管理、药品订单管理、牙医管理、牙医收藏管理、牙医评价管理、牙医挂号管理、用户管理、管理员管理等功能。牙科就诊管理系统的开发根据操作人员需要设计的界面简洁美观,在功能模块布局上跟同类型网站保持一致,程序在实现基本要求功能时,也为数据信息面临的安全问题提供了一些实用的解决方案。可以说该程序在帮助管理者高效率地处理工作事务的同时,也实现了数据信息的整体化,规范化与自动化。 管理员在后台主要管理病例管理、字典管理、公告管理、药单管理、药品管理、药品收藏管理、药品评价管理、药品订单管理、牙医管理、牙医收藏管理、牙医评价管理、牙医挂号管理、用户管理、管理员管理等。 牙医列表页面,此页面提供给管理员的功能有:查看牙医、新增牙医、修改牙医、删除牙医等。公告信息管理页面提供的功能操作有:新增公告,修改公告,删除公告操作。公告类型管理页面显示所有公告类型,在此页面既可以让管理员添加新的公告信息类型,也能对已有的公告类型信息执行编辑更新,失效的公告类型信息也能让管理员快速删除。药品管理页面,此页面提供给管理员的功能有:新增药品,修改药品,删除药品。药品类型管理页面,此页面提供给管理员的功能有:新增药品类型,修改药品类型,删除药品类型。
可以使用原生 JavaScript 实现验证码。以下是一个简单的例子: HTML: ```html <label for="captcha">验证码:</label> <input type="text" id="captcha"> <canvas id="captchaCanvas"></canvas> <button id="refreshCaptcha">刷新验证码</button> ``` JavaScript: ```javascript var canvas = document.getElementById("captchaCanvas"); var ctx = canvas.getContext("2d"); // 生成随机验证码 function generateCaptcha() { var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"; var captchaLength = 6; var captcha = ""; for (var i = 0; i < captchaLength; i++) { captcha += chars.charAt(Math.floor(Math.random() * chars.length)); } return captcha; } // 绘制验证码 function drawCaptcha() { var captcha = generateCaptcha(); canvas.width = 100; canvas.height = 40; ctx.font = "bold 20px sans-serif"; ctx.fillStyle = "#000"; ctx.fillText(captcha, 25, 25); // 添加干扰线 for (var i = 0; i < 5; i++) { ctx.beginPath(); ctx.moveTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height)); ctx.lineTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height)); ctx.strokeStyle = "#000"; ctx.stroke(); } return captcha; } // 刷新验证码 document.getElementById("refreshCaptcha").addEventListener("click", function() { var captchaInput = document.getElementById("captcha"); captchaInput.value = ""; var captcha = drawCaptcha(); }); // 验证输入的验证码是否正确 document.getElementById("captcha").addEventListener("input", function() { var captchaInput = document.getElementById("captcha"); if (captchaInput.value.length == 6 && captchaInput.value.toUpperCase() == captcha) { alert("验证码正确!"); } }); ``` 这个例子首先定义了一个 `generateCaptcha` 函数来生成随机的验证码,然后定义了一个 `drawCaptcha` 函数来绘制验证码,并在验证码中添加了一些干扰线以增加难度。最后使用 `addEventListener` 为刷新按钮验证码输入框添加事件监听器。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值