<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>隨機點名</title>
<style>
#content{
width:100%;
height: 100%;
background: #ffaa7f;
margin: 100px auto;
text-align: center;
position: relative;
margin-top: 150px;
line-height: 350px;
color: dodgerblue;
font-size: 70px;
}
#btn1{
background: #ccc;
width: 180px;
height: 80px;
font-size: 30px;
color: #f40;
border-radius: 12px;
position: absolute;
bottom: 30px;
left: 29%;
margin-left: -90px;
}
#btn2{
background: #ccc;
width: 180px;
height: 80px;
font-size: 30px;
color: #f40;
border-radius: 12px;
position: absolute;
bottom: 30px;
right: 13%;
margin-left: -90px;
}
#button-group{
position: relative;
top: 15px;
}
#btn-sontent{
position: relative;
bottom: 55px;
}
</style>
</head>
<body>
<div id="content">
<div id="btn-sontent">
<span id="span1">點擊開始</span>
<div id="button-group">
<button id="btn1" onclick="">開始點名</button>
<button id="btn2"> 重新開始</button>
</div>
</div>
</div>
<script>
var arr = ['張文鑫','蔡檳偉','程東暉','陳繼昊','陳麗蓉','陳榮欽','陳思嘉','董梅杰','段春曉','付永秀','高雯'];
var $btn1 = document.getElementById('btn1');
var $btn2 = document.getElementById('btn2');
var $content = document.getElementById('content');
var $span1 = document.getElementById('span1');
var timer;//計時器
var testNum = true;
$btn1.onclick = function(){
if(testNum){
// console.log(1);
start();
$btn1.innerHTML = '就你了!';
testNum = false;
}
else{
// console.log(0);
stop();
$btn1.innerHTML = '繼續';
testNum = true;
}
}
$btn2.onclick = function(){
restart();
}
function start(){
// timer = setInt erval(function(){
// var num = random(1,arr.length -1);
// $span1.innerHTML = arr[num];
// },10)
timer = setInterval(function(){
var num = random(0,arr.length)
$span1.innerHTML = arr[num]
},10)
}
function stop(){
//clearInterval()用于停止setinterval函式
clearInterval(timer);
}
function restart(){
$span1.innerHTML = '點擊開始';
}
// 隨機函式
function random(a,b){
var randomNum = Math.round(Math.random() * (b - a)) + a;
//var test = Math.round(Math.random() * (13 - 7)) + 7;
return randomNum;
}
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/235341.html
標籤：JavaScript
上一篇：求大神指引！！！純小白
下一篇：各位大佬用js幫幫忙