首先是html部分,设置好显示时间的标签与控制键。
Css部分,写出基础的样式
Js部分,先声明两个元素
在页面加载事件中获取两个button标签,将第一个button标签绑定onclick事件,当输出为false时,将timer调用封装的showTime时间每1000毫秒递增,bl为true动态添加时间。将第二个button标签绑定onclick事件,移除timer,bl为false暂停时间。
封装一个函数,将获取到的数据进行判断在为个位数时在前方添加一个0。将添加后的数据赋值给str输出到显示时间的标签上,先创建一个日期对象,使用 new 运算符和 Date 构造方法,在调用 Date 构造方法而不传递参数的情况下,新建的对象会自动获取当前的时间和日期,通过:
getYear()方法:可以获取年份,其返回值是表示当前Date 对象的年份字段
getMonth():可以获取本地时间的月份
getDate() :可以返回一个月份的某一天,使用本地时间,返回值是 在1 ~ 31 之间的一个整数。
getHours():获取小时数,返回的小时数值是从0到23之间的整数
getMinutes():获取分钟数,返回的分钟数值是从0到59之间的整数
getSeconds():获取秒数,返回的秒数值是从0到59之间的整数
将获取到的数据进行判断在为个位数时在前方添加一个0。将添加后的数据赋值给str输出到显示时间的标签上。
效果如下