使用HTML及简单的JavaScript脚本制作一个点名器

分手后的思念是犯贱 2022-05-28 12:43 247阅读 0赞

## 点名器吐槽 ##

昨天被点名器坑的很惨，老师用他那所谓的“点名器”，一节课我被叫起来4次，最后一次，大家会意的笑了笑。我是实在无奈，好歹也是个计算机老师，不能自己写个随机点名器吗？弄了顺序读文件，每次靠自己点鼠标的间隔来随机，好吧我承认，两次鼠标的间隔的确是个不错的随机事件，但是切换的如此之快，老师每次的点击间隔还有意无意的保持差不多，那能不每次都点到固定的几个人吗？这虽是自己切身经历的吐槽，但也很明显的反映出那个点名器的问题，最需要解决的就是——随机。利用鼠标或键盘的使用间隔的确是个随机事件，但是正如上面所看到的，人在自然状态下，两次点击的间隔真的差不了多少，如果切换速度再配合点，那就只能遭到一节课被点5、6次的命运了！

## 关于点名器 ##

正所谓，哪里有压迫，哪里就有反抗！我实在是感到憋屈，索性自己写个点名器，改天发给老师，告别这点名的诅咒。下面的点名器主要有【生成一个随机的名字】和【顺序滚动名字】两种模式。使用了一些HTML的标签和基础的JavaScript语法，至于CSS，只是为了让界面显得不那么单调，时间仓促，仅是随手涂鸦，还望各位包含！

## Have a look! ##

下面是效果图（素材均来自网络，仅供学习使用。名字来自舍友，请多包含。）  
![这里写图片描述][70]

## 实现要点！ ##

**1，如何实现h1标签内容的改变？**  
![这里写图片描述][70 1]  
function中的语句主要是用一个随机的名字对h1（其id=“disp1”）内容进行了重写，其中运用innerHTML可以实现这一目的。

**2，随机的名字从何而来？**  
由于点名器的第一种模式的名字需要随机，所以我们的思路是，提前准备一个名字的数组，通过派生随机数作为名字数组下标的方式来实现随机选取名字。

//产生从beg到end的随机数
    function produceRandomNumber(beg, end) {
    	with(Math) {
    		return (beg + floor(random() * (end - beg)));
    	}
    }

从第一点的图中可以看到，数组下标是此函数的返回值。

**3，怎样实现名字不断快速循环的切换？**  
这主要是为了应付点名器的第二种模式。这需要类似于中断处理的机制，事实也大致如我们所想，用了一个专门的函数：setInterval()，这个函数接受两个参数，第一个参数是所要执行的函数，第二个参数是间隔多少毫秒便执行一次参数一中的参数。

整个代码块用来响应鼠标点击对应图标的事件。其中添加了一个二值标志（bool）实现点击便切换，再点击便停止的的功能。其中用setInterval函数的返回值作为clearInterval的参数，便可停止内容切换。

**4，那个仅有的图标互动是怎么实现的？**  
这里用了比较笨的办法，即逐个检测onmouseover和onmouseout事件，然后用JavaScript脚本改变图片按钮的src属性。  
![这里写图片描述][70 2]  
看代码就知道，我是个JavaScript的外行，简直就是以功能为目的而不管代码死活啊~

上面几点几乎是整个点名器实现的全部要点，至于CSS是稍微美化了网页的表现（至少我是这么觉得）。在文章最后会提供相关文件和素材的下载。

## 简直一无是处T-T ##

这么说实在不过分，点名器是实现好了，但是存在致命的缺陷，不能够读文件，当然我是考虑过的，但是使用简单的方式读文件，大多数浏览器不支持相关插件，复杂的又会难于理解，只好取个折中的办法，但是这实在是让人感觉别扭、难受。把数据放在程序里，虽然名单不会时常更换，但是数据和程序混在一起，无论是数据还是程序的独立性都不存在了，连文件系统都不如，这简直就回到了解放前！希望之后造诣更深的时候，回来完善它，毕竟应该快让老师换了之前的点名器！

## 文件下载链接 ##

链接：https://pan.baidu.com/s/1qeeVovZ9L3gJztwBPPXG3A 密码：ails

![公众号：Dawo][Dawo]

## 参考书目 ##

《HTML和css基础教程》、《JavaScript基础教程》、《JavaScript入门经典》

[70]: /images/20220528/906cdca97906446db0f627a019c381ac.png
[70 1]: /images/20220528/81f2f1e9aa1d45319c2171b66ae5b09f.png
[70 2]: /images/20220528/c396d36b76d44e56b910d17c8bb3e5b6.png
[Dawo]: /images/20220528/ec76768e4ef3493d8faf390afdabf0cb.png