實例: 利用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>

在這裏插入圖片描述
這是執行結果,然後只有當你輸入正確的賬號密碼以及驗證碼之後纔會出現登陸成功
在這裏插入圖片描述
**

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