js实现点名系统

最新推荐文章于 2022-08-30 20:48:37 发布

Denial_learn

最新推荐文章于 2022-08-30 20:48:37 发布

阅读量565

点赞数

CC 4.0 BY-SA版权

分类专栏： html

本文链接：https://blog.youkuaiyun.com/Denial_learn/article/details/100883463

html 专栏收录该内容

33 篇文章

订阅专栏

实现效果图为：

在这里插入图片描述

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#p2{
				font-size: 28px;
				/*margin: 0px auto;*/
				margin-left: 260px;
			}
			#p1{
				float: right;
				font-size: 15px;
				color: red;
				margin-top: 15px;
			}
			#one{
				width: 660px;
				height: 400px;
				/*border: 1px solid red;*/
				background-color: #FAEBD7;
				margin: 0px auto;
			}
			#all{
				width: 660px;
				height: 300px;
				/*border: 1px solid aquamarine;*/	
			}
			.dianming{
				width: 100px;
				height: 30px;
				line-height: 30px;
				margin-left: 10px;
				background-color: gray;
				display: inline-block;	
				text-align: center;
				margin-top:15px;
			}
			input{
				height: 35px;
				margin-left: 300px;
			}
			
			
		</style>
		<script type="text/javascript">
			var div;
			var show;
//			var btn
			window.onload = function(){
				setInterval(function aa(){
					var p = document.getElementById("p1");
					var data = new Date();
					p.innerHTML=data.toLocaleString();
				},1000)
				
				
//				function aa(){
//					var p = document.createElement("p");
//					var date = new Date();
//					pp.innerHTML=date.toLocaleString();
//				}
//				window.setInterval("aa()",1000)
				
				var a = ["草","楠","玉","雨","华","李威","闯","华","奎","玲","峰","琦","龙","丽","红","a","c","v"];
				
//				function dianming(){
					for (var i=0;i<a.length;i++) {
						div= document.createElement("div");
						var all = document.getElementById("all");
						all.appendChild(div);
						div.innerHTML=a[i];
						div.className="dianming";
					}
					
//				}
//				dianming();
//				
				var btn= document.getElementById("btn");
				btn.onclick=function(){
					
					if(this.value==="开始"){
						show=setInterval(function (){
							div.style.backgroundColor="gray";
							var index = parseInt(Math.random()*a.length);
							div = document.getElementsByClassName("dianming")[index];
							div.style.backgroundColor="red";
						},10)
						this.value="暂停";
					}else{
						clearInterval(show);
						this.value="开始";
					}
				}
				 
				 
				 
			}
//			btn.onclick =setInterval("show()",10);
		</script>
	</head>
	<body>
		<div id="one">
			<span id="p2">点名系统</span>
			<span id="p1"></span>
			<br />
			<div id="all"></div>
			<input type="button" value="开始" id="btn"/>
		</div>
		
	</body>
</html>