Html动态时钟实例

绝地灬酷狼 2022-06-09 03:38 1712阅读 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 条评论，1712人围观）

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

相关阅读

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

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

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

相关 html+css+js实现时钟

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

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

相关 HTML5——考研时钟

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2

偏执的太偏执、/ 2023年07月20日 12:11/ 0 赞/ 10 阅读

相关使用JS实现动态时钟

利用setTime()实现动态的时钟效果代码如下 <html> <head> <meta charset="utf-8"

太过爱你忘了你带给我的痛/ 2023年07月12日 14:38/ 0 赞/ 12 阅读

相关 Qt实现指针式时钟+动态时钟 (详细注释)

先上效果图： ![20200705214351114.gif][] 点击运行后首先是一个指针式时钟窗口，点击Digital Clock->可以跳转到数字时钟窗口，再点击

左手的ㄟ右手/ 2023年02月16日 15:25/ 0 赞/ 45 阅读

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

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

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

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

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

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

相关 js 动态时钟

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

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

相关 Html动态时钟实例

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

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

相关 js实现动态时钟

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

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