随机点名器的制作

随机点名器的制作

前言

很多时候在一些决定任务分配的时候，往往大家会表现滴羞涩。在展示点名器之前，先给大家分享一个关于上课时点名的笑话。

学校开学点名，有一个班主任别出心裁的对学生说：“我念学号，你们自己报一下名字，这样大家就认识了好不好呀?” 　　
老师：“001号!”　
001：“报告老师，我姓焦，我叫焦配。”　
老师有点晕，问道：“这是谁给你取的?”　　
001：“我爹。”　
老师：“你爹是干什么的?”　
001：“开种猪厂的!”　
老师：“002号!”　　
一个女生站起来：“报告老师，我姓张，我叫张德开。”　
老师：“003号!”　　
003：“报告老师，我是张德开的孪生弟弟，我叫张不开。”　
老师：“这是谁给你们起的名?”　
003：“是我爸，他是卖钳子的。”　
老师赶紧喝了口水。　　“004号!”　　
004：“报告老师，我姓区(这个字念”欧”)我叫区夜(哦也)，这是我妈给我取的名，她说生我的时候刚好打爆了一个电脑游戏。”　
老师的心脏有点不舒服了。　　“005号!”　
005：“报告老师，干，你，娘!”　
老师：“你怎么骂人啊?!”　　
005：“没有啊!老师，我是说我姓甘，叫甘妮酿，我老爸是造酒的。”　
老师吃了一片药。　　"006号!”　　
006：“老师，我姓苟，叫苟不理。”　
老师：“你老爸是开包子铺的吧?!”　　
006：“老师，您真聪明!”　老师已经有点站不稳了。　
老师：“007号!”　
007：“我姓蒯(读快，发第三声。)叫蒯货。”　
老师：“你别告诉我你老爸是开货栈的。”　
007：“老师，你可真老土了，我老爸是拉皮条的。”　
老师的嘴角已经渗出了血。　　“008号!”　　
008：“老师，你**!”　
老师：“什么?你说什么?!”　
008：“我是说我姓倪，叫倪去寺。我老妈是个信佛的人，我的名字有意思吧?”　
老师：“有意思，有意思。”　老师快哭出来了。“009号!”　　
009：“老师，下回说。”　
老师：“为什么要下回说，你现在就说!”　　
009：“不是的啦!老师，我姓夏，叫夏汇烁，我老爸是个说评书的。”　
老师已经感到天旋地转了。”010号!”　　
010：“老师，我姓高，叫高完。”　
....

基于如上比较搞笑的点名事件，我们将为老师制作一个简单的点名器来方便为同学们点名吧嘻嘻

HTML部分

<div id="main">
    <div id="box">随机点名</div>
    <button id="bt" onclick="runCall()">开始</button>
</div>

CSS部分

 * {
            margin: 0px;
            padding: 0px;
        }
        
        #main {
            margin: 100px;
            background: #abcdef;
            width: 800px;
            padding: 50px;
            border-radius: 10%;
            box-shadow: 0 2px 12px #c35691;
        }
        
        #box {
            background-color: #09e67f;
            margin: 50px;
            padding: 20px;
            padding-left: 30%;
            font-size: 55px;
            font-weight: bold;
            border-radius: 15px 15px 15px 15px;
            box-shadow: 0px 2px 12px #666666;
        }
        
        #bt {
            width: 100%;
            font-size: 22px;
            font-weight: bold;
            background-color: #abcdef;
            border-radius: 8px 8px 8px 8px;
            box-shadow: 0 2px 12px #666666;
            cursor: pointer;
            padding: 5px;
        }

JavaScript部分

<script>
var nameList = ['焦配', '张德开', '张不开', '区夜', '甘妮娘', '苟不理', '蒯货', '倪去寺', '夏汇烁', '高完']
        var mineTime = null
        function runCall() {
            var btn = document.getElementById('bt');
            if (mineTime == null) {
                //停止时就要开始运行
                show();
                //此时点击框应为停止选项
                bt.innerHTML = '停止';
                bt.style.backgroundcolor = 'red'
            } else {
                //动起来时，点击后是停止效果。应改变内容为"开始"
                bt.innerHTML = '开始';
                bt.style.backgroundcolor = 'green';
                clearTimeout(mineTime);
                mineTime = null;
            }
        }
        function show() {
            var names = document.getElementById('box');
            var num = Math.floor(Math.random() * 1000) % nameList.length;
            names.innerHTML = nameList[num];
            mineTime = setTimeout(show, 300)
        }
    </script>

结果呈现如下：

希望大家多多指正呀~~