首先你要知道
定时器 每隔多长时间做什么事情
setInterval(function(){
console.log(1);
},1000)
结束定时器
clearInterval(定时器的变量)
随机数
console.log(Math.random()) //>=0 <1 的随机数
console.log(parseInt(Math.random()*10)); //10以内的随机整数,不包括10;
使用this代表触发当前事件的那个事件源
input的值都可以使用value获取到
标签内容:innerText
总体代码如下:
<style>
h2{
text-align: center;
font-size: 50px;
}
#box{
border: 10px solid pink;
width: 400px;
height: 300px;
line-height: 300px;
font-size: 100px;
margin:auto;
box-sizing: border-box;
text-align: center;
background: pink;
}
#btn{
display: block;
margin:auto;
height: 100px;
width: 400px;
background: yellow;
outline: none;
font-size: 50px;
}
</style>
<h2>皇上翻牌子</h2>
<div id="box"></div>
<input type="button" value="开始" id="btn">
<script>
var arr =["杨贵妃","莞贵人","肖嫔","王贵人","刘答应","华妃",
"皇后","熹贵人","宣美人","李公公","孙贵人","王贵妃"]
var timeId;
btn.onclick = function(){
if(btn.value == "开始"){
btn.value = "停止"
timeId =setInterval(function(){
box.innerText= arr[parseInt(Math.random()*12)]
},3)
}else{
btn.value = "开始"
clearInterval(timeId)
}
}
</script>