制作一个考场时钟
首先，这个时钟要能刷新时间，显示正确，也要显示科目
完工后大概长这样子：
整体只有简单的几部分：
内容 | 实现方式 |
|---|---|
标语 |
|
时间 | 利用setInterval() 以及date()对象进行更新时间 |
科目 | 进行更新时间的同时不断判断科目与时间是否对准 |
装饰 | 花里胡哨，符合考场要求就行 |
准备部分
为了美观，这里使用bootstrap css：
首行加入：<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">
这里建议保存为本地css，然后更改路径，毕竟有些考场没通网
内容
整个内容要包括在一个容器，不仅美观也方便布局，我使用jumbotron，container两个组件
代码语言：html复制<div class="jumbotron container">再在里面添加基本的控件即可
标语
因为它24小时都不变，所以用静态标签就好
bootstrap的alert就很不错
代码语言：html复制<div class="alert alert-danger" role="alert">
<h3 id="title1">遵守纪律，认真考试</h3>
</div>核心部分：时间与科目
时间的刷新
JavaScript可以动态控制DOM，之前也有讲过 开始第一个项目-hello world | arlearn.ltd
首先建立一个div用于显示时间（为了放大字号设置了font-size: 1000%）
要设置好id，这里为time
代码语言：html复制<h1 class="display-1" style="font-size: 1000%" id="time"></h1>利用js的Date()对象显示时间，其基本方法参考：JavaScript Date 参考手册 (w3school.com.cn)
这里使用getHours()，getMinutes()，getSeconds()
首先新建一个对象，并赋值
代码语言：txt复制var time = new Date()然后变成 小时：分钟：秒 的形式
代码语言：txt复制var timeStr = time.getHours() ':' time.getMinutes() ':' time.getSeconds();最后更改DOM：
代码语言：txt复制document.getElementById('time').innerHTML=timeStr为了让时间自动刷新，用setInterval来一秒刷新一次：结合起来就是这样
代码语言：txt复制setInterval(function() {
var time = new Date();
var timeStr = time.getHours() ':' time.getMinutes() ':' time.getSeconds();
document.getElementById('time').innerHTML = timeStr
},1000)//这里是毫秒这时候回到浏览器，时间就会自己刷新了，只不过个位数的时候只能显示一位，鉴于判断比较复杂，我就懒得整了
科目的改变
既然是实用教程，那就实用些，让电脑自己判断自动改变
目前实现的方法如下，
Reference/参考：
【教程】纯前端做一个歌词显示的音乐播放器 | Ar-Sr-Na 博客站 (arsrna.ltd)
不断遍历时间数组来匹配科目，首先新建一个json文件：建议使用Excel再转json：
在线Excel、CSV转JSON格式-BeJSON.com
要注意，这里的time一定要和timeStr格式一样，个位数的时候只能显示一位，这里也要严格对照
time | subject |
|---|---|
23:0:0 | 熬夜 |
23:15:0 | 写代码 |
23:20:0 | 求求你们 |
23:21:0 | 给个支持吧 |
23:22:0 | Ar-Sr-Na |
23:23:0 | 我永远喜欢御坂美琴 |
[
{"time":"23:0:0","subject":"熬夜"},
{"time":"23:15:0","subject":"写代码"},
{"time":"23:20:0","subject":"求求你们"},
{"time":"23:21:0","subject":"给个支持吧"},
{"time":"23:22:0","subject":"Ar-Sr-Na"},
{"time":"23:23:0","subject":"我永远喜欢御坂美琴"},
]时间流动的同时不断查找数组遍历数组，匹配科目
但是注意，我们最好把 时：分：秒 的格式换为js读得出来的格式，秒，也就是num类
Excel中很好处理
h | m | s | time | subject |
|---|---|---|---|---|
23 | 0 | 0 | 82800 | 熬夜 |
23 | 1 | 0 | 82860 | 写代码 |
23 | 2 | 0 | 82920 | 求求你们 |
23 | 5 | 0 | 83100 | 给个支持吧 |
23 | 33 | 33 | 84813 | Ar-Sr-Na |
23 | 33 | 34 | 84814 | 我永远喜欢御坂美琴 |
[{"time":82800 ,"subject":"熬夜"},
{"time":82860 ,"subject":"写代码"},
{"time":82920 ,"subject":"求求你们"},
{"time":83100 ,"subject":"给个支持吧"},
{"time":84813 ,"subject":"Ar-Sr-Na"},
{"time":84814 ,"subject":"我永远喜欢御坂美琴"},]除此之外，我们的js时间也要进行更改，另外赋值一个变量
代码语言：txt复制var timeJS = (time.getHours()*3600) (time.getMinutes()*60) time.getSeconds();然后可以继续了
给json赋值
代码语言：txt复制var subject = xxx(刚刚那一段json)for(i1=0;i1<subject.length;i1 ) {
if (timeJS > subject[i1].time) {
//改变科目的dom
}
}当匹配到时改变科目：
代码语言：txt复制科目组件：<h2 id="subject">当前科目：语文</h2>document.getElementById('subject').innerHTML =总代码
HTML：
代码语言：html复制<div class="jumbotron container">
<!--script type="text/javascript" src="https://api.xygeng.cn/one/get/"></script-->
<div class="alert alert-danger" role="alert">
<h3 id="title1">遵守纪律，认真考试</h3>
</div>
<h1 class="display-1" style="font-size: 1000%" id="time">
</h1>
<div class="alert alert-primary" role="alert">
<h2 id="subject">当前科目：语文</h2>
</div>
<p>Copyright © Ar-Sr-Na. All rights reserved.</p>
</div>subject = [{"time":82800 ,"subject":"熬夜"},
{"time":82860 ,"subject":"写代码"},
{"time":82920 ,"subject":"求求你们"},
{"time":83100 ,"subject":"给个支持吧"},
{"time":84813 ,"subject":"Ar-Sr-Na"},
{"time":84814 ,"subject":"我永远喜欢御坂美琴"},]
setInterval(function() {
var time = new Date();
var timeStr = time.getHours() ':' time.getMinutes() ':' time.getSeconds();
document.getElementById('time').innerHTML = timeStr;
var timeJS = (time.getHours()*3600) (time.getMinutes()*60) time.getSeconds();
for(i1=0;i1<subject.length;i1 ) {
if (timeJS > subject[i1].time) {
document.getElementById('subject').innerHTML = subject[i1].subject
//改变科目的dom
}
}
},1000)DEMO地址：考场时钟
