0
点赞
收藏
分享

微信扫一扫

加强版点名系统(名字+提问问题)(js实现,一个文件即可)

桑二小姐 2022-12-09 阅读 138


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

效果图为:

加强版点名系统(名字+提问问题)(js实现,一个文件即可)_Math


运行一次:

加强版点名系统(名字+提问问题)(js实现,一个文件即可)_数组_02


代码:

<!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>


举报

相关推荐

js实现点名系统

0 条评论