JavaScript Date对象简单应用——动态表盘

最新推荐文章于 2022-11-17 20:03:13 发布

原创最新推荐文章于 2022-11-17 20:03:13 发布 · 324 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #css #webstorm #web

网页专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了一个使用HTML、CSS和JavaScript创建动态时钟的过程。通过分解时钟图片为表盘、秒针、分针与时针，结合定时器更新旋转角度，实现了时钟的实时显示效果。代码中展示了如何设置页面布局、定位时钟指针并动态调整其位置。

效果图：
在这里插入图片描述
一、图片分解：
1、表盘：
de在这里插入图片描述
2、秒针：

3、分针：

4、时针：

二、工程目录结构：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200429145338547.png
1、css目录结构:

2、html目录结构：

3、images目录结构：

三、代码部分

HTML部分:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>
<div class="clock">
    <img src="../images/miaozhen.png" alt="" class="mz" id="mz">
    <img src="../images/fenzhen.png" alt="" class="fz" id="fz">
    <img src="../images/shizhen.png" alt="" class="sz" id="sz">
</div>
<script>
    //获取元素
    let miaozhen = document.getElementById("mz");
    let fenzhen = document.getElementById("fz");
    let shizhen = document.getElementById("sz");

    let timeGo = function () {
       let mydate = new Date();
       let miao = mydate.getSeconds();
        let fen = mydate.getMinutes();
        let shi = mydate.getHours();
        let haomiao = mydate.getMilliseconds();

       miaozhen.style.transform = `rotateZ(${miao*6+haomiao*0.006}deg)`;
       fenzhen.style.transform = `rotateZ(${fen*6+miao*6*6/360}deg)`;
        shizhen.style.transform = `rotateZ(${shi*30+fen*6*30/360}deg)`;
    }
    let myset = setInterval(timeGo,100)
</script>
</body>
</html>

CSS部分：
1、public.css部分：

*{
    margin: 0;
    padding: 0;
}
ul,li,ol{
    list-style: none;
}
a{
    text-decoration: none;
}
img{
    border:none;
}
.clears{
    clear: both;
    height: 0;
    overflow: hidden;
    line-height: 0;
    font-size: 0;
}
button{
    border: none;
    outline: none;
    cursor: pointer;
}
body{
    font-family: Arial,Verdana,"Microsoft Yahei","Pingfang SC","Simsun";
    font-size: 14px;
}

2、index.css部分

.clock{
    width: 454px;
    height: 454px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    background: url("../images/clock.png") no-repeat center;
    position: relative;
}
.mz{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -4.5px;
    margin-top: -130px;
    transform-origin: center 130px;
    transform: rotateZ(0deg);
}
.fz{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -4.5px;
    margin-top: -155px;
    transform-origin: center 155px;
    transform: rotateZ(0deg);
}
.sz{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -4.5px;
    margin-top: -110px;
    transform-origin: center 110px;
    transform: rotateZ(30deg);
}