HTML如何显示当前动态时间

2025-10-11 11:24:13

1、1、搭建网页

利用已搭建的IIS本地服务器，在共享区域新建一个html文件，命名为index.html。如图：

（IIS与本地服务器的搭建，请看引用）

0如何建立局域网共享目录

170怎么把一台电脑设置为局域网服务器

HTML如何显示当前动态时间

2、2、植入html元素

用记事本打开index.html，完善html基本元素。

写入一下代码：

<head>

<title>时间的动态显示</title>

</head>

<body>

</body>

</html>

并保存。如图：

HTML如何显示当前动态时间

3、3、写入JavaScript时间代码

在html头部写入获取时间的代码：

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(h<10){h="0"+h;}

if(m<10){m="0"+m;}

if(s<10){s="0"+s;}

document.getElementById("timeShow").innerHTML = "现在的时间为："+y+"年"+mm+"月"+d+"日"+weekday[day]+"

"+h+":"+m+":"+s+"";

t = setTimeout(time,1000); //设定定时器，循环执行

}

</script>

如图：

HTML如何显示当前动态时间

4、4、写入div标签

在内容部分写入div标签，并附上ID，用来加载时间的载体。

如图：

HTML如何显示当前动态时间

5、5、写入样式

在头部写入div的样式：

<style>

.time1{width:100%; height:50px; background:#FFF000; line-height:50px; text-align:center;}

</style>

并保存，如图：

HTML如何显示当前动态时间

6、6、加载网页

在浏览器输入192.168.1.2，查看编写的网页文件。

如图：

HTML如何显示当前动态时间

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。