当前位置：首页 > news >正文

DOM编程-显示网页时钟

news 2026/3/27 19:30:24

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>显示网页时钟</title>
   </head>
   <body bgcolor="antiquewhite">
       <script type="text/javascript">
           /*
               关于JS内置的支持类：Date，可以用来获取时间
           */
           // 获取系统当前时间
           var nowTime = new Date();
           // 将获取到的时间输出到网页中显示
           document.write(nowTime);

           // 不喜欢上面的日期格式，转换成本地日期格式
           nowTime = nowTime.toLocaleString();
           document.write("<br />"); //这是在JS当中的换行，在JS代码中不能直接写<br/>
           document.write(nowTime);

           // 当以上格式还不是自己喜欢的，可以通过日期获得年月日等信息，自己制定日期格式
           var nowTime = new Date();
           var year = nowTime.getFullYear();   //获取完整的年份信息
           var month = nowTime.getMonth();       //获取月份信息为0~11，所以正常月份需要加1
           var day = nowTime.getDate();       //获取日信息
           var dayofweek = nowTime.getDay();   //这是获取一周的第几天[0~6]

           // 输出自己想要的日期
           document.write("<br />");
           document.write(year + "年" + (month + 1) + "月" + day + "日");
           document.write("<br />")

           // 获取自1970年1月日00:00:00 000到当前时间的总毫秒数（重点）
           // var times = nowTime.getTime();
           // 输出这个总毫秒数
           // document.write(times);
           // 将上面两行代码合并
           document.write(new Date().getTime()); //在网页中输出获取的总毫秒数

       </script>

       <script type="text/javascript">
           // 启动系统时钟
           function start(){
               // 下行代码的变量前没有var，代表该变量是全局变量
               v = window.setInterval("displayTime()",1000);
           }

           // 停止系统时钟
           function stop(){
               /*
               将全局变量v，也就是window.setInterval方法的返回值传递给
               window.clearInerval(v);就可以停止系统时间
               */
               window.clearInterval(v);
           }
           // 在div标签中显示系统时间
           function displayTime(){
               var time = new Date();
               var strTime = time.toLocaleString();
               document.getElementById("timeDiv").innerHTML = strTime;
           }
           /*
           function displayTime(){
               document.getElementById("timeDiv").innerHTML =
               document.write(new Date().toLocaleString());
           }
           使用这样的代码，会清空上面的形式内容，再显示
           */
       </script>

       <br />
       <input type="button" value="显示系统时间" οnclick="start();"/>
       <input type="button" value="停止系统时间" οnclick="stop()" />
       <div id="timeDiv"></div>
   </body>
</html>

网页显示效果如下图：

DOM编程-显示网页时钟

相关文章：

DOM编程-显示网页时钟

浅谈保护数据的加密策略

Java中String，StringBuffer和StringBuilder

华为认证常见技术问答整理：什么是Datacom认证？

Read book Netty in action (Chapter II) (Netty Introduction)

python--route

java面试中被问到项目中的难点，怎么回答

【速通版】吴恩达机器学习笔记Part1

面试（九）小米C++开发一面 21.11.02

儿童书写台灯哪个牌子比较好？2023儿童护眼台灯分享

市场调研计划书如何写？

python网络爬虫—快速入门（理论+实战）（七）

机器学习笔记——Chapter 1 – The Machine Learning landscape

skimage.feature--corner_harris、hog、local_binary_pattern说明

致敬白衣天使，学习Python读取

JVM - 认识JVM规范

文献阅读笔记 # CodeBERT: A Pre-Trained Model for Programming and Natural Languages

openHarmony的UI开发

【JavaSE】深入HashMap

华为机试题：HJ62 查找输入整数二进制中1的个数（python）

计算机毕业设计springboot众筹系统基于SpringBoot的校园项目众筹融资平台设计与实现高校创新创业众筹服务与资金管理系统构建研究

Linux下RTL8188无线网卡变身AP热点：从驱动安装到自动分配IP全流程（附避坑指南）

ImageGlass架构深度解析：高性能Windows图像查看器的技术实现与优化策略

Multisim电路设计避坑指南：红绿灯项目里那些容易忽略的时序与驱动问题

告别手动画框！OrCAD Capture 快速创建复合封装（附电源/地引脚处理技巧）

【Python多解释器隔离终极指南】：20年CTO亲授GIL绕过术、内存隔离与并发安全实战（附可运行代码库）

JeecgBoot低代码开发平台终极实战指南：从零开始构建企业级应用

nli-distilroberta-base实战案例：企业知识库问答系统中的逻辑一致性校验

告别AT指令：在STM32上移植ESP8266 RTOS SDK，更稳定地接入米家智能插座

深度解析DiffSinger：基于扩散模型的AI歌声合成技术革命