JavaScript随机点名器
使⽤原⽣js实现⼀个简单随机点名的⼩功能
功能：
1.点击开始按钮开始随机抽取学⽣并将学⽣姓名实时显⽰在页⾯上。
2.点击暂停按钮后选中最后随机选中的姓名并将其显⽰在页⾯。
3.点击开始按钮后按钮颜⾊变为红⾊，字体内容变为暂停 ，点击暂停按钮颜⾊变为绿⾊字体原变为红⾊效果图如下：
开始页⾯.png
结束页⾯.png
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>随机点名器</title>
<style>
<style>
*{
margin:0;
padding:0;
}
#main{
margin:100px;
background:#abcdef;
width:520px;padding:50px;
border-radius:50%;
box-shadow:0 2px 12px #666666;
}
#box{
background:#ff5511;
margin:50px;
padding:20px;
font-size:55px;
font-weight:bold;
border-radius:15px 15px 15px 15px;
box-shadow:0 2px 12px #666666;
}
#bt{
width:100px;
font-size:20px;
font-weight:bold;
background-color:green;
border-radius:8px 8px 8px 8px;
box-shadow:0 2px 12px #666666;
cursor:pointer;
padding:5px;
}
</style>
</head>
<body>
<center>
<div id="main">
<div id="box">随机点名器</div>
<button id="bt" onclick="doit()">开始</button>
</div>
</center>
<script>
//准备数据⽤数组保存学⽣姓名
var namelist=["Linda","Leo","Alfred","Mike","Vivian","Abby","John","Tim","Zyaire","Chirs"];          var btNode = ElementById('bt')
borderboxvar boxNode = ElementById('box')
var timer
var flag =1
//点击开始按钮
function doit(){
if(flag){
start()
btNode.style.backgroundColor= "red"
btNode.innerText="暂停"
flag = 0
}else{
stop()
btNode.style.backgroundColor = "green"
btNode.innerText="开始"
flag = 1
}
}
//点击开始后开始做的事设置定时任务随机抽取学⽣
function start(){
timer = setInterval(function(){
var num = random(0,namelist.length)
// console.log(num)
//显⽰到页⾯

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。