图片时钟案例

作者: 升龙无涯 | 来源:发表于2021-08-04 17:59 被阅读0次

我们都知道时钟由时分秒组成，本案例使用图片来代替时分秒所用的数字，最终效果如下：

图片时钟效果

html布局代码如下：

<body>
<img src="images/0.JPG">
<img src="images/0.JPG">
<span><img src="images/colon.JPG"></span>
<img src="images/0.JPG">
<img src="images/0.JPG">
<span><img src="images/colon.JPG"></span>
<img src="images/0.JPG">
<img src="images/0.JPG">
</body>

js代码如下：

// 处理数字的函数：如果数字小于10则给前面补0,形成2位的字符串，如果数字大于等于10，则给前面添加空字符串，形成2位的字符串
function addZero(num){
    if(num<10){
        return '0' + num
    }else{
        return '' + num
    }
}
function showClock(){
    // 获取当前时间日期对象
    var date = new Date()
    // 从时间日期对象中获取到时分秒
    var hours = date.getHours()
    var minutes = date.getMinutes()
    var seconds = date.getSeconds()
    // 将时分秒拼接在一起组成固定的6位的字符串
    var str = addZero(hours) + addZero(minutes) + addZero(seconds)
    // 遍历字符串
    for(var i=0;i<str.length;i++){
        // 将 每个字符对应的图片的路径 设置为 当前这个字符数字.jpg
        oImgs[i].src = './images/' + str[i] + '.jpg'
    }
}
// 获取所有的数字(时分秒)图片
var oImgs = document.querySelectorAll('body>img');
// 将函数调用一次，使得一刷新页面就能显示当前时间的图片
showClock()
// 设置定时器，每秒让这个函数执行一次
setInterval(showClock,1000)

素材如下：