Question

 var secondHand = document.querySelector('.second-hand');
     var minuteHand = document.querySelector('.min-hand');
     var hourHand = document.querySelector('.hour-hand');
    function setDate(){
      
      
      var now = new Date();
      var seconds = ((now.getSeconds() * 6  + 90) % 360);
      var minutes = ((now.getMinutes() * 6  + 90) % 360) ;
      var hour    = ((now.getHours()   * 30 + 90) % 360) ;
      
      
      
      secondHand.style.transform=`rotate(${seconds}deg)`;
      minuteHand.style.transform=`rotate(${minutes}deg)`;
      hourHand.style.transform=`rotate(${hour}deg)`;
    }
    
    setInterval(setDate,1000);
    
    setDate();

html {
      background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
      background-size:cover;
      font-family:'helvetica neue';
      text-align: center;
      font-size: 10px;
    }

    body {
      margin: 0;
      font-size: 2rem;
      display:flex;
      flex:1;
      min-height: 100vh;
      align-items: center;
    }

    .clock {
      width: 30rem;
      height: 30rem;
      padding:2rem;
      border-radius:50%;
      margin:50px auto;
      position: relative;
      box-shadow:
        0 0 0 4px rgba(0,0,0,0.1),
        inset 0 0 0 10px #EFEFEF,
        inset 0 0 10px black,
        0 0 10px rgba(0,0,0,0.2);
    }

    .clock-face {
      position: relative;
      width: 100%;
      height: 100%;
     
      transform: translateY(-3px); /* account for the height of the clock hands */
    }

    .hand {
      width:50%;
      height:6px;
      background:black;
      position: absolute;
      top:50%;
      transform-origin:100%;
      transform:rotate(90deg);
      transition:all .05s;
      transition-timing-function:cubic-bezier(.1,2.7,.58,1);
    }  
      .second-hand{
        background-color:red;
      }
      
    .hour-hand{
      width:35%;
      left:15%;
      
    }

<body>


    <div class="clock">
      <div class="clock-face">
        <div class="hand hour-hand"></div>
        <div class="hand min-hand"></div>
        <div class="hand second-hand"></div>
      </div>
    </div>




  
</body>

我正在做wesbox javascript 30并且正在尝试更改时针的长度（使其稍微缩短一点），但仍然要让它围绕时钟中心旋转。通过重置宽度和顶部尝试了许多事情，但似乎没有任何工作。这是一个小提琴的链接：clock

<div class="clock">
  <div class="clock-face">
    <div class="hand hour-hand"></div>
    <div class="hand min-hand"></div>
    <div class="hand second-hand"></div>
  </div>
</div>

CSS

html {
  background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
  background-size:cover;
  font-family:'helvetica neue';
  text-align: center;
  font-size: 10px;
}

body {
  margin: 0;
  font-size: 2rem;
  display:flex;
  flex:1;
  min-height: 100vh;
  align-items: center;
}

.clock {
  width: 30rem;
  height: 30rem;
  padding:2rem;
  border-radius:50%;
  margin:50px auto;
  position: relative;
  box-shadow:
    0 0 0 4px rgba(0,0,0,0.1),
    inset 0 0 0 10px #EFEFEF,
    inset 0 0 10px black,
    0 0 10px rgba(0,0,0,0.2);
}

.clock-face {
  position: relative;
  width: 100%;
  height: 100%;

  transform: translateY(-3px); /* account for the height of the clock hands */
}

.hand {
  width:50%;
  height:6px;
  background:black;
  position: absolute;
  top:50%;
  transform-origin:100%;
  transform:rotate(120deg);
  transition:all .05s;
  transition-timing-function:cubic-bezier(.1,2.7,.58,1);
}  
  .second-hand{
    background-color:red;
  }

.hour-hand{
  width:50%;
  transform-origin:100%;

}

Answer 1

您只需使用以下方法调整时针的位置：

.hour-hand{
    width: 30%;
    left: 20%;
}

见下面的例子

＆＃13;

var secondHand = document.querySelector('.second-hand');
     var minuteHand = document.querySelector('.min-hand');
     var hourHand = document.querySelector('.hour-hand');
    function setDate(){
      
      
      var now = new Date();
      var seconds = ((now.getSeconds() * 6  + 90) % 360);
      var minutes = ((now.getMinutes() * 6  + 90 +30) % 360) ;
      var hour    = ((now.getHours()   * 30 + 180) % 360) ;
      
      
      
      secondHand.style.transform=`rotate(${seconds}deg)`;
      minuteHand.style.transform=`rotate(${minutes}deg)`;
      hourHand.style.transform=`rotate(${hour}deg)`;
    }
    
    setInterval(setDate,1000);
    
    setDate();

＆＃13;

html {
      background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
      background-size:cover;
      font-family:'helvetica neue';
      text-align: center;
      font-size: 10px;
    }

    body {
      margin: 0;
      font-size: 2rem;
      display:flex;
      flex:1;
      min-height: 100vh;
      align-items: center;
    }

    .clock {
      width: 30rem;
      height: 30rem;
      padding:2rem;
      border-radius:50%;
      margin:50px auto;
      position: relative;
      box-shadow:
        0 0 0 4px rgba(0,0,0,0.1),
        inset 0 0 0 10px #EFEFEF,
        inset 0 0 10px black,
        0 0 10px rgba(0,0,0,0.2);
    }

    .clock-face {
      position: relative;
      width: 100%;
      height: 100%;
     
      transform: translateY(-3px); /* account for the height of the clock hands */
    }

    .hand {
      width:50%;
      height:6px;
      background:black;
      position: absolute;
      top:50%;
      transform-origin:100%;
      transform:rotate(90deg);
      transition:all .05s;
      transition-timing-function:cubic-bezier(.1,2.7,.58,1);
    }  
      .second-hand{
        background-color:red;
      }
      
    .hour-hand{
      width: 30%;
	  left: 20%;
    }

＆＃13;

<body>


    <div class="clock">
      <div class="clock-face">
        <div class="hand hour-hand"></div>
        <div class="hand min-hand"></div>
        <div class="hand second-hand"></div>
      </div>
    </div>




  
</body>

＆＃13;

Answer 2

尝试将其添加到课程hand hour-and的css中：

transform: rotate(120deg) scale(0.5, 1);

scale属性中的第一个值控制长度，而第二个值控制宽度。

或者，如果您不想更改CSS，可以从以下位置更改JS：

hourHand.style.transform=`rotate(${hour}deg)`;

对此：

hourHand.style.transform=`rotate(${hour}deg) scale(0.5, 1)`;

无法更改时钟指针的长度

2 个答案:

见下面的例子