本文介绍了一个利用JavaScript实现动态网页时钟，并在页面加载时自动更新背景图片的示例。通过定时器函数和日期对象获取当前时间，然后使用字符串拼接将小时、分钟、秒转换为四位数格式，以此来改变背景图片。实现了一个简洁的网页布局，展示了时间显示与背景图片的交互效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
body{
background: url(img/0.png);
}
</style>
<script>
//如果小于10 的话，前面补0 时钟的格式01:12:30
function toDou(n){
if(n<10)
{
return "0"+n;
}else{
return ""+n;//为什么要加空 因为证明返回的是一个字符串
}
}
window.onload = function(){
var imgArr = document.getElementsByTagName("img");
function tick(){
var oDate =new Date();
var str =toDou( oDate.getHours() )+toDou( oDate.getMinutes() )+toDou( oDate.getSeconds() );
for(var i = 0 ; i < imgArr.length;i++)
{
//imgArr[i].src = 'img/'+str[i]+'.png';//不兼容ie7以下版本
imgArr[i].src = 'img/'+str.charAt(i)+‘.png';
}
}
setInterval(tick,1000);//每隔一秒调用一次
tick();//当加载完成的时候调用一次 就不会是刷新的时候为初始值了 00:00:00
}
</script>
<body style="background: black; color: white; font-size: 50px;">
<img src="img/0.png" alt="" />
<img src="img/0.png" alt="" />
：
<img src="img/0.png" alt="" />
<img src="img/0.png" alt="" />
：
<img src="img/0.png" alt="" />
<img src="img/0.png" alt="" />
</body>
</html>
扫一扫
2693
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
