HTML如何显示当前动态时间

如题所述

如何将当前动态时间显示在网页上,随着时间的变化,秒针自动跳转,显示完整日期和时间。

请看详细,本篇教你如何使用JavaScript将时间打印在HTML网页上。

1、搭建网页 利用已搭建的IIS本地服务器,在共享区域新建一个html文件,命名为index.html。如图: (IIS与本地服务器的搭建,请看引用)

2、植入html元素 用记事本打开index.html,完善html基本元素。 写入一下代码: html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html"/ title时间的动态显示/title /head body /body /html 并保存。如图:

3、写入JavaScript时间代码 在html头部写入获取时间的代码: script language="javascript" var t = null; t = setTimeout(time,1000);//开始执行 function time() { clearTimeout(t);//清除定时器 dt = new Date(); var y=dt.getYear()+1900; var mm=dt.getMonth()+1; var d=dt.getDate(); var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; var day=dt.getDay(); var h=dt.getHours(); var m=dt.getMinutes(); var s=dt.getSeconds(); if(h10){h="0"+h;} if(m10){m="0"+m;} if(s10){s="0"+s;} document.getElementById("timeShow").innerHTML = "现在的时间为:"+y+"年"+mm+"月"+d+"日"+weekday[day]+" "+h+":"+m+":"+s+""; t = setTimeout(time,1000); //设定定时器,循环执行 } /script 如图:

4、写入div标签 在内容部分写入div标签,并附上ID,用来加载时间的载体。 div id="timeShow" class="time1"/div 如图:

5、写入样式 在头部写入div的样式: style .time1{width:100%; height:50px; background:#FFF000; line-height:50px; text-align:center;} /style 并保存,如图:

6、加载网页 在浏览器输入192.168.1.2,查看编写的网页文件。 如图:

温馨提示:答案为网友推荐,仅供参考