这篇博客介绍了如何制作一个简单的图片时钟，通过HTML和JavaScript将时间显示为图片形式。代码示例包括设置body的字体大小，定义带有id的p元素和六张初始图片。JavaScript部分利用window.onload事件，获取当前时间，并通过setInterval每秒更新时间，将小时、分钟和秒数转化为对应的图片显示。
分享一个简单的图片时钟写法~
部分html代码：
<body style="font-size:60px">
<p id="p"></p>
<img src="img/0.JPG" alt="">
<img src="img/0.JPG" alt="">
<img src="img/0.JPG" alt="">
<img src="img/0.JPG" alt="">
<img src="img/0.JPG" alt="">
<img src="img/0.JPG" alt="">
</body>
//分别表示时分秒，各两位
javascript代码：
<script>
window.οnlοad=function(){
var oP=document.getElementById('p');
var aImg=document.getElementsByTagName('img');
setInterval(getTime,1000);
getTime();
function getTime(){
var iNow=new Date();//获取系统时间
var iHour=iNow.getHours();//获取时
var iMinute=iNow.getMinutes();//获取分
var iSecond=iNow.getSeconds();//获取秒
var str=forTwo(iHour)+forTwo(iMinute)+forTwo(iSecond);
oP.innerHTML=str;
for(var i=0;i<aImg.length;i++){
aImg[i].src='img/'+str.charAt(i)+'.jpg';
}
}
function forTwo(n){ //这个方法是将时分秒都用两位数来表示return n<10?'0'+n:''+n;
}
}
</script>
效果图：
扫一扫
1174
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
