加强版点名系统（名字+提问问题）（js实现，一个文件即可）

最新推荐文章于 2022-06-15 11:48:54 发布

Denial_learn

最新推荐文章于 2022-06-15 11:48:54 发布

阅读量521

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/Denial_learn/article/details/101197221

版权

html 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

在a数组里面进行添加名字，在title数组里面添加提问问题！！！！！

效果图为：
在这里插入图片描述
运行一次：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0px;padding: 0px;}
			#all{
				width: 670px;
				height: 470px;
				background-color: antiquewhite;
				margin: 20px auto;
			}
			#all p:first-child{
				height: 40px;
				line-height: 40px;
				font-size: 22px;
				font-weight: bold;
				text-align: center;
				/*border: 1px solid red;*/
			}
			#all p:nth-of-type(2){
				height: 20px;
				line-height: 20px;
				color: red;
				font-size: 14px;
				text-align: right;
				font-weight: bold;
			}
			#name_all{
				height: 160px;
				/*border: 1px solid red;*/
			}
			#name_title{
				width: 500px;
				height: 200px;
				margin: auto;
				/*border: 1px solid red;*/
				text-align: center;
				font-size: 0px;
			}
			#name{
				width: 100px;
				height: 30px;
				line-height: 30px;
				font-size: 16px;
				border: 1px solid gray;
				margin: auto;
				border-bottom: none;
			}
			#title{
				height: 165px;
				font-size: 16px;
				border: 1px solid black;
			}
			#btn{
				height: 40px;
				width: 80px;
				line-height: 40px;
				font-size: 22px;
				cursor: pointer;
				margin-left: 300px;
			}
			.username{
				width: 100px;
				height: 30px;
				line-height: 30px;
				margin-left: 10px;
				background-color: gray;
				display: inline-block;	
				text-align: center;
				margin-top:15px;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				
				setInterval(function aa(){
					var p = document.getElementById("time1");
					var data = new Date();
					p.innerHTML=data.toLocaleString();
				},1000)
				
				var a = ["潘号东 ", "黄兆逵 ", "苗含玉 ", "徐若楠 ", "李战威 ", "史闯闯 ", "李聪聪 ", "刘建华 ", "金红岭 ", "张恒奇", "聂赟锋", "朱得草", "卢旭东 ","赵建军 ", "李肖雨 ", "李亚迪 ", "季成龙 ", "吴尧闯 "];		
				var title = ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18"];
				function new_name(){
					for (var i=0;i<a.length;i++) {
						div= document.createElement("div");
						var all = document.getElementById("name_all");
						all.appendChild(div);
						div.innerHTML=a[i];
						div.className="username";
					}
				}
				new_name();
				
				var btn= document.getElementById("btn");
				var random1;
				var random2;
				btn.onclick=function(){
					if(this.value==="开始"){
						show=setInterval(function (){
							random1 = parseInt(Math.random()*a.length);
							random2 = parseInt(Math.random()*title.length);
							var name = document.getElementById("name");
							name.innerHTML=a[random1];
							var title1 = document.getElementById("title");
							title1.innerHTML=title[random2];
						},10)
						this.value="暂停";
						
					}else{
						clearInterval(show);
						this.value="开始";
						document.getElementById("name_all").innerHTML="";
						a.splice(random1,1);
						title.splice(random2,1);
						new_name();
					}
					
				}
				
				
			}
		</script>
	</head>
	<body>
		<div id="all">
			<p>点名系统</p>
			<p id="time1"></p>
			<div id="name_all"></div>
			<div id="name_title">
				<div id="name">1111</div>
				<div id="title"></div>
			</div>
			<input type="button" id="btn" value="开始" />
		</div>
	</body>
</html>

Denial_learn

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
加强版点名系统（名字+提问问题）（js实现，一个文件即可）

在a数组里面进行添加名字，在title数组里面添加提问问题！！！！！效果图为：运行一次：代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{...
复制链接

扫一扫