用js做一个随机点名程序

1,726 阅读1分钟

首先你要知道

定时器 每隔多长时间做什么事情

    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>