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

最新推荐文章于 2024-05-09 15:15:12 发布

枯叶逢春

最新推荐文章于 2024-05-09 15:15:12 发布

阅读量216

点赞数

分类专栏：网页文章标签： javascript html css webstorm web

本文链接：https://blog.csdn.net/dot_liu/article/details/105840155

版权

网页专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果图：
在这里插入图片描述
一、图片分解：
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);
}

枯叶逢春

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript Date对象简单应用——动态表盘

表盘：秒针：分针：时针：工程目录结构：css目录结构:html目录结构：images目录结构：HTML部分:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> ...
复制链接

扫一扫