用JavaScript实现数字时钟效果

难度：简单

需要技能：html(5)/css(3)/JavaScript

产品经理可能提出过这么一个需求：

“现在我们需要在页面上做一个数字时钟，让用户在浏览的同时，能观察到时间。”

数字时钟，是使用Date类型所能实现的特效中比较简单的。

真正难的是钟表特效，做起来是真的难且麻烦。

但是可以借机和UI小姐姐搭话，嘿嘿嘿~

这个钟表特效我改日跟你们细说，今天先来个简单的，用数字时钟开开胃。

------潘家杰

01

梳理开发逻辑

磨刀不误砍柴工，我们还是先来梳理一下开发逻辑：

在htm页面中，我们需要设置一个区域用来显示电子表的时分秒。

在css中，可以根据需要设置fontFamily/fontSize等样式，但是要注意先进行时间的格式化处理。

最难的部分，用JavaScript和jQuery动态获取时间，并以秒为间隔刷新。这就需要每隔1000毫秒调用一次函数，函数会截取当前调用的时间并格式化为字符串，然后再赋值到dom对象上的innerText属性上

02

html部分

html部分的代码如下：

03

css部分

css代码部分：

.clock{

max-width: 500px;

background-color: gray;

color:#fff;

min-height: 50px;

text-align: center;

font-size: 18px;

}

.clock>div{

transform: translateY(50%)

}

04

JavaScript部分

前面的都不是重点，现在才是重点：

首先，我们要明确，必须每隔1000毫秒取得一次当前的时间，并转化为时:分:秒的字符串格式。

因而最后，我们在最后需要一个定时器来回调函数本身。

按照这个思路，我们先声明一个函数，来获取当前的时间：

如何获取当前的时间并根据本地化情况实现字符串格式化？

如果熟悉JavaScript的内置对象Date类型的话，我们知道它有个方法toLocaleTimeString()，会根据本地时间格式实现字符串格式化。

我举个例子：

var nowTime = new Date().toLocaleTimeString()

它打印的结果无非两种：

1.按照24小时制，如果是在0~12点，则返回字符串"上午10:10:35"，即上午时间10点10分35秒

2.按照24小时制，如果是在13~24点，则返回字符串"下午4:03:30"，即下午4点03分30秒

这里我们需要注意2点：

1.我们需要转化为24小时制，所以我们不想在结果中出现"上午""下午"字符串

2.下午时间段，小时部分要+12，转化为24小时制

如果是在上午时间，则比较简单，我们只需要替换掉"上午就行"，代码如下：

麻烦的是下午时间段，准确地说，是4个时间段比较麻烦：13点，14点~19点，20~21点,22点~23点：

let hour = Number(timeStr.charAt(0))

如果是在13点00分~13点59分59秒之间：

if(hour == 1 && timeStr.charAt(1) == ":"){

timeStr = timeStr.replace(timeStr.charAt(0),"13")

}

如果是在14点00分~19点59分59秒之间：

if(hour > 1 && hour

timeStr = timeStr.replace(timeStr.charAt(0),(hour+12).toString())

}

如果是在20点00分~21点59分59秒之间：

else if(hour>=8 && hour

timeStr=timeStr.replace(timeStr.charAt(0),(Number(timeStr.charAt(0))+1).toLocaleString())

timeStr=timeStr.replace(timeStr.charAt(1),(Number(timeStr.charAt(1))+2).toLocaleString())

}

综合一下代码如下：

以上~

最终效果如下：

END

皮的·潘

一个永远在学习的攻城狮，

html(5)/css(3)/javascript底子扎实，

webpack和es6当然也得会啦，

jQuery不维护了？阻止不了我继续用它，

选择vue完全是因为中文文档能读懂啊，

git+SourceTree,鼠标一点就能push到git仓库里，

photoshop+cutterman，UI在我面前羞愧地低下了头

欢迎关注我：

知乎专栏：皮的潘的前端研发日志https://zhuanlan.zhihu.com/c_1066724816165531648

简书专栏：archer0911