Java教程

图片时钟

本文主要是介绍图片时钟，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！ 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="../images/0.JPG" alt="">
    <img src="../images/0.JPG" alt="">
    <span><img src="../images/colon.JPG" alt=""></span>
    <img src="../images/0.JPG" alt="">
    <img src="../images/0.JPG" alt="">
    <span><img src="../images/colon.JPG" alt=""></span>
    <img src="../images/0.JPG" alt="">
    <img src="../images/0.JPG" alt="">
</body>
<script>
var imgs = document.querySelectorAll('body>img')
colck()
//设置定时器让它走动
setInterval(colck,1000)
function colck() {
    //获取当前时间戳
    var date = new Date
    var hour = date.getHours()
    var minute = date.getMinutes() 
    var second = date.getSeconds()
    //当时分秒没有达到十位数是补一个零
    hour = bu0(hour)
    minute = bu0(minute)
    second = bu0(second)
    //将时间连接起来
    var str = hour + minute + second
    // console.log(hour,minute,second);

    // imgs[0].src = '../images/'+str[0]+'.JPG';
    // imgs[1].src = '../images/'+str[1]+'.JPG';
    // imgs[2].src = '../images/'+str[2]+'.JPG';
    // imgs[3].src = '../images/'+str[3]+'.JPG';
    // imgs[4].src = '../images/'+str[4]+'.JPG';
    // imgs[5].src = '../images/'+str[5]+'.JPG';

    // 利用循环给每个img加事件  - 简化代码
    for(var i=0;i<imgs.length;i++){
        imgs[i].src = '../images/'+str[i]+'.JPG'
    }
}
function bu0(num) {
    if(num < 10) {
        return '0' + num
    } else {
        return '' + num
    }
}
</script>
</html>

效果图：

 

这篇关于图片时钟的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航