Javascript时钟不起作用答案

【问题标题】：Javascript clock not functioningJavascript时钟不起作用
【发布时间】：2021-02-12 08:39:45
【问题描述】：

创建了一个 javascript 时钟，但它无法正常工作 css 正确设置了它的样式，但它实际上并没有告诉时间。非常感谢提示和建议，谢谢！如果可以，请在您回答时解释我做错了什么.. ^-^ 所有代码都在codepen上，链接如下

https://codepen.io/codinchopin2117/pen/vYKRNBp

这是代码

!DOCTYPE html>
    <html>
<head>
    <meta charset="utf-8">
    <title>Javascript Clock</title>
    <link rel="stylesheet" href="main.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 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)}deg)';
    mn.style.transform = 'rotatez(${mm}+deg)';
    sc.style.transform = 'rotatez(${ss}+deg)';
    })


    </script>
</body>

       * {
margin: 0;
padding: 0;
box-sizing: border-box;
     }

  body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #9B0C43;
   }

   .clock {
width: 350px;
height: 350px;
display: flex;
justify-content: center;
align-items: center;
background-image: url(clock.png);
background-size: cover;
border: 4px solid #000;
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(0, 0, 0, 0.3);

          }

              .clock::before 
         {
content: '';
position: absolute;
width: 15px;
height: 15px;
background: #FFF;
border-radius: 50%;
z-index: 10000;
      }

        .clock .hour,
  .clock .min,
  .clock .sec 
           {
       position: absolute;
        }

           .clock .hour, .hr 
           {
      width: 160px;
     height: 160px;
         }

         .clock .min, .mn{
     width: 190px;
   height: 190px;
     }

     .clock .sec, .sc{
width: 230px;
height: 230px;
   }

     .hr, .mn, .sc 
     {
display: flex;
justify-content: center;
position: absolute;
border-radius: 50%;
        }

       .hr:before {
content: '';
position: absolute;
width: 8px;
height: 80px;
background: #FFF;
z-index: 10;
border-radius: 6px 6px 0 0;
         }

      .mn:before {
content: '';
position: absolute;
width: 4px;
height: 90px;
background: #F7F0D6;
z-index: 11;
border-radius: 6px 6px 0 0;
        }

        .sc:before {
content: '';
position: absolute;
width: 2px;
height: 150px;
background: #F7F0D6;
z-index: 12;
border-radius: 6px 6px 0 0;
           }

【问题讨论】：

在hr.style.transform = 'rotatez(${(hh)+(mm/12)}deg)';中使用'not'
还 ... 向 setinterval 添加第二个参数！！！

标签： javascript html css frontend clock

【解决方案1】：

这里的问题是您使用 ${} 错误，因为您必须将它们和您的字符串放在 `` 而不是 '' 或 "" 中。你应该做的就是替换

hr.style.transform = 'rotatez(${(hh)+(mm/12)}deg)';
mn.style.transform = 'rotatez(${mm}+deg)';
sc.style.transform = 'rotatez(${ss}+deg)';

与

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

【讨论】：

【解决方案2】：

你应该这样做

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

所以首先函数或任何你称之为 ${} 的东西只能在反引号中使用 ``not '' 或 "" 第三个值和度数之间不需要+ 我也会使用 rotate 而不是 rotatez，即使你使用 rotateZ 它的 Z 而不是 z 但这是一个很好的实践问题，不会破坏你的代码

【讨论】：