js生成验证码

最新推荐文章于 2025-11-26 17:11:00 发布

原创最新推荐文章于 2025-11-26 17:11:00 发布 · 65 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

本文介绍了一种使用HTML和JavaScript生成动态背景颜色验证码的方法。通过随机数生成四位数字验证码，并设置六位随机数作为背景颜色，实现了点击刷新验证码的功能。此外，还提供了输入框用于用户输入验证码并进行验证正确性的功能。

<style type="text/css">
	.code{
	font-family:Arial;
	font-style:italic;
	color:white;
	border:0;
	padding:2px 3px;
	letter-spacing:3px;
	font-weight:bolder;
	width:40px;height: 20px;color:#FFFFFF;text-align: center;
	
	}
	</style>

<body oncontextmenu="self.event.returnValue=false">
     
   <input id="codein" type="text" onblur="checkcode()"/>
   <label id="code" class="code" onselectstart="return false" onclick="divclick()" ></label>
  </body>
  <script type="text/javascript">
  		var number1='';
	  	var color='#';
	  	for(var i=0;i<4;i++){number1+=parseInt(Math.random()*10);}
	  	for(var i=0;i<6;i++){color+=parseInt(Math.random()*9);}
	  	document.getElementById("code").style.backgroundColor=color;
	  	document.getElementById("code").innerHTML=number1;
  	function divclick(){
	  	var number1='';
	  	var color='#';
	  	for(var i=0;i<4;i++){number1+=parseInt(Math.random()*10);}
	  	for(var i=0;i<6;i++){color+=parseInt(Math.random()*9);}
	  	document.getElementById("code").style.backgroundColor=color;
	  	document.getElementById("code").innerHTML=number1;
	  	return number1;
  	}
  	function checkcode(){
  		var code=document.getElementById("code").innerHTML;
  		var codein=document.getElementById("codein").value;
  		if(code==codein){
  			alert("验证码正确");
  		}else{
  			alert("验证码错误");
  		}
  	}
  	
  </script>