<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>随机点名器</title>
<script>
var names = ["曹操", "荀彧", "荀攸", "郭嘉", "曹植",
"曹彰", "夏侯惇", "蒋干", "贾诩", "公孙瓒", "陶谦", "孔融", "丁原", "郭汜", "太史慈",
"张辽", "乐进", "李典", "于禁", "张郃", "杨修", "司马懿", "钟繇", "夏侯渊", "夏侯惇", "陈平", "华歆"
];
var timer = null;
function fun() {
var val = document.getElementById("click");
if( val.value == "开始") {
val.value = "停止";
val.style.backgroundColor= "#CA2525";
timer = setInterval("rotation()", 100);
} else {
val.value = "开始";
clearInterval(timer);
val.style.backgroundColor= "#89F221";
}
}
function Random(max) {
var num1 = Math.random() * max;
return Math.floor(num1);
}
function rotation() {
var ranNum = Random(names.length);
document.getElementById("display").innerHTML = names[ranNum];
}
</script>
<style>
* {
margin: 0;
padding: 0;
}
.top {
width: 100%;
height: 70px;
}
.mid {
width: 550px;
height: 280px;
margin: auto;
padding: 15px;
border-radius: 25px;
background-color: #ff751a;
}
.mid_top {
height: 55px;
background-color: #ff751a;
}
.mid_mid {
width: 300px;
height: 87px;
margin: auto;
background-color: #A4A4A4;
border-radius: 15px;
vertical-align: middle;
line-height: 87px;
}
.kk {
height: 26px;
}
.button {
width: 145px;
height: 50px;
border-radius: 8px;
border: 0px;
background-color: #89F221;
font-size: 25px;
font-family: "微软雅黑";
}
</style>
</head>
<body>
<div class="top"></div>
<div class="mid">
<div class="mid_top"></div>
<div id="display" class="mid_mid" align="center" style="font-size:288%">随机点名器</div>
<div class="kk"></div>
<div class="mid_bottom" align="center"><input id="click" class="button" type="button" value="开始" onclick="fun()"/></div>
</div>
</body>
</html>
|