原生JS制作验证码(优化)
2024-10-07 22:32:46
<!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>
最新文章
- volatile修饰符
- gg
- //给定N个整数序列{A1,A2,A3...An},求函数f(i,j)=(k=i~j)Ak的求和
- Android TextView里显示两种颜色
- fiddler抓取手机数据包
- C#爬页面总结
- [图论]Dijkstra 算法小结
- mslookup
- Spring MVC基础
- CentOS LNMP环境搭建 各版本
- linux awk用法
- get windows auth code
- CSS3选择器之属性选择器
- poj2393 Yogurt factory(贪心,思考)
- tensorflow冻结变量方法(tensorflow freeze variable)
- Python 解决: from pip import main ImportError: cannot import name &#39;main&#39;
- Linux内存管理5---物理内存管理
- React项目中使用Mobx状态管理(一)
- MySQL学习(五)
- 持续集成--Jenkins--1
热门文章
- django中写form表单时csrf_token的作用
- 理解云计算三种服务模式——IaaS、PaaS和SaaS
- AutowireCapableBeanFactory 根据名称:自动装配的BeanFactory,其实也是对BeanFactory的增强
- k8s-prometheus监控
- java-day05
- Python3 多线程编程 - 学习笔记
- POJ 3449 /// 判断线段相交
- 用 Docker 搭建Sha--dow--sock--s 笔记
- leetcode-77-组合-字典序
- 使用应用程序(Java/Python)访问MaxCompute Lightning进行数据开发