效果如下:
如图所见,一个倒计时的小功能样式。
写出该样式功能步骤分为:
HTML环节:
布置好结构,设应所需的天数、小时、分、秒。
CSS环节:
此处为原图设置样式效果,可依个人喜好设置。
JavaScript重点环节:
首先封装一个为time的方法,
分别获取现在的时间与设置未来时间赋值给新声明的变量。
通过parseInt转为Number类型将现在时间与未来时间做加减乘除操作,
通过计算,分别声明变量接收计算后获得的时差秒数、分数、时数、天数。
将获得的时差数据做字符串拼接通过inner HTML写入文档中设置好的容器。
最后封装好的方法也要放入计时器里。