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时的幅度会有点大,读者有空的话可以想想换种思路来实现。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
原文出处:https://blog.csdn.net/gegestst112/article/details/105160438
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03
- 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签...2016-01-02
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢?下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示,需要的朋友参考下...2016-03-03
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- 这次文章要给大家介绍的是node.JS md5加密中文与php结果不一致怎么办,不知道具体解决办法的下面跟小编一起来看看。 因项目需要,需要Node.js与PHP做接口调用,发现nod...2017-07-06
- 系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解,感兴趣的朋友一起学习吧...2015-12-29
- 本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码,有需要的小伙伴可以参考下。...2016-01-20