制作一个考场标准时钟 | JavaScript+CSS+HTML

原创

Ar-Sr-Na

修改于 2021-08-17 18:09:41

1.4K0

修改于 2021-08-17 18:09:41

文章被收录于专栏：Ar-Sr-Na

制作一个考场时钟

首先，这个时钟要能刷新时间，显示正确，也要显示科目

完工后大概长这样子：

整体只有简单的几部分：

内容	实现方式
标语	`<h1 class="display-1">`标签
时间	利用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两个组件

<div class="jumbotron container">

再在里面添加基本的控件即可

标语

因为它24小时都不变，所以用静态标签就好

bootstrap的alert就很不错

<div class="alert alert-danger" role="alert">
<h3 id="title1">遵守纪律，认真考试</h3>
</div>

核心部分：时间与科目

时间的刷新

JavaScript可以动态控制DOM，之前也有讲过开始第一个项目-hello world | arlearn.ltd

首先建立一个div用于显示时间（为了放大字号设置了font-size: 1000%）

要设置好id，这里为time

<h1 class="display-1" style="font-size: 1000%" id="time"></h1>

利用js的Date()对象显示时间，其基本方法参考：JavaScript Date 参考手册 (w3school.com.cn)

这里使用getHours()，getMinutes()，getSeconds()

首先新建一个对象，并赋值

var time = new Date()

然后变成小时：分钟：秒的形式

var timeStr = time.getHours()+':'+time.getMinutes()+':'+time.getSeconds();

最后更改DOM：

document.getElementById('time').innerHTML=timeStr

为了让时间自动刷新，用setInterval来一秒刷新一次：结合起来就是这样

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时间也要进行更改，另外赋值一个变量

var timeJS = (time.getHours()*3600)+(time.getMinutes()*60)+time.getSeconds();

然后可以继续了

给json赋值

var subject = xxx(刚刚那一段json)

for(i1=0;i1<subject.length;i1++) {
    if (timeJS > subject[i1].time) {
   //改变科目的dom
    }
   }

当匹配到时改变科目：

科目组件：<h2 id="subject">当前科目：语文</h2>

document.getElementById('subject').innerHTML =

总代码

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地址：考场时钟

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

网站