学做网站培训课程介绍

当前位置:

html+js动态时钟钟表制作方法

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

1

在自己网站上使用html 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>
  2. 使用以下的HTML代码来调用显示动态时钟钟表。(如果对HTML不了解,可以学习一下html视频教程
    
    
    <div id="clock">  </div>

除了使用html+js制作动态时钟钟表之外,还可以创建一个JS文件,然后把第一步的JS代码放到JS文件中,然后通过JS的调用的方式 ,把JS文件调用到HTML网页中,这样就会代码简洁了很多。

发表评论

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

相关教程

  • 学做网站时,经常要修改代码,很多时候需要用到颜色代码,由于太多,不可能都记住,所以找到了一个带有中文颜色名称表示的颜色代码表,以便后期网页设
  • 常用的HTML标签有哪些 (132528 次浏览)
    什么是HTML标签HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML标签即是网页浏览器识别符,就像一个人名字张三、李四代表人的姓名一样。这里说
  • 如果我们的网站有港澳台的用户,那么网站特别好是能支持文字简繁互转,这样做能方便不同用户更好的阅读网站内容。那么如何在自己做网站时,实
  • 我们都知道在做网站时,加载的文件越少速度就会越快,包括CSS、JS、图片、数据库等等,特别是门户网站建设更是如此。要减少这些文件的载入,特别
  • 我们在有些网站上看到会在网站的某个位置显示一个动态变化的时钟,它是一秒秒的变化。对于这种效果,我们自己做网站时也可以制作出来,只需要通过JS就
  • 说起网站图标favicon.ico,大家都想到的是制作一个固定小图片来显示【方法见:如何制作网站图标favicon.ico】,很少知道网站图标可以做成一个动态的。
  • 这个动态数字时钟JS插件,可以实现在网页上制作动态实时变化的数字时钟,它自动同步时间,并且一秒一秒变化时间。效果如下图:使用方法首
  • 纯代码Wordpress前台投稿功能制作方法,很多建网站学员学习了Wordpress教程后,使用Wordpress 程序建了网站。但如果每天都是自己更新文章,感觉会有点