很多网页在顶端或者其他位置会显示时间日期,并且还可以自动变动。
下面就通过代码实例简单介绍一下如何实现此功能。
代码实例如下:[HTML] 纯文本查看 复制代码运行代码
蚂蚁部落
var week;
var weeks;
var date;
var time;
var hour;
var minute;
var second;
function getTimeNow() {
time=new Date();
hour=time.getHours();
minute=time.getMinutes();
second=time.getSeconds();
weeks=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
week=weeks[time.getDay()];
date=(time.getFullYear())+"年"+(time.getMonth()+1)+"月"+time.getDate()+"日"+" ";
nowTime.innerHTML ="当前时间:"+date+week+" "+hour+":"+minute+":"+second;
}
window.οnlοad=function(){
var nowTime=document.getElementById("nowTime");
setInterval("getTimeNow()",1000);
}
代码实现了我们的功能,能够实时的显示当前系统的日期和时间。
一.实现原理:
原理非常简单,首先创建一个函数getTimeNow,当运行此函数时,将当前的年月日时间写入div,获取年月日的方式都是采用的Date对象的方法。然后再使用setInterval方法每隔一秒执行一次getTimeNow函数,于是就可以事实的在div中显示当前的日期时间。
二.代码注释:
(1).var week,声明变量,用语存放周,下面的几个变量声明原理也是如此。
(2).function getTimeNow(){},此函数可以获取当前系统的日期时间,并写入div。
(3).time=new Date();,创建当前时间对象。
(4).hour=time.getHours(),获取当前时间的小时。
(5).minute=time.getMinutes(),获取当前时间的分钟。
(6).second=time.getSeconds(),获取当前时间的秒。
(7).weeks=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],创建一个数字,数组中的元素是星期。
(8).week=weeks[time.getDay()],getDay()函数可以翻译0-6的值,利用这个特点,可以取得当前是星期几。
(9).date=(time.getFullYear())+"年"+(time.getMonth()+1)+"月"+time.getDate()+"日"+" ",字符串连接,将当前的年月日连接起来。
(10).nowTime.innerHTML ="当前时间:"+date+week+" "+hour+":"+minute+":"+second,将年月日时间和日期写入div。
三.相关阅读:
(2). setInterval方法参阅JavaScriptsetInterval()一章节。