JavaScript随机点名器

作者: fossumjonas | 来源:发表于2019-07-13 10:13 被阅读0次

JavaScript随机点名器
20 - sed综合案例
day04
Java基础-数组深入之经典案例实现-点名器
黑马day04
用原生JS写点名器
JavaScript之随机数生成
JavaScript要点
JavaScript获取随机颜色
JavaScript数组随机排序

使用原生js实现一个简单随机点名的小功能
功能：
1.点击开始按钮开始随机抽取学生并将学生姓名实时显示在页面上。
2.点击暂停按钮后选中最后随机选中的姓名并将其显示在页面。
3.点击开始按钮后按钮颜色变为红色，字体内容变为暂停，点击暂停按钮颜色变为绿色字体原变为红色

效果图如下：

开始页面.png

结束页面.png

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>随机点名器</title>
        <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 = document.getElementById('bt')
          var boxNode = document.getElementById('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)
              //显示到页面
              boxNode.innerText = namelist[num]

            },85)
          }
            //点击暂停 清除定时器
          function stop (){
            clearInterval(timer)

          }
            // 产生随机数 用于数据数组的下标使用
          function random(a,b){
            return parseInt(Math.random() * (b - a) + a)
          }

        </script>
</body>
</html>