首页 > 语言 > JavaScript > 正文

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

2024-05-06 15:00:39
字体:
来源:转载
供稿:网友

时间对象(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);}            
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选