Html动态时钟实例

绝地灬酷狼 2022-06-09 03:38 1638阅读 0赞

Html动态时钟实例

时间已经成为我们每天必不可少的一个元素，我们是否想过用html来实现一款动态的实时时钟呢？今天我就与大家分享一下html动态时钟的实现过程，项目用Hbuilder构建。  
一、代码目录结构如图所示

![20170826101249281][]

二、dynamictime.html

<html> <head> <title>html动态时钟</title> <style> body { margin: 0; } #div19 { font-size: 40px; position: absolute; left: 880px; top: 240px; width: 400px; height: 200px; } </style> <script> //实现数码时钟 function fun(string) { if (string <= 9) { return "0" + string; } else { return "" + string; } } window.onload = function () { var aadiv = document.getElementById('div19'); var test = aadiv.getElementsByTagName('img'); function time() { var date = new Date(); var str = fun(date.getHours()) + fun(date.getMinutes()) + fun(date.getSeconds()); for (var i = 0; i < test.length; i++) { test[i].src = '../image/' + str[i] + '.png'; } } setInterval(time, 1000); time(); } </script> </head> <body> <div id="div18"> <img style="width:100%; " src="../image/psb.jpg" /> <div id="div19"> <img src="../image/0.png" /> <img src="../image/0.png" /> ： <img src="../image/0.png" /> <img src="../image/0.png" /> ： <img src="../image/0.png" /> <img src="../image/0.png" /> </div> </div> </body> </html>

三、效果  
![20170826101600994][]  
  
时间可是动态变化的，背景图片是我大百里杜鹃——地球的彩带，世界的花园，百里杜鹃欢迎你。需要时钟图片测试的可私信我哟。

[20170826101249281]: /images/20220609/e2e7b3ea86e44063b017c8c9431ebe3a.png
[20170826101600994]: /images/20220609/68abbdac052a41db9213807f94a32fc6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1638人围观）

还没有评论，来说两句吧...

相关阅读

相关有趣的HTML实例（六）卡片翻转时钟

有趣的HTML实例（四）卡片翻转时钟一款简单的 HTML+CSS+JS 原生卡片翻转时钟（css+js）实例1、HTML2、CSS3、JS4、舒适的画面感，代码效果5...

谁践踏了优雅/ 2024年04月28日 07:52/ 0 赞/ 4 阅读

相关 html+css+js实现时钟

html+css+js实现比较特别的时钟简介：为止，在中国历史上有留下记载的四代计时器分别为：日晷、沙漏、机械钟、石英钟。在中国市场上石英钟最热销。时钟一直

清疚/ 2024年03月30日 17:57/ 0 赞/ 12 阅读

相关文字时钟罗盘动态html代码_网红手机壁纸，罗盘时钟壁纸来了！

![e1a10e12c2901082abdfe272f92c8489.png][] 大家好，我是互联网小技巧小编茂茂，每天打开手机你想看不想看都得看到手机壁纸，一个酷炫的手机

迈不过友情╰/ 2023年01月05日 12:14/ 0 赞/ 98 阅读

相关 Python实现动态时钟小程序

前言本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理。 PS：如有需要Python学习资料的小伙伴可以加点击下方链接

梦里梦外;/ 2022年12月07日 15:09/ 0 赞/ 159 阅读

相关 JavaScript经典动态流光时钟

原文链接：[你真的会前端css吗？用css做的非常炫酷的时间显示表][css_css] 效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3po

朴灿烈づ我的快乐病毒、/ 2022年11月20日 01:53/ 0 赞/ 129 阅读

相关动态时间html在线,HTML写一个网页动态时钟

时钟特效 function disptime()\{ var today=new Date(); var hh=today.getHours(); var mm=tod

太过爱你忘了你带给我的痛/ 2022年10月05日 13:56/ 0 赞/ 92 阅读

相关 js 动态时钟

> 引用块内容 > ![这里写图片描述][20161025204142316] ![这里写图片描述][20161025204321354] 这里写代码片<!DO

待我称王封你为后i/ 2022年07月15日 00:05/ 0 赞/ 167 阅读

相关 Html动态时钟实例

Html动态时钟实例时间已经成为我们每天必不可少的一个元素，我们是否想过用html来实现一款动态的实时时钟呢？今天我就与大家分享一下html动态

绝地灬酷狼/ 2022年06月09日 03:38/ 0 赞/ 1639 阅读

相关 js实现动态时钟

> 发现一个超级好用的gif图工具"抠抠视频秀"，很好用也不占内存，长这样 > ![在这里插入图片描述][20190820011431901.png] 1. 效果图

以你之姓@/ 2021年10月26日 13:22/ 0 赞/ 372 阅读

相关用java画的动态时钟

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

Myth丶恋晨/ 2021年07月24日 21:35/ 0 赞/ 349 阅读