使用0-9图片制作实时时间

首先建立实时时间

var nows = new Date();
    var h =numnb(nows.getHours());//小时
    var m =numnb(nows.getMinutes());//分钟
    var s =numnb(nows.getSeconds()) ;//秒
    var z =( h + m + s);//拼接hms

建立每个图片的长度使用for循环

// 封装一个函数是图片的长度
for(var i=0;i<d.length;i++){
var img =d[i].querySelector('img')
img.scr="./im/"+z[i]+".jpg"
}

是否前面要添加0图片

   //封装函数以及判断0到10 加入10点和 9点前面加不加0
    function numnb(num){
        var num1
        if(num<10){
            num1="0"+num
        }else{
             num1=String(num)
        }
        return num1
    }

整体的数据展示

<script>
    
    setInterval(function(){
        //写出现在时间
    var nows = new Date();
    var h =numnb(nows.getHours());//小时
    var m =numnb(nows.getMinutes());//分钟
    var s =numnb(nows.getSeconds()) ;//秒
    var z =( h + m + s);//拼接hms
    console.log(z);
    //令在html中显示写出box下的div每一个
    var d=document.querySelectorAll("#box div")
    console.log(d);
    //for循环div的所有下标
   
    for(var i=0;i<=d.length;i++){
        //每个div下表的img中安i的一次加来循环跟据上方时间hms来
        var img=d[i].querySelector('img')
        // img.src=`im/+${z[i]}+.jpg`
        //每次循环z的事实数据零i的img图片改变
        img.src="./im/"+z[i]+".jpg"
    }
    },1000);

 

//函数 if判断如果num的值小于0则0拼接到num上
    function numnb(num){
        var num1=null;
            if(num<10){
            num1="0"+num//拼接
        }else{
            num1=String(num)//大于零就直接等于num
        }
        // console.log();
        return num1
    }

   
</script>

html

    <ul id="box">
        <li>
            <div>
                <img src="./im/0.jpg" />
                <!-- <img src="img/0.jpg" /> -->
            </div>
        </li>
        <li>
            <div>
                <img src="./im/0.jpg" />
                <!-- <img src="img/0.jpg" /> -->
            </div>
        </li>
        <li class="dian"><span></span></li>
        <li>
            <div>
                <img src="./im/0.jpg" />
                <!-- <img src="img/0.jpg" /> -->
            </div>
        </li>
        <li>
            <div>
                <img src="./im/0.jpg" />
                <!-- <img src="img/0.jpg" /> -->
            </div>
        </li>
        <li class="dian"><span></span></li>
        <li>
            <div>
                <img src="./im/0.jpg" />
                <!-- <img src="img/0.jpg" /> -->
            </div>
        </li>
        <li>
            <div>
                <img src="./im/0.jpg" />
                <!-- <img src="img/0.jpg" /> -->
            </div>
        </li>
    </ul>

    <div style="position: absolute; top: -9999; "></div>

css

 <style>
        ul {
            margin: 200px auto 0;
            padding: 0;
            width: 400px;
            height: 70px;
        }

        li {
            list-style: none;
            position: relative;
            width: 50px;
            height: 70px;
            overflow: hidden;
            float: left;
        }

        li div {
            position: absolute;
            left: 0;
            top: 0;
            width: 50px;
            height: 140px;
        }

        li img {
            float: left;
        }

        li span {
            display: block;
            background: url('./im/c.jpg');
            width: 50px;
            height: 70px;
        }

        li.dian {
            background: url('./im/b.jpg');
        }

        li span.active {
            background: url('./im/b.jpg');
        }
    </style>