学做网站培训课程介绍

当前位置:

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

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

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

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

  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

  2. 第二步:在需要显示动态变化的时间的位置,放一个空的DIV就可以了,注意CSS选择器必须为id="clock"。(相关知识:CSS视频教程
    <div id="clock"> </div>

通过以上二步的操作,就可以在自己做的网站上面显示出一个动态变化的时钟了。

当然为了简化网页的代码,你也可以创建一个JS文件,然后把第一步的JS代码放到JS文件中,然后通过JS的调用的方式 ,把JS文件调用到HTML网页中,这样就会代码简洁了很多。

想在自己网站显示动态时钟效果的学习如何做网站的学员可以动手试一下,如果你对网站一点不了解,推荐大家先学习建站基础知识

类似教程

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 我们在有些网站上看到会在网站的某个位置显示一个动态变化的时钟,它是一秒秒的变化。对于这种效果,我们自己做网站时也可以制作出来,只需要通过JS就
  • 说起网站图标favicon.ico,大家都想到的是制作一个固定小图片来显示【方法见:如何制作网站图标favicon.ico】,很少知道网站图标可以做成一个动态的。
  • 很多学习建网站的同学都会注意到学做网站论坛近期在网站导航上添加了一个小图标“热”,它不停的在导航上跳动,当浏览者一进入网站首页时就会被它所吸引
  • 各类微博的流量很大,如果自己网站内容能够同步更新到自己的微博上,可以让更多的人看到自己网站上的内容了。如何将自己网站内容同步更新到微
  • 在wordpress模板制作时,我们需要根据不同的情况,进行页面的判断来显示不同的内容。下面是自己做网站论坛把wordpress模板制作教程中常用判断代码汇总
  • wordpress程序自带在程序版本检测功能,当你建网站时使用的WP程序不是最新版本时,WP程序会在网站后台出现如下图的版本更新提示。由于WORDPRE
  • 我们在有些网站上看到会在网站的某个位置显示一个动态变化的时钟,它是一秒秒的变化。对于这种效果,我们自己做网站时也可以制作出来,只需要通过JS就
  • 这个动态数字时钟JS插件,可以实现在网页上制作动态实时变化的数字时钟,它自动同步时间,并且一秒一秒变化时间。效果如下图:使用方法首