用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

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20190204G07LCA00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券