Html动态时钟实例
程序员文章站
2022-03-10 21:40:38
...
Html动态时钟实例
时间已经成为我们每天必不可少的一个元素，我们是否想过用html来实现一款动态的实时时钟呢？今天我就与大家分享一下html动态时钟的实现过程，项目用Hbuilder构建。
一、代码目录结构如图所示
一、代码目录结构如图所示
二、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>
时间可是动态变化的，背景图片是我大百里杜鹃——地球的彩带，世界的花园，百里杜鹃欢迎你。需要时钟图片测试的可私信我哟。
上一篇： 正则表达式字符类加深理解
推荐阅读