计时器与倒计时和数组去重，7人抽奖选中5人，正则表达式完成注册表单的设计与验证

攒星.

已于 2022-11-28 21:19:32 修改

阅读量194

点赞数 1

文章标签： javascript html

于 2022-09-22 08:51:33 首次发布

本文链接：https://blog.csdn.net/weixin_67358175/article/details/126984424

版权

1.利用定时器实现一个动态时钟

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<span id="time"></span>
		<script type="text/javascript">
			//定时器
			setInterval(function(){
				var date=new Date()
				var hours=date.getHours()//小时
				var minutes=date.getMinutes()//分钟
				var seconds=date.getSeconds()//秒
				//使用三目运算符，若变量名为hours的值小于九则返回"0"+9,大于9则返回自己本身
				hours=hours>9? hours:"0"+hours
				//使用三目运算符，若变量名为minutes的值小于九则返回"0"+9,大于9则返回自己本身
				minutes=minutes>9? minutes:"0"+minutes
				//使用三目运算符，若变量名为seconds的值小于九则返回"0"+9,大于9则返回自己本身
				seconds=seconds>9? seconds:"0"+seconds
				// 设置一个变量储存小时,分钟，秒
				var result=hours+":"+minutes+":"+seconds
				// 在id为time的span标签中输出result
				document.getElementById("time").innerHTML=result
			},1000)//以毫秒为单位跳动
			
		</script>
	</body>
</html>

2.利用setInterval()函数实现倒计时

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<span id="time"></span>
		<script type="text/javascript">
			// 设置一个变量并赋值
			var i=100;
			// 定时器
			setInterval(function(){
			
				i--
				// // 在id为time的span标签中输出i
				document.getElementById("time").innerHTML=i
				// 当i=0时i=100继续进行倒计时
				if(i==0){
					i=100
				}
				
			},100)//以毫秒为单位跳动
			
		</script>
	</body>
</html>

3.去掉数组中重复的元素，如：arr_3=[1,2,3,1,4,3,2,5,7]，将该数组中重复的元素去掉，得到一个新的数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			// 创建一个数组
			var arr_3=[1,2,3,1,4,3,2,5,7]
			// 双重循环
			for(var i=0;i<arr_3.length;i++){
				for(var j=i+1;j<arr_3.length;j++){
					// 若i=j时删除i
					if(arr_3[i]==arr_3[j]){
						arr_3.splice(i--,1)
					}
				}
				}
				document.write(arr_3)
			
		</script>
	</body>
</html>

4.某部门有张三、李四、王五、赵六、小白、小明、小红，共7名职员，由于临近年会，现请你帮助制作一个抽奖系统，随机抽取5名幸运儿，不能重复。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" id="a" value="抽奖啦！"/>
		<span id="names">
			<br />
			王五<br />
			李四<br />
			小明<br />
			小白<br />
			赵六<br />
			小红<br />
			张三<br />
		</span>
		
		<script type="text/javascript">
			
			   document.getElementById("a").onclick=function(){
			   //原数组
			   var a1 = ["张三","李四","王五","赵六","小白","小明","小红"]
			   //输出数组
			   var out = [];
			   //输出个数
			   var num = 5;
			   while(out.length < num){
			       var temp = (Math.random()*a1.length) >> 0;
			       out.push(a1.splice(temp,1));
			   }
			   document.getElementById("names").innerHTML=out
			   }
			  </script>
	</body>
</html>

5.完成对注册表单的设计与验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!-- 先进行html网页设计 -->
		<h3>欢迎注册**网站</h3>
  		<h4>姓名:<input type="text" id="a" placeholder="2-4个中文"/></h4>
 		 <h4>密码:<input type="text" id="b" placeholder="至少6个数字必须是字母数字下划线"/></h4>
  		<h4>邮箱:<input type="text" id="c" placeholder="单域名邮箱"/></h4>
  		<h4>年龄:<input type="text" id="d" placeholder="整数"/></h4>
  		<input type="button" id="e" value="验证信息"/>
  		<script type="text/javascript">
			// 与id为e的按钮绑定点击事件
  			document.getElementById("e").onclick=function(){
				// 使用正则表达式进行判断a输入框中只能输入汉字,并且不能小于2位和大于4位
  				var a=/^[\u4e00-\u9fa5]{2,4}$/
  				var a1=document.getElementById("a").value
  				var isa2=a.test(a1)
  				if(isa2==false){
  					alert("名字格式不正确")
  					return
  				}
				// 使用正则表达式进行判断b输入框中输入的数不能小于6
  				var b=/^[0-9a-zA-Z_]{6,}$/
  				var b1=document.getElementById("b").value
  				var isb2=b.test(b1)
  				if(isb2==false){
  					alert("密码格式不正确")
  					return
  				}
				// 使用正则表达式进行判断c输入框中的邮箱格式
  				var c=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
  				var c1=document.getElementById("c").value
  				var isc2=c.test(c1)
  			
  				if(isc2==false){
  					alert("邮箱格式不正确")
  					return
  				}
  				var d=/^[0-9]*$/
  				var d1=document.getElementById("d").value
  				var isd2=d.test(d1)
  				if(isd2==false){
  					alert("年龄格式不正确")
  					return
  				}
  				if(isa2&&isb2&&isc2&&isd2){
  					alert("验证成功")
  				}
  			}
  		</script>
	</body>
</html>