实例: 利用html表单和js的数学对象及函数做一个有验证码的简单登录表单

**
刚刚不是学了js中的数学对象,也学会了random产生随机数,那么下面就利用刚刚学的知识做一个简单的登录额,登录的表单吧,嗯账号为1234,密码为1234,只有输入正确的账号和密码以及正确的验证码才会登陆成功
**

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	 //第一步这里是htmlform标签做的一个表单
		<form action="">
		用户名:<input type="text" id="un" />
		<br />
		密码:<input type="password" id="up" />
		<br />
		验证码:<input type="text" id="yzm" /> <span id="spans"></span>
		<br />
		<input type="button" value="登录" id="btn">
		</form>
		
	<script>
	//用document.getEIementById来获取这个控件对象
		var spans=document.getElementById("spans");
		var username=document.getElementById("un");
		var password=document.getElementById("up");
		var yzm=document.getElementById("yzm");
		var btn=document.getElementById("btn");
		
		//用的数组然后随机截取拼接成四个随机数字
		var a="0123456789"
		var b=""
		for(var i=0;i<4;i++){
			b+=a[Math.floor(Math.random()*10)]
		}
		spans.innerHTML= b;
	
	//这里是一个点击事件,然后执行一个函数,利用if来执行筛选条件	
		btn.onclick = function(){
			if(username.value=="1234"){
				if(password.value=="1234"){
					if(yzm.value==spans.innerHTML){
						document.write("登陆成功");
					}else{
						document.write("验证码错误")
					}
				}else{
					document.write("密码错误");
				}
			}else{
				document.write("账号错误");
			}
			
			
		}
		
		
	</script>
	</body>
</html>

在这里插入图片描述
这是执行结果,然后只有当你输入正确的账号密码以及验证码之后才会出现登陆成功
在这里插入图片描述
**

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章