难度:简单
需要技能: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
领取专属 10元无门槛券
私享最新 技术干货