在页面中输出当前客户端时间javascript实例代码
时间对象(Date())比较简单,本文旨在为初学者入门使用,大牛可略过!
本文承接基础知识实例,说一下实例的要求:
在页面中输出当前客户端时间(2015年1月1日星期一10:10:10这样的格式),每过一秒中页面不刷新,但是时间自动更新(用两种定时器方法都可以实现),鼠标点击时间,如果原先运动则停止,如果停止则继续运动;
要求基本上可分为2部分:一是不刷新自动更新时间,二是点击时间停止或更新时间
好,那我们还是老规矩,一步一步来,既然是时间,那就会用到时间对象 new Date();
var nowDate = new Date(); var time = { year : nowDate.getFullYear(), month : nowDate.getMonth(), day : nowDate.getDate(), week : nowDate.getDay(), hour : nowDate.getHours(), minute : nowDate.getMinutes(), second : nowDate.getSeconds() };
获取时间对象我是用对象的方式来获取的,这样方便调用,结构也比较清晰,不必一个个定义,比较推荐这种写法,得到相应的值也很方便,比如获取年份:time.year;
得到我们需要获取的数据之后,然后要处理的是星期问题,因为现在获取的星期的值还是1,2,3,4,5,6,7,这里我们需要转换一下,将它变为我们看得到的文字信息,这里我们用一个函数包起来:
function Week(num){ switch(num){ case 1 : return '星期一'; break; case 2 : return '星期二'; break; case 3 : return '星期三'; break; case 4 : return '星期四'; break; case 5 : return '星期五'; break; case 6 : return '星期六'; break; case 7 : return '星期日'; break; }; }
这里我用的是swicth case组合,这个判断条件特别适合做类似于星期这样的判断,这里就不多说了,当然,你也可以用if else组合来判断,看个人习惯问题,还有一个需要解决的问题就是,现在获取的分和秒在0-9的时候,是显示的0-9的数字,
不是我们常见的00-09这样的显示,为了将这样的时间变成我们熟悉的样子,我们同样可以写一个函数,将它转换一下:
function twoNum(num){ return num = num<10 ? '0'+num : num; }
这里我用的是三元运算,如果对三元运算不是很了解的,看下面的代码,是一个意思:
function twoNum(num){ if(num<10){ num = '0'+num; } return num; }
好万事俱备,只欠东风了,我们先把这些代码整合起来,这样更方便使用:
function Timer(obj){ var nowDate = new Date(); var time = { year : nowDate.getFullYear(), month : nowDate.getMonth(), day : nowDate.getDate(), week : nowDate.getDay(), hour : nowDate.getHours(), minute : nowDate.getMinutes(), second : nowDate.getSeconds() }; function Week(num){ switch(num){ case 1 : return '星期一'; break; case 2 : return '星期二'; break; case 3 : return '星期三'; break; case 4 : return '星期四'; break; case 5 : return '星期五'; break; case 6 : return '星期六'; break; case 7 : return '星期日'; break; }; } function twoNum(num){ return num = num<10 ? '0'+num : num; } obj.innerHTML = time.year+'年'+time.month+'月'+time.day+'日 '+Week(time.week)+' '+time.hour+':'+twoNum(time.minute)+':'+twoNum(time.second); }
这个函数应该能懂吧,传一个obj对象是为了能把时间在这个对象里面输出,但此时输出的时间还只是一个静态时间,页面不刷新,根本不会走,所以,我们接下来就来实现自动更新时间的功能,首先我们先给一个容器:
<div id="box"></div>
要实现时间自动更新,就需要使用定时器(setInterval() 或setTimeout()),这两个方法有点不一样,第一个是一直执行,除非清除定时器,第二个是只执行一次就不执行了,如果想要它一直执行,可以考虑用递归调用的方法,此方法就不在这里写了
我们选择用第一种:
var oBox = document.getElementById("box"); //获取元素 Timer(oBox); //这里需要先执行一下,因为如果不先执行,定时器会有一个延迟1秒执行,看上去就感觉慢了一秒出来一样 oBox.timer = setInterval(function(){ //oBox.timer这种写法是为了减少外面全局变量对定时器的影响,用元素的自定义属性还可以避免命名冲突 Timer(oBox); },1000);
到这里,一个在页面上显示的时间就可以自动更新显示了,但是我们还有一个要求,就是点击时间,时间要停止,再点击,时间又恢复更新,那这怎么做呢?为了便于理解,我给大家举个例子,应该就能明白,比如说一个灯,我按开关的时候,灯就亮了,我再按开关,灯就灭了,是不是跟我们的要求很像,所以我们设一个开关就能实现我们要的效果:
var offOn = true; oBox.onclick = function(){ if(offOn){ clearInterval(oBox.timer); offOn=false; }else{ oBox.timer = setInterval(function(){ Timer(oBox); },1000); offOn = true; } }
到这里,所以的功能就都实现了,你以为就这样就结束了吗?当然。。。不是,出于我们程序猿对代码的严谨态度,很多地方都是可以做优化的,所有的代码整理优化如下:
var oBox = document.getElementById("box"); var offOn = true; Timer(oBox); function showTime(){ oBox.timer = setInterval(function(){ Timer(oBox); },1000); } showTime(); oBox.onclick = function(){ offOn ? clearInterval(oBox.timer) : showTime(); offOn=!offOn; } function Timer(obj){ var nowDate = new Date(); var time = { year : nowDate.getFullYear(), month : nowDate.getMonth(), day : nowDate.getDate(), week : nowDate.getDay(), hour : nowDate.getHours(), minute : nowDate.getMinutes(), second : nowDate.getSeconds() }; function Week(num){ switch(num){ case 1 : return '星期一'; break; case 2 : return '星期二'; break; case 3 : return '星期三'; break; case 4 : return '星期四'; break; case 5 : return '星期五'; break; case 6 : return '星期六'; break; case 7 : return '星期日'; break; }; } function twoNum(num){ return num = num<10 ? '0'+num : num; } obj.innerHTML = time.year+'年'+time.month+'月'+time.day+'日 '+Week(time.week)+' '+time.hour+':'+twoNum(time.minute)+':'+twoNum(time.second); }
里面用到的几处三元运算和取反等操作,请好好的揣摩领悟一下!
到这里,你以为就这样就结束了吗?当然。。。不是,说到显示时间,这只是时间对象应用的九牛一毛,更多的应用应该是倒计时的应用,比如说团购网站,比如说验证码的倒计时等等,但是今天时间有限,这次就不在这里细说倒计时的功能了,我会单独开一片博客讲解倒计时的一些应用方法,供大家参考学习,我觉得还是有必要说说的,好了,今天就到这里!
关于在页面中输出当前客户端时间javascript实例代码的相关知识就给大家介绍多,希望对大家有所帮助!
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码,有需要的小伙伴可以参考下。...2016-01-20
- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 这次文章要给大家介绍的是node.JS md5加密中文与php结果不一致怎么办,不知道具体解决办法的下面跟小编一起来看看。 因项目需要,需要Node.js与PHP做接口调用,发现nod...2017-07-06
- 系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解,感兴趣的朋友一起学习吧...2015-12-29
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢?下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示,需要的朋友参考下...2016-03-03
- v-for标签可以用来遍历数组,将数组的每一个值绑定到相应的视图元素中去,下面这篇文章主要给大家介绍了关于在Vue.js中轻松解决v-for执行出错的三个方案,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。...2017-06-15
- 使用require('crypto')调用加密模块。加密模块需要底层系统提供OpenSSL的支持。它提供了一种安全凭证的封装方式,可以用于HTTPS安全网络以及普通HTTP连接。该模块还提供了一套针对OpenSSL的hash(哈希),hmac(密钥哈希),cipher...2014-06-07
- 这篇文章主要教大家如何利用Bootstrap3制作图片轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-05-14