HTML如何显示当前动态时间

如何将当前动态时间显示在网页上，随着时间的变化，秒针自动跳转，显示完整日期和时间。
请看详细，本篇教你如何使用JavaScript将时间打印在HTML网页上。

操作方法

  • 01

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

  • 02

    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> 并保存。如图：

  • 03

    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(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> 如图：

  • 04

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

  • 05

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

  • 06

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

赞 (0)

相关推荐

  • ppt内如何插入动态时间

    如果您是soho一族,那么一定用ppt做过幻灯片.那么您是否在幻灯片中需要插入时间呢,而且如果今天做的幻灯片改天播放,插入的时间又不能是绝对时间,要根据播放时刻的时间为准呢,这就是ppt插入动态时间的 ...

  • Wget一直显示英国中部时间怎么解决?wget关闭进度输出

    xshell连接linux，Wget下载文件显示多行，进度条后面显示英国中部时间,非常让人郁闷。Wget工具下载就不停的刷屏，小编发现一个解决办法。原来这是由于汉字翻译导致的，只需要重新编译一下那个翻 ...

  • Excel 2007中正确显示日期和时间

    当在Excel单元格中键入日期或时间时，它会以默认的日期和时间格式显示。默认的日期和时间基于在 Windows 控制面板中指定的区域日期和时间设置，并会随着这些设置的更改而更改。可以用几种其他日期和时 ...

  • win7系统显示桌面悬停时间设置技巧避免出现透明现象

    相比较XP系统的任务栏，现在的win7系统的任务栏增加了一个显示桌面，只要点击一下，直接显示桌面。而系统默认的悬停时间是1秒，在使用过程中，不小心鼠标点击了显示桌面，然后有些程序正在运行，就会出现一片 ...

  • Excel2007中正确的显示日期和时间

    当在Excel单元格中键入日期或时间时，它会以默认的日期和时间格式显示。默认的日期和时间基于在 Windows 控制面板中指定的区域日期和时间设置，并会随着这些设置的更改而更改。可以用几种其他日期和时 ...

  • Win10如何显示多时区时钟？Win10系统同时显示多国时间的方法

    当我们将鼠标放在通知栏的时间上时,能看到时间的详细信息,而Win10系统中你不仅可以查看一个地区的时间,还可以同时查看其他国家和地区的时间,下面小编就给大家带来Win10系统同时显示多国时间的方法,一 ...

  • 让 history 命令显示日期和时间方法详解

    我们都对 history 命令很熟悉.它将终端上 bash 执行过的所有命令存储到 .bash_history 文件中,来帮助我们复查用户之前执行过的命令. 默认情况下 history 命令直接显示用 ...

  • potplayer左上角显示的播放时间关掉的方法

    打开视频左上角总是显示影片时间和进度,而自己又不需要,以前播放影片的时候就不会显示,那么该如何关掉呢? 方法: 1.我们把鼠标点击在播放器的屏幕上 然后按一下F5键,打开选项设置,如果你键盘的F5键像 ...

  • 手机网易云音乐中的朋友页显示推荐动态功能怎么关闭

    手机网易云音乐中的朋友页显示推荐动态功能怎么关闭

    网易云音乐是我们现在经常使用的听歌软件.今天小编就告诉大家网易云音乐中的朋友页显示推荐动态功能应该怎么关闭.具体如下:1. 首先我们先打开手机中的网易云音乐.2. 进入主界面之后点击左上方的" ...