零基础学做网站教程

当前位置:

如何在网站上制作一个动态更新时钟

我们在有些网站上看到会在网站的某个位置显示一个动态变化的时钟,它是一秒秒的变化。对于这种效果,我们自己做网站时也可以制作出来,只需要通过JS就可以很轻松的实现。

1

如何在网站上制作动态变化的时钟的方法:

第一步:在网站的需要显示时钟的网页,在</head>上方放入以下的JS代码:

<script>

window.onload=getTime;
function getTime(){
var today=new Date();
var year=today.getFullYear();
var month=today.getMonth()+1;
var day=today.getDay();
var hours=today.getHours();
var minutes=today.getMinutes();
var seconds=today.getSeconds();
if(minutes<10){
minutes="0"+minutes;
}
if(seconds<10){
seconds="0"+seconds;
}

var time =year+'年'+month+'月'+day+'日'+hours+":"+minutes+":"+seconds;

document.getElementById('clock').innerHTML=time;

setInterval("getTime()",1000)
}

</script>

代码解释:

window.onload=getTime;表示当网页载入时,调用函数变量getTime;
function getTime()创建一个函数,函数名为getTime;
var today=new Date(); 初始化时间,将当前的系统时间作为起始时间;
var year=today.getFullYear(); 获取当前的年份,四位数
var month=today.getMonth()+1;获取当前的月份,JS中月份的获取是从0开始时,所以要+1
var day=today.getDay();获取当前的日
var hours=today.getHours();获取当前的小时
var minutes=today.getMinutes();获取当前的分
var seconds=today.getSeconds();获取当前的秒
if(minutes<10){  //判断当前的分种小于10,就在前面加0
minutes="0"+minutes;
}
if(seconds<10){//判断当前的秒小于10,就在前面加0
seconds="0"+seconds;
}

var time =year+'年'+month+'月'+day+'日'+hours+":"+minutes+":"+seconds;//将年,月,日,时,分,秒连起来并赋值给变量time

document.getElementById('clock').innerHTML=time;//通过JS的DOM操作,把变量time插入到id为clock的位置

setInterval("getTime()",1000)//通过JS中的 setInterval()方法,每隔1000毫秒也就是1秒执行一个函数getTime

第二步:在需要显示动态变化的时间的位置,放一个空的DIV就可以了,注意ID必须为clock。

<div id="clock">  </div>

通过以上二步的操作,就可以在自己做的网站上面显示出一个动态变化的时钟了。当然为了简化网页的代码,你也可以创建一个JS文件,然后把第一步的JS代码放到JS文件中,然后通过JS的调用的方式 ,把JS文件调用到HTML网页中,这样就会代码简洁了很多。想在自己网站显示动态时钟效果的学习如何做网站的学员可以动手试一下。

Tags:

, , ,

上一课: 下一课:

发表评论

*

* 绝不会泄露


相关教程

  1. wordpress模板制作教程(五):边栏模板(sidebar.php)制作
  2. 网站右下角弹出广告信息的制作方法
  3. wordpress主题开发教程(八):文章页面模板(single.php)制作
  4. wordpress模板制作教程(十二):标签模板(tag.php)制作
  5. 懒人素材网(wordpress门户网站)制作案例
  6. 竞拍类网站怎么制作
  7. discuz模板制作调用标签大全
  8. 网站动态内容调用代码
  9. wordpress模板制作教程(十三):错误页面模板(404.php)制作
  10. wordpress主题制作(七):分类目录模板(archive.php)制作