HTML实现简易的电子时钟

Yukonel

已于 2024-03-26 11:36:48 修改

阅读量259

点赞数 1

文章标签： html5 javascript css

于 2024-03-26 11:23:31 首次发布

本文链接：https://blog.csdn.net/2301_82223847/article/details/137040531

版权

HTML、JS代码：

<div class="kuang">
        <img src="" id="xsShiImg" alt="">
        <img src="" id="xsGeImg" alt="">

        <img src="images/dian.png" class="dian" alt="">

        <img src="" id="fzShiImg" alt="">
        <img src="" id="fzGeImg" alt="">

        <img src="images/dian.png" class="dian" alt="">

        <img src="" id="mzShiImg" alt="">
        <img src="" id="mzGeImg" alt="">
</div>
<script>
    let xsShiImg=document.getElementById("xsShiImg");
    let xsGeImg=document.getElementById("xsGeImg");

    let fzShiImg=document.getElementById("fzShiImg");
    let fzGeImg=document.getElementById("fzGeImg");

    let mzShiImg=document.getElementById("mzShiImg");
    let mzGeImg=document.getElementById("mzGeImg");
    //数组管理图片（数字、点图片）
    let images=[
    "images/num0.png",
    "images/num1.png",
    "images/num2.png",
    "images/num3.png",
    "images/num4.png",
    "images/num5.png",
    "images/num6.png",
    "images/num7.png",
    "images/num8.png",
    "images/num9.png"
    ]
    function timego(){
        let mytime = new Date();
        let xs=mytime.getHours();
        let fz=mytime.getMinutes();
        let mz=mytime.getSeconds();
    
        let xsGe=xs%10;//小时个位数
        let xsShi=Math.floor(xs/10);//小时十位数

        let fzGe=fz%10;
        let fzShi=Math.floor(fz/10);

        let mzGe=mz%10;
        let mzShi=Math.floor(mz/10);//向下取整

        //显示时间
        xsShiImg.src=images[xsShi];
        xsGeImg.src=images[xsGe];

        fzShiImg.src=images[fzShi];
        fzGeImg.src=images[fzGe];

        mzShiImg.src=images[mzShi];
        mzGeImg.src=images[mzGe];
    }
    let myset=setInterval(timego,1000);
</script>

外部CSS样式：

.kuang{
    width: 300px;
    height: 60px;
    display: flex;
    justify-content: space-between;
    
    margin-top: 200px;
    margin-left: auto;
    margin-right: auto;
}
.dian{
    transform: translateY(-5px);
}