前提条件:图片素材要如下
在JavaScript中用DOM做时钟

用DOM做时间钟

	<body>
<div>
    <img src="img/0.png" alt="">
    <img src="img/0.png" alt="">
    <img src="img/second1.png" alt="">
    <img src="img/0.png" alt="">
    <img src="img/0.png" alt="">
    <img src="img/second1.png" alt="">
    <img src="img/0.png" alt="">
    <img src="img/0.png" alt="">
</div>
<script>
    //调取函数
    showTime();
    //计时器  每隔一秒执行showTime函数一次
    setInterval(showTime,1000);
    function showTime(){
        //获取文档流中所有的img标签
        var img=document.getElementsByTagName('img');
        //获取当前时间日期
        var date=new Date();
        //在当前时间中获取小时
        var hour=date.getHours();
        //在当前时间中获取分钟
        var minute=date.getMinutes();
        //在当前时间中获取秒
        var second=date.getSeconds();
        //补零
        if(hour<10){
            hour='0'+hour;
        }else if(minute<10){
            minute='0'+minute;
        }else if(second<10){
            second='0'+second;
        }
        //第一张图片位置的路径
        img[0].src='img/'+parseInt(hour/10)+'.png';
        //第二张图片位置的路径
        img[1].src='img/'+hour%10+'.png';
        //第四张图片位置的路径
        img[3].src='img/'+parseInt(minute/10)+'.png';
        //第五张图片位置的路径
        img[4].src='img/'+minute%10+'.png';
        //第七张图片位置的路径
        img[6].src='img/'+parseInt(second/10)+'.png';
        //第八张图片位置的路径
        img[7].src='img/'+second%10+'.png';        
    }
    

</script>
结果显示 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190121201933555.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM4OTg2OA==,size_16,color_FFFFFF,t_70) 注意它是动的不是静止

相关文章:

  • 2021-06-05
  • 2022-01-10
  • 2022-12-23
  • 2021-07-02
  • 2021-08-09
  • 2022-01-20
猜你喜欢
  • 2021-06-18
  • 2021-08-10
  • 2022-12-23
  • 2021-10-20
  • 2022-12-23
  • 2022-12-23
  • 2021-11-01
相关资源
相似解决方案