1、制作前准备
在素材网上挑选你喜欢的0~9的数字图片，下载下来，用PS将这些图片切成合适在网页上显示的的大小（我切成50px*60px）。
2、布局
在HTML将这几张图片引用进去，并排显示，并在每两个中间加上“：”，将包含图片标签的DIV设置成居中。
3、功能实现
将初始的图片显示都设置成数字0，这时在静态页面上会显示“00:00:00”；因为之前已经给图片命名为0~9.png
通过getHours()、getMinutes()、getSeconds()分别获取时分秒这六个数值（需要注意的是当系统时间的时分秒小于10得在前面补0，这样才能和图片标签里的数组一一对应），
然后将这六个值传递给图片标签数组的文件名。并通过setInterval(timer,1000)来通过时间的变化完成相应数字图片的切换。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>唯美数字时钟</title>
<style type="text/css">
* { padding: 0; margin: 0; }
body{background: black;}
#div1 {
width: 600px; height: 200px;color: white;font-size: 50px; margin:50px auto;
}
</style>
<!-- 设置为变化的时钟timer
Date函数，获取系统时钟
将src里的图片替换成系统时钟，
系统时间不是两位数时间的判断，考虑‘0‘+‘系统数字‘ -->
<script type="text/javascript">
window.onload=function()
{
var oDiv1=document.getElementById(‘body1‘);
var aImg=document.getElementsByTagName(‘img‘);
//var str=‘012332‘;
timer=function()
{
//设置补0函数
function toDou(n)
{
if (n<10)
{
return ‘0‘+n;
}
else
{
return ‘‘+n;
}
}
//获取系统时钟的函数
var aDate=new Date();
var str=toDou(aDate.getHours())+toDou(aDate.getMinutes())+toDou(aDate.getSeconds());
for (var i = 0; i < aImg.length; i++) {
aImg[i].src=‘numberPicture/‘+str.charAt(i)+‘.png‘;
};
}
setInterval(timer,1000);
timer();
}
</script>
</head>
<body id="body1">
<div id="div1">
<img src="numberPicture/0.png">
<img src="numberPicture/0.png">
:
<img src="numberPicture/0.png">
<img src="numberPicture/0.png">
:
<img src="numberPicture/0.png">
<img src="numberPicture/0.png">
</div>
</body>
</html>
时间： 2024-08-06 11:52:46