在页面中输出当前客户端时间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 相关文章推荐
js判断字符长度以及中英文数字等
Dec 31 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
浅谈页面装载js及性能分析方法
Dec 09 Javascript
jQuery中toggleClass()方法用法实例
Jan 05 Javascript
关于JavaScript限制字数的输入框的那些事
Aug 14 Javascript
JavaScript自定义文本框光标
Mar 05 Javascript
vue仿element实现分页器效果
Sep 13 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
Oct 19 Javascript
vue中使用protobuf的过程记录
Oct 26 Javascript
JS实现简易图片自动轮播
Oct 16 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
基于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判断是否为json格式的方法
2014/03/04 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
php中__toString()方法用法示例
2016/12/07 PHP
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
jQuery中element选择器用法实例
2014/12/29 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
jQuery图片轮播插件——前端开发必看
2016/05/31 Javascript
angular.js之路由的选择方法
2016/09/24 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
webpack v4 从dev到prd的方法
2018/04/02 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
IE9 elementUI文件上传的问题解决
2018/10/17 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
[01:18]PWL开团时刻DAY10——一拳超人
2020/11/11 DOTA
python处理cookie详解
2014/02/07 Python
python统计文本文件内单词数量的方法
2015/05/30 Python
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
windows下安装Python和pip终极图文教程
2017/03/05 Python
详解django三种文件下载方式
2018/04/06 Python
Python箱型图处理离群点的例子
2019/12/09 Python
Python 序列化和反序列化库 MarshMallow 的用法实例代码
2020/02/25 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
css3中背景尺寸background-size详解
2014/09/02 HTML / CSS
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
建筑经济管理专业求职信分享
2014/01/06 职场文书
经典广告词大全
2014/03/14 职场文书
python的变量和简单数字类型详解
2021/09/15 Python