js实现电子时钟功能
电子时钟是网上常见的功能，在学习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 每秒更新时间
fnGetDate();
//3.3 修改clock元素中的时间
eClock.innerHTML = fnFormatDate();
},1000);
}
fnCreatClock();
此时的效果如图所示：
现在做出来的时钟看起来感觉有点简陋，也可以尝试把数字换成图片，这样所呈现效果就会好很多。这里暂时忽略日期部分，只为时间部分添加图片效果，还是先看一下需要哪些html元素，代码如下：
<div id="imgClock" class="clock_container"><!--图片时钟元素--> <div id="imgHours" class="img_box"> <span class="img_0"></span> <span class="img_0"></span> </div> <div class="img_point"></div> <div id="imgMinutes" class="img_box"> <span class="img_0"></span> <span class="img_0"></span> </div> <div class="img_point"></div> <div id="imgSeconds" class="img_box"> <span class="img_0"></span> <span class="img_0"></span> </div> </div>
还需要准备0-9共10张图片，可以在我随教程上传的资源中下载或自己制作。css代码可以自己根据需要编写，也可以复制以下代码使用：
.clock_container{
margin-top:60px;
font-size:0;
text-align:center;
}
.clock_container div{
display:inline-block;
}
.clock_container .img_box span{
display:inline-block;
width:80px;
height:100px;
margin:0 2px;
border-radius:8px;
background-color:#77a6b6;
}
.clock_container .img_0{
background:url(img/img_0.png) no-repeat;
}
.clock_container .img_1{
background:url(img/img_1.png) no-repeat;
}
.clock_container .img_2{
background:url(img/img_2.png) no-repeat;
}
.clock_container .img_3{
background:url(img/img_3.png) no-repeat;
}
.clock_container .img_4{
background:url(img/img_4.png) no-repeat;
}
.clock_container .img_5{
background:url(img/img_5.png) no-repeat;
}
.clock_container .img_6{
background:url(img/img_6.png) no-repeat;
}
.clock_container .img_7{
background:url(img/img_7.png) no-repeat;
}
.clock_container .img_8{
background:url(img/img_8.png) no-repeat;
}
.clock_container .img_9{
background:url(img/img_9.png) no-repeat;
}
.clock_container .img_point{
width:60px;
height:100px;
background:url(img/img_point.png) no-repeat center;
}
按照惯例，完成功能前先整理步骤。这里再多添加一个步骤，在imgClock元素中来完成图片美化后的时钟效果，步骤如下：
4、在imgClock元素中，用图片作为背景实时修改时间
4.1 分别获取时(imgHours)、分(imgMinutes)、秒(imgSeconds)元素
4.2 根据时间修改时、分、秒元素的class，用来改变背景样式
4.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;
}
//获取时间
fnGetDate();
//4.1 获取图片背景的小时元素
var eImgHours = document.getElementById('imgHours');
//获取小时的第一个元素
var eHours1 = eImgHours.getElementsByTagName('span')[0];
//获取小时的第二个元素
var eHours2 = eImgHours.getElementsByTagName('span')[1];
//4.1 获取图片背景的分钟元素
var eImgMinutes = document.getElementById('imgMinutes');
//获取分钟的第一个元素
var eMinutes1 = eImgMinutes.getElementsByTagName('span')[0];
//获取分钟的第二个元素
var eMinutes2 = eImgMinutes.getElementsByTagName('span')[1];
//4.1 获取图片背景的秒元素
var eImgSeconds = document.getElementById('imgSeconds');
//获取秒的第一个元素
var eSeconds1 = eImgSeconds.getElementsByTagName('span')[0];
//获取秒的第二个元素
var eSeconds2 = eImgSeconds.getElementsByTagName('span')[1];
// 4.2 根据时间修改时、分、秒元素的class，用来改变背景样式
function fnChangeImgBg(){
eHours1.className = 'img_' + fnGetImgNum(nHours,0);
eHours2.className = 'img_' + fnGetImgNum(nHours,1);
eMinutes1.className = 'img_' + fnGetImgNum(nMinutes,0);
eMinutes2.className = 'img_' + fnGetImgNum(nMinutes,1);
eSeconds1.className = 'img_' + fnGetImgNum(nSeconds,0);
eSeconds2.className = 'img_' + fnGetImgNum(nSeconds,1);
}
//此函数用来计算根据当前时间的数字
function fnGetImgNum(num,bit){
//声明一个返回结果
var nResult = 0;
//判断是个位还是十位，0代表十位，1代表个位
if(bit===0){
//使用Math.floor可以向下取整，即不管是0.1还是0.9，都是取整数0。此方法用来获取时间的十位
nResult = Math.floor(num/10);
}else{
//通过fnToDouble函数把时间格式化双字符串，再取后面一个字符获取个位，前面的+号用于转换为数字
nResult = +fnToDouble(num).slice(1);
}
return nResult;
}
fnChangeImgBg();
//使用定时器实时更新时间
setInterval(function(){
//3.3 每秒更新时间
fnGetDate();
fnChangeImgBg(); //4.3 使用定时器更新元素背景
},1000);
}
fnCreatClock();
此时的效果比单独的文字还是会增色不少，如图所示：
我想要求效果再漂亮一点，让图片不是很突兀的改变，而是有一个滚动的动画。要实现这样的效果，图片需要改成一张0-9的竖形排列图，也可以从我随教程的资源中下载。通过修改元素背景图片的位置，即可产生滚动的动画效果。
此效果需要的html元素如下所示：
<div id="animationClock" class="clock_container"><!--动画时钟元素--> <div id="animationHours" class="animation_box"> <span></span> <span></span> </div> <div class="img_point"></div> <div id="animationMinutes" class="animation_box"> <span></span> <span></span> </div> <div class="img_point"></div> <div id="animationSeconds" class="animation_box"> <span></span> <span></span> </div> </div>
在css里面给每一个元素加上同一个背景图片，需要加上transition过渡样式用来产生动画效果，如下所示：
.clock_container .animation_box span{
display:inline-block;
width:80px;
height:100px;
margin:0 2px;
border-radius:8px;
background-color:#77a6b6;
background-image:url(img/img_all.png);
background-repeat:no-repeat;
transition:.2s;
}
再随着时间改变给每一个时间元素修改背景图片的位置，即修改background-repeat-y的样式即可。按照惯例，还是先列步骤：
5、在animationClock元素中，滚动动画显示时钟的实时变化
5.1 分别获取时(imgHours)、分(imgMinutes)、秒(imgSeconds)元素
5.2 根据时间修改时、分、秒元素的背景图片位置
5.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;
}
//获取时间
fnGetDate();
//此函数用来计算根据当前时间的数字
function fnGetImgNum(num,bit){
//声明一个返回结果
var nResult = 0;
//判断是个位还是十位，0代表十位，1代表个位
if(bit===0){
//使用Math.floor可以向下取整，即不管是0.1还是0.9，都是取整数0。此方法用来获取时间的十位
nResult = Math.floor(num/10);
}else{
//通过fnToDouble函数把时间格式化双字符串，再取后面一个字符获取个位，前面的+号用于转换为数字
nResult = +fnToDouble(num).slice(1);
}
return nResult;
}
//5.1 获取动画时钟的小时元素
var eAnimationHours = document.getElementById('animationHours');
//获取小时的第一个元素
var eHours3 = eAnimationHours.getElementsByTagName('span')[0];
//获取小时的第二个元素
var eHours4 = eAnimationHours.getElementsByTagName('span')[1];
//5.1 获取动画时钟的分钟元素
var eAnimationMinutes = document.getElementById('animationMinutes');
//获取分钟的第一个元素
var eMinutes3 = eAnimationMinutes.getElementsByTagName('span')[0];
//获取分钟的第二个元素
var eMinutes4 = eAnimationMinutes.getElementsByTagName('span')[1];
//5.1 获取动画时钟的秒元素
var eAnimationSeconds = document.getElementById('animationSeconds');
//获取秒的第一个元素
var eSeconds3 = eAnimationSeconds.getElementsByTagName('span')[0];
//获取秒的第二个元素
var eSeconds4 = eAnimationSeconds.getElementsByTagName('span')[1];
// 5.2 根据时间修改时、分、秒元素的背景图片位置
function fnAnimationBg(){
eHours3.style.backgroundPositionY = -fnGetImgNum(nHours,0) * 100 + 'px';
eHours4.style.backgroundPositionY = -fnGetImgNum(nHours,1) * 100 + 'px';
eMinutes3.style.backgroundPositionY = -fnGetImgNum(nMinutes,0) * 100 + 'px';
eMinutes4.style.backgroundPositionY = -fnGetImgNum(nMinutes,1) * 100 + 'px';
eSeconds3.style.backgroundPositionY = -fnGetImgNum(nSeconds,0) * 100 + 'px';
eSeconds4.style.backgroundPositionY = -fnGetImgNum(nSeconds,1) * 100 + 'px';
}
fnAnimationBg();
//使用定时器实时更新时间
setInterval(function(){
//3.3 每秒更新时间
fnGetDate();
//5.3 使用定时器更新元素背景图片位置
fnAnimationBg();
},1000);
}
fnCreatClock();
本实例中，动画在数字变为0时的幅度会有点大，读者有空的话可以想想换种思路来实现。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript实现简单的时钟实例代码
复制代码 代码如下: <html> <head> <title>JS实现简单的时钟</title><script> function displayTime() { document.getElementById("time").innerHTML = new Date().toTimeString(); } setInterval(displayTime,1000); // 每隔1秒钟调用dis
-
js时钟翻牌效果实现代码分享
先给大家上运行效果图,看看是不是特别棒! 这一张是小编抓拍时钟翻牌时的效果图: 为大家分享的JavaScript时钟翻牌效果代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Create an Animated Flip Down Clock</title> <link rel=&quo
-
基于javascript实现动态时钟效果
本文实例讲解了javascript动态时钟效果的实现方法,分享给大家供大家参考,具体内容如下 实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <
-
html5 canvas js(数字时钟)实例代码
复制代码 代码如下: <!doctype html><html> <head> <title>canvas dClock</title> </head> <body> <canvas id = "clock" width = "500px" height = "200px"> 您的浏览
-
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
时间对象作为非常重要的一个对象,对我们学.net的人来说,并不是很重要,但这并不意味着我们可以忽略,事实上,用得着的时候还是很多的,如果完全依赖JS处理时间,那是会出问题的,因为JS总是假设本地机器上的时间是正确的.还有个原因,他总按照GTM市区来计量.我们只是返回当前date对象的副本,我们即便是修改,那也不会对对象本身有任何影响. 演示一:动态的时钟(来个复杂的) 11:55:13 演示二:显示完整的一些方法(事实上我很讨厌有些格式了) Mon Oct 1 22:35:25 UTC+0800
-
js实现一个简单的数字时钟效果
效果图: 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>一个简单的数字时钟</title> <script type="text/javascript" charset="utf-8
-
JavaScript电子时钟倒计时第二款
本文实例讲解了JavaScript电子时钟倒计时的详细代码,分享给大家供大家参考,具体内容如下 JavaScript时间类 1.获取时分秒: getHours() getMinutes(); getSeconds(); 2.获取年月日: getFullYear(); getMonth() + 1;//获取的月份需要+1: getDate(); //日期 getDay(); //获取的是星期,0-->星期天 效果图: 具体代码: <!doctype html> <html> &
-
JavaScript实现抖音罗盘时钟
本文实例为大家分享了JavaScript实现抖音罗盘时钟的具体代码,供大家参考,具体内容如下 其实很早以前就想发了,很多东西其实并不难,只要多动手动脑就行了,下面直接上代码,其他的自己下去慢慢研究吧! HTML部分代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" co
-
JavaScript电子时钟倒计时
本文实例讲解了JavaScript电子时钟倒计时的详细代码,分享给大家供大家参考,具体内容如下 JavaScript时间类 1.获取时分秒: getHours() getMinutes(); getSeconds(); 2.获取年月日: getFullYear(); getMonth() + 1;//获取的月份需要+1: getDate(); //日期 getDay();
-
五步轻松实现JavaScript HTML时钟效果
学了一段时间的HTML.CSS和JS后,给大家做一款漂亮的不像实力派的HTML时钟,先看图: 涉及到的知识点有: CSS3动画.DOM操作.定时器.圆点坐标的计算(好多人是不是已经还给自己的老师了~) 接下来,我们用5步来制作它 step1.准备HTML 首先,我们需要准备HTML结构,背景.表盘.指针(时针.分针.秒针).数字. <div id="clock"> <div class="bg"> <div class="p
-
一个简易时钟效果js实现代码
本文实例为大家分享了js时钟特效 的具体代码,供大家参考,具体内容如下 js代码 var canvas = document.getElementById("clock"); var clock = canvas.getContext("2d"); function zhong() { clock.save(); //开始画外层圆 clock.translate(200, 200); clock.strokeStyle = 'black'; clock.lineWi
-
Javascript实现动态时钟效果
本文实例为大家分享了js实现动态时钟效果的具体代码,供大家参考,具体内容如下 1.css代码 <style type="text/css"> #box{ width:200px; height:200px; background:pink; margin:100px auto; line-height:200px; text-align:center; border-radius:50%; box-shadow:0 0 100px pink; color:black; }