在页面中输出当前客户端时间javascript实例代码


Posted in Javascript onMarch 02, 2016

时间对象(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实例代码的相关知识就给大家介绍多,希望对大家有所帮助!

Javascript 相关文章推荐
比较简单的一个符合web标准的JS调用flash方法
Nov 29 Javascript
jquery autocomplete自动完成插件的的使用方法
Aug 07 Javascript
JS保存和删除cookie操作 判断cookie是否存在
Nov 13 Javascript
javascript计算用户打开网页的停留时间
Jan 09 Javascript
js获得参数的getParameter使用示例
Feb 26 Javascript
JavaScript常用脚本汇总(一)
Mar 04 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 Javascript
js实现登录验证码
Dec 22 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 Javascript
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
JS常用跨域方法实现原理解析
Dec 09 Javascript
基于jQuery实现仿51job城市选择功能实例代码
Mar 02 #Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 #Javascript
js密码强度实时检测代码
Mar 02 #Javascript
js+css实现回到顶部按钮(back to top)
Mar 02 #Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 #Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
Mar 01 #Javascript
jquery自定义右键菜单、全选、不连续选择
Mar 01 #Javascript
You might like
php类
2006/11/27 PHP
php 格式化数字的时候注意数字的范围
2010/04/13 PHP
PHP正确解析UTF-8字符串技巧应用
2012/11/07 PHP
PHP中的Memcache详解
2014/04/05 PHP
php实现的百度搜索某地天气的小偷代码
2014/04/23 PHP
ThinkPHP安装和设置
2015/07/27 PHP
Yii实现简单分页的方法
2016/04/29 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
PHP 多任务秒级定时器的实现方法
2018/05/13 PHP
Javascript计算时间差的函数分享
2011/07/04 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
vue实现axios图片上传功能
2019/08/20 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
vue + el-form 实现的多层循环表单验证
2020/11/25 Vue.js
python基础教程之Filter使用方法
2017/01/17 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
解决python执行不输出系统命令弹框的问题
2019/06/24 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
Python字典底层实现原理详解
2019/12/18 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
欧洲领先的技术商店:eibmarkt.com
2019/05/10 全球购物
Linux文件操作命令都有哪些
2015/02/27 面试题
工会主席岗位责任制
2014/02/11 职场文书
宿舍保安职务说明书
2014/02/25 职场文书
岗位说明书标准范本
2014/07/30 职场文书
购房意向书
2014/08/30 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书