在页面中输出当前客户端时间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]点出统计器
Oct 11 Javascript
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
防止按钮在短时间内被多次点击的方法
Mar 10 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
May 28 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
js中实例与对象的区别讲解
Jan 21 Javascript
微信小程序 slot踩坑的解决
Apr 01 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 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
晶体管来复再生式二管收音机
2021/03/02 无线电
PHP递归调用的小技巧讲解
2013/02/19 PHP
php中文验证码实现示例分享
2014/01/12 PHP
php数据访问之查询关键字
2016/05/09 PHP
Jquery实现简单的动画效果代码
2012/03/18 Javascript
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
easyui window refresh 刷新两次的解决方法(推荐)
2016/05/18 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
jQuery中slidedown与slideup方法用法示例
2016/09/16 Javascript
Angular.Js之Scope作用域的学习教程
2017/04/27 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
使用node.js对音视频文件加密的实例代码
2017/08/30 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
vue2.0使用swiper组件实现轮播效果
2017/11/27 Javascript
Python中的choice()方法使用详解
2015/05/15 Python
Python 正则表达式入门(中级篇)
2016/12/07 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
学Python 3的理由和必要性
2019/11/19 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
python中pow函数用法及功能说明
2020/12/04 Python
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
银行门卫岗位职责
2013/12/29 职场文书
大堂副理的岗位职责范文
2014/02/17 职场文书
2014年两会学习心得范例
2014/03/17 职场文书
创先争优承诺书范文
2014/03/31 职场文书
课外科技活动总结
2014/08/27 职场文书
个人贷款收入证明
2014/10/26 职场文书
2014年工程师工作总结
2014/11/25 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
商业计划书格式、范文
2019/03/21 职场文书
js 实现验证码输入框示例详解
2022/09/23 Javascript