学做网站培训课程介绍

当前位置:

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代码HTML(Hyper Text Mark-up Language )即超文本标记语言,是 WWW 的描述语言,由 Tim Berners-lee提出。只要使用鼠标在某一文档中点
  • 常用的HTML标签有哪些 (136158 次浏览)
    什么是HTML标签HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML标签即是网页浏览器识别符,就像一个人名字张三、李四代表人的姓名一样。这里说
  • 如果我们的网站有港澳台的用户,那么网站特别好是能支持文字简繁互转,这样做能方便不同用户更好的阅读网站内容。那么如何在自己做网站时,实
  • 我们都知道在做网站时,加载的文件越少速度就会越快,包括CSS、JS、图片、数据库等等,特别是门户网站建设更是如此。要减少这些文件的载入,特别
  • 这里所谓的链接就是指网址,一般我们也会叫他url。动态链接:https://www.xuewangzhan.net/?p=388,静态链接:https://www.xuewangzhan.net/zichu
  • 说起网站图标favicon.ico,大家都想到的是制作一个固定小图片来显示【方法见:如何制作网站图标favicon.ico】,很少知道网站图标可以做成一个动态的。
  • 我们在有些网站上看到会在网站的某个位置显示一个动态变化的时钟,它是一秒秒的变化。对于这种效果,我们自己做网站时也可以制作出来,只需要通过JS就
  • 我们在有些网站上看到会在网站的某个位置显示一个动态变化的时钟,它是一秒秒的变化。对于这种效果,我们自己做网站时也可以制作出来,只需要通过JS就
  • 纯代码Wordpress前台投稿功能制作方法,很多建网站学员学习了Wordpress教程后,使用Wordpress 程序建了网站。但如果每天都是自己更新文章,感觉会有点
  • 很多网站都有对联广告,当我们打开它的网站的时候,会在屏幕的两边自动的出现二个对联广告,显的很醒目。网站对联广告对于做cpa,cps的朋友有很大