![055a4b1de10775b23e5d917e50c3c718.png](https://img-blog.csdnimg.cn/img_convert/055a4b1de10775b23e5d917e50c3c718.png)
电子时钟是网上常见的功能,在学习date对象和定时器功能时,来完成一个电子时钟的制作是不错的选择。学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础。
先准备一个html元素,用来放置时钟。新建一个div元素,它的id命名为clock,如下所示:
<div id="clock" class="clock_con"></div><!--基础时钟元素-->
本实例电子时钟的格式设定为 (yyyy-MM-dd hh:mm:ss) ,用js来组合一个简单的时钟字符串放到clock元素中。
本实例把时钟功能封装到函数中,所以先创建一个creatClock函数,在creatClock中再来编写具体代码。
建议在完成某一个前端功能时,应先分析功能的具体操作。再根据具体操作把实现功能的方法分成多个步骤,接下来一个步骤一个步骤去完成它。来看一下用js组合这样一串字符,需要哪些步骤:
1 调用date对象,获取计算机的本地时间
1.1 调用date对象
1.2 获取当前年份
1.3 获取当前月份,月份是从0开始计数,所以需要加1才是正确的月份
1.4 获取当前日期
1.5 获取当前小时
1.6 获取分钟
1.7 获取秒数
2. 格式化获取到的时间数据
2.1 单数字前添加字符串0,用以符合时钟格式
2.2 组合时间数据为字符串
3. 在clock元素中实时显示时间
3.1 获取clock元素
3.2 修改clock元素中的时间
3.3 使用定时器实时更新时间
具体代码如下:
function fnCreatClock(){
//声明时间相关变量
var dLocal,nYear,nMonth,nDate,nHours,nMinutes,nSeconds;
//1 获取计算机本地时间
function fnGetDate(){
//1.1 调用date对象
dLocal = new Date();
//1.2 获取当前年份
nYear = dLocal.getFullYear();
//1.3 获取当前月份,月份是从0开始计数,所以需要加1才是正确的月份
nMonth = dLocal.getMonth() + 1;
//1.4 获取当前日期
nDate = dLocal.getDate();
//1.5 获取当前小时
nHours = dLocal.getHours();
//1.6 获取分钟
nMinutes = dLocal.getMinutes();
//1.7 获取秒数
nSeconds = dLocal.getSeconds();
}
//2.1 封装一个函数,用于把单数字前添加字符串0,例如1改为01
function fnToDouble(num){
//声明一个返回结果
var sResult = '';
if(num<10){
//判断数字小于10则是单数字,需要在前面添加字符串0
sResult = '0' + num;
}else{
//数字为10以上转换为字符串
sResult = '' + num;
}
//返回格式化后的字符串
return sResult;
}
function fnFormatDate(){
//2.2 组合时间数据为字符串。本实例主要针对初学者,所以这里用的是最简单的格式化方式,即把所有数据用+号相连
return nYear + '-' + fnToDouble(nMonth) + '-' + fnToDouble(nDate) +
' ' + fnToDouble(nHours) + ':' + fnToDouble(nMinutes) + ':' + fnToDouble(nSeconds);
}
//3.1 获取clock元素
var eClock = document.getElementById('clock');
//获取时间
fnGetDate();
//3.2 修改clock元素中的时间
eClock.innerHTML = fnFormatDate();
//使用定时器实时更新时间
setInterval(function(){
//3.3 每