随机点名器的制作
前言
很多时候在一些决定任务分配的时候,往往大家会表现滴羞涩。在展示点名器之前,先给大家分享一个关于上课时点名的笑话。
学校开学点名,有一个班主任别出心裁的对学生说:“我念学号,你们自己报一下名字,这样大家就认识了好不好呀?”
老师:“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>
结果呈现如下:
希望大家多多指正呀~~