js练习1_seriesdata.foreach-CSDN博客

本文链接：https://blog.csdn.net/weixin_43775723/article/details/126068031

登陆校验

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#myimg{
				vertical-align: middle;
				display: none;
			}
			#myimg2{
				vertical-align: middle;
				display: none;
			}
		</style>
		<script type="text/javascript">
			let reg = /^1(3|4|5|7|9)\d{9}$/;
			let flag = false;
			let flag2 = false;
			function check(){
				if(reg.test(document.getElementById("username").value)){
					document.getElementById("myimg").src = "img/ok.png";
					flag = true;
				}else{
					document.getElementById("myimg").src = "img/wrong.png";
					flag = false;
				}
				document.getElementById("myimg").style.display = "inline-block";
				return flag;
			}
			function check2(){
				if(reg.test(document.getElementById("pass").value)){
					document.getElementById("myimg2").src = "img/ok.png";
					flag2 = true;
				}else{
					document.getElementById("myimg2").src = "img/wrong.png";
					flag2 = false;
				}
				document.getElementById("myimg2").style.display = "inline-block";
				return flag2;
			}
			function juage(){
				return check()&&check2();
			}
		</script>
	</head>
	<body>
		<form action="/server" method="get" onsubmit="return juage()">
			用户名：<input type="text" id="username" onkeyup="check()"/>
			<img id="myimg" src="img/wrong.png" ><br/>
			密&emsp;码：<input type="password" id="pass" onkeyup="check2()"/>
			<img id = "myimg2" src="img/wrong.png" ><br/>
			<input type="submit" name="" id="" value="提交" />
		</form>
	</body>
</html>

省市县级联 js实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/myData.js" type="text/javascript"></script>
	</head>
	<body>
		<select id="one" onchange="pro()"><option disabled selected>-----请选择-------</option></select>省
		<select id="two" onchange="ci()"><option disabled selected>-----请选择-------</option></select>市
		<select id="three"><option disabled selected>-----请选择-------</option></select>县/区
	</body>
	<script type="text/javascript">
	
		areaData.forEach(function(data){
			let m = '<option value="'+ data.code +'">'+data.name+'</option>';
			document.getElementById("one").innerHTML += m;
		});
		function pro(){
			document.getElementById("two").innerHTML = "<option disabled selected>-----请选择-------</option>";
			document.getElementById("three").innerHTML = "<option disabled selected>-----请选择-------</option>";
			console.log(document.getElementById("one").value);
			//遍历数组根据value找省份
			areaData.forEach(function(data){
				if(document.getElementById("one").value==data.code){
					console.log(data.city);
					data.city.forEach(function(c){ // 找城市
						let i = '<option value="'+ c.code +'">'+c.name+'</option>';
						document.getElementById("two").innerHTML +=i;
					})
				}
			})
		}
		function ci(){
			document.getElementById("three").innerHTML = "<option disabled selected>-----请选择-------</option>";
			console.log(document.getElementById("two").value);
			// 省份码和城市码找对应的地区
			let pr = document.getElementById("one").value;
			console.log(pr);
			let ct = document.getElementById("two").value;
			console.log(ct);
			areaData.forEach(function(data){
				if(data.code==pr){
					data.city.forEach(function(data){
						if(data.code == ct){
							data.area.forEach(function(data){
								let j = '<option value="'+ data.code +'">'+data.name+'</option>';
								document.getElementById("three").innerHTML += j;
							})
						}
					})
				}
			})
		}
		
	</script>
</html>

省市县级联 vue实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/myData.js" type="text/javascript"></script>
		<script src="js/vue.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="myapp">
			<select v-model="pro" @change="getCity()">
				<option value="" disabled>----请选择----</option>
				<option v-for="i in ad" :value ="i.code">{{i.name}}</option>
			</select>省
			<select v-model="ci" @change="getarea()">
				<option value="" disabled>----请选择----</option>
				<option v-for="m in ac" :value="m.code">{{m.name}}</option>
			</select>市
			<select v-model="ar">
				<option value="" disabled>----请选择----</option>
				<option v-for="k in ae" :value ="k.code">{{k.name}}</option>
			</select>县
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:"#myapp",
			data:{
				pro:"", //省份码
				ci:"", //城市码
				ar:""  ,//地区码
				ad:[{name:"北京"},{code:"1001"}],//省
				ac:[],//市
				ae:[]//县
			},
			methods:{
				getCity(){
					this.ci = "";
					this.ae=[];
					this.ar = "";
					console.log(this.pro);
					areaData.forEach(data=>{
						if(data.code==this.pro){
							this.ac = data.city;
						}
					})
				},
				getarea(){
					this.ar = "";
					console.log(this.ci);
					areaData.forEach(data=>{
						if(data.code==this.pro){
							data.city.forEach(data=>{
								if(data.code==this.ci){
									this.ae = data.area;
									console.log(this.ae);
								}
							})
						}
					})
				}
			},
			mounted(){
				this.ad = areaData;
			}
		})
	</script>
</html>

打地鼠

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.outer{
				width: 500px;
				height: 500px;
				border: 1px solid;
				/* position: absolute;
				right:50px; */
				margin: 50px auto;
			}
			.bottom{
				width: 200px;
				height: 100px;
				border: 1px solid;
				margin: 50px auto;
				text-align: center;
			}
			.outer>div{
				width: 64px;
				height: 64px;
				float: left;
				margin: 16px;
				border: 1px solid;
				background: url(img/00.jpg);
			}
			#stop{
				margin: 10px;
				border: 1px solid;
				border-radius: 10px;
				width: 128px;
				height: 67px;
				text-align: center;
				line-height: 67px;
				position: absolute;
				top: 240px;
				left: 793px;
				background-color: darkgray;
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="stop">游戏结束</div>
		<div class="outer" id="outer">
			
		</div>
		<div class="bottom">
			<p>计时：<span id="t">0</span>秒<br />
			计分：<span id="score">0</span>分<br />
			<input type="button" id="a" value="开始" onclick="star()" />
			<input type="button" value="结束" onclick="end()"/></p>
		</div>
	</body>
	<script type="text/javascript">
		let tm;//计时编号
		let sm;//老鼠出现编号
		for(let i = 0;i < 25; i++ ){
			document.getElementById("outer").innerHTML += '<div id="inner"> <img id="img'+i+'" src="img/00.jpg" onclick = "tap(this)" /> </div>';
		}
		//点击开始按钮
		// 开始计时
		// 老鼠随机出现
		function star(){
			//禁用开始按钮
			document.getElementById("a").disabled = true;
			//计时
			tm = setInterval(function(){
				let ct = (parseFloat(document.getElementById("t").innerHTML) + 0.01).toFixed(2);
				document.getElementById("t").innerHTML = ct;
				if(ct>=5){
					end();
				}
			},10)
			let arr = [];
			//利用id号和随机数使老鼠随机出现(隔n秒随机出现一个地鼠)
			sm = setInterval(function(){
				let flag;
				let r;
				//避免出现重复编号
				do{
					flag = true;
					r = parseInt(Math.random()*25);
					arr.forEach(function(data){
						if(r==data){
							console.log("重新生成中");
							flag = false;
						}
					})
				}while(!flag)
				arr.push(r);
				//获得随机编号
				let imgId = "img"+r;
				//设置随机老鼠出现
				document.getElementById(imgId).src = "img/01.jpg";
				//显示
				document.getElementById(imgId).style.display = "inline-block";
				
			// 	显示两秒消失
				setTimeout(function(){
					document.getElementById(imgId).src = "img/00.jpg";
					// document.getElementById(imgId).style.display = "none";
					arr.shift();//去除首元素
				},2000)
			},500)
		}
		//点击结束按钮
		//计时停止
		//老鼠消失
		function end(){
			//计时停止
			clearInterval(tm);
			//老鼠出现停止
			clearInterval(sm);
			//老鼠消失
			for(let i=0;i<25;i++){
				//获得所有老鼠编号
				let id = "img"+i;
				document.getElementById(id).style.display = "none";
			}
			document.getElementById("stop").style.display = "inline-block";
		}
		//敲击老鼠
		//切换图片
		function tap(obj){
			if(obj.src.indexOf("img/01.jpg")>=0){
				obj.src = "img/02.jpg";
				//加分
				let sc = parseInt(document.getElementById("score").innerHTML)+1;
				document.getElementById("score").innerHTML = sc;
				if(sc>=5){
					end();
				}
			}
		}
	</script>
</html>