您的位置：首页 > Web前端 > HTML

Html动态时钟实例

2017-08-26 10:01 218 查看
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>
三、效果



时间可是动态变化的，背景图片是我大百里杜鹃——地球的彩带，世界的花园，百里杜鹃欢迎你。需要时钟图片测试的可私信我哟。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航