<!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>原生JS制作验证码（优化）
原文地址：https://www.cnblogs.com/lsqbk/p/10259026.html