基于html+css+js实现动态时钟

最新推荐文章于 2023-12-08 18:53:08 发布

奶guy

最新推荐文章于 2023-12-08 18:53:08 发布

阅读量2k

点赞数 1

分类专栏：没人看自己看系列文章标签： html css js

本文链接：https://blog.csdn.net/qq_43517774/article/details/119214471

版权

没人看自己看系列专栏收录该内容

11 篇文章 0 订阅

订阅专栏

参照B站的一个视频，利用html+css+js实现了动态时钟。
视频链接为: link

动态时钟的效果

基于HTML+css+js实现的动态时钟

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>clock</title>
    <style type="text/css">
      *
      {
        /*外边距为0*/
        margin: 0;
        /*内边距为0*/
        pading: 0;
        /*规定一个带边框的框*/
        box-sizing: border-box;
      }
      /*将时钟固定在页面中间的弹性盒子，时钟大小多大，盒子就有多大*/
      body
      {
        /*固定时钟的长方形盒子为弹性布局*/
        display: flex;
        /*居中*/
        justify-content: center;
        /*交叉轴的中点对齐*/
        align-items: center;
        /*该块元素，高度如果小于100vh，那么这个块元素就不会再自动变小，而是保持100vh不变*/
        /*vh指相对长度单位，view height*/
        min-height: 100vh;
        background: #091921;
      }
      /*放置时钟的正方形盒子*/
      .clock
      {
        /*时钟宽度*/
        width: 400px;
        /*时钟高度*/
        height: 400px;
        /*时钟盒子为弹性布局*/
        display: flex;
        /*盒子中的内容居中*/
        justify-content: center;
        /*交叉轴的中点对齐*/
        align-items: center;
        background: url("clock.png");
        /*把背景图片放大到适合元素容器的尺寸，图片比例不变，超出容器的部分可能会被裁掉*/
        background-size: cover;
        /*盒子的框实线*/
        border: 4px solid #091921;
        /*把盒子框实线锐化为圆角*/
        border-radius: 50%;
        box-shadow: 0 -15px 15px rgba(255,255,255,0.05),
        inset 0 -15px 15px rgba(255,255,255,0.05),
        0 15px 15px rgba(0,0,0,0.3),
        inset 0 -15px 15px rgba(255,255,255,0.3);

      }
      /*时钟中心*/
      /*在clock元素前插入中心*/
      .clock:before
      {
        content: '';
        /*与clock的位置有关*/
        /*绝对定位的盒子，在没有规定left和top时，是相对于父元素的content左上角定位的，不包含padding*/
        /*绝对定位与padding和父级相对定位的box-sizing有关*/
        position: absolute;
        width: 20px;
        height: 20px;
        background: #ffffff;
        border-radius: 50%;
        z-index: 10000;
      }
      .clock .hour,
      .clock .min,
      .clock .sec
      {
        position: absolute;
      }
      /*设置时针分针秒针的位置*/
      .clock .hour ,hr
      {
        width: 0;
        height: 0;
      }
      .clock .min ,mn
      {
        width: 0;
        height: 0;
      }
      .clock .sec ,sec
      {
        width: 0;
        height: 0;
      }
      .hr, .mn, .sc
      {
        display: flex;
        /*justify-content: flex-end;*/
        justify-content: center;
        /*align-items: center;*/
        position: absolute;
        border-radius: 50%;
      }
      .hr:before
      {
        content: '';
        position: absolute;
        width: 8px;
        height: 80px;
        background: #4169E1;
        z-index: 10;
        border-radius: 6px 6px 0 0;
      }
      .mn:before
      {
        content: '';
        position: absolute;
        width: 4px;
        height: 90px;
        background: #fff;
        z-index: 11;
        border-radius: 6px 6px 0 0;
      }
      .sc:before
      {
        content: '';
        position: absolute;
        width: 2px;
        height: 150px;
        background: #fff;
        z-index: 12;
        border-radius: 6px 6px 0 0;
      }
    </style>

<!--    <link rel="stylesheet" href="style.css">-->
</head>
<body>
  <div class="clock">
    <div class="hour">
      <div class="hr" id="hr"></div>
    </div>
    <div class="min">
      <div class="mn" id="mn"></div>
    </div>
    <div class="sec">
      <div class="sc" id="sc"></div>
    </div>
  </div>

  <script type="text/javascript">
    const deg = 6;
    const nor = 180;
    const hr = document.querySelector('#hr');
    const mn = document.querySelector('#mn');
    const sc = document.querySelector('#sc');

    setInterval(() => {
      let day = new Date();
      let hh = day.getHours() * 30;
      let mm = day.getMinutes() * deg;
      let ss = day.getSeconds() * deg;

      hr.style.transform = `rotateZ(${(hh)+(mm/12)+177}deg)`;
      mn.style.transform = `rotateZ(${mm+nor}deg)`;
      sc.style.transform = `rotateZ(${ss+nor}deg)`;
      // hr.style.transform = rotateZ(+ hh + deg);
      // mn.style.transform = rotateZ(+ mm + deg);
      // sc.style.transform = rotateZ(+ ss + deg);
    })

  </script>
</body>
</html>

动态时钟背景图
clock

奶guy

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
基于html+css+js实现动态时钟

参照B站的一个视频，利用html+css+js实现了动态时钟。视频链接为: link动态时钟的效果基于HTML+css+js实现的动态时钟完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>clock<
复制链接

扫一扫