Question

我刚刚开始学习javascript，并从网站https://cssanimation.rocks/clocks/查看了示例。但是，不幸的是，js脚本中的一部分不起作用。代码是这样的：

＆＃13;

/*
 * Starts any clocks using the user's local time
 * From: cssanimation.rocks/clocks
*/ 
 (function() {
  // Initialise the locale-enabled clocks
  //initInternationalClocks();
  // Initialise any local time clocks
  initLocalClocks();
  // Start the seconds container moving
  //moveSecondHands();
  // Set the intial minute hand container transition, and then each subsequent step
  //setUpMinuteHands();
})();
 function initLocalClocks() {
   //get the local time using javascript
   var date = new Date();
   var seconds = date.getSeconds();
   var minutes = date.getMinutes();
   var hours = date.getHours();
  
   var hands = [
     {
       hand: "hours",
       angle: (hours * 30) + (minutes/2)
     },
     {
       hand: "minutes",
       angle: (minutes * 6)
     },
     {
       hand: "seconds",
       angle: (seconds * 6)
     },
   ];

   for (var j = 0; j < hands.length; j++){
         
     var elements = document.querySelectorAll('.' + hands[j].hand);

      // window.alert(elements.length);
       
    
    for (var k = 0; k < elements.length; k++)
        {
      // window.alert(elements[k]);
       elements[k].style.webkitTransform = 'rotateZ(' + hands[j].angle + 'deg)';
          
    
       elements[k].style.transform = 'rotateZ(' + hands[j].angle + 'deg)';
       if (hands[j].hand === 'minutes'){
         elements[k].parentNode.setAttribute('data-second-angle', hands[j+1].angle)
       }
    }
   }
 }


// Set a timeout for the first minute hand movement (less than 1 minute), then rotate it every minute after that

function setUpMinuteHands() {
  // Find out how far into the minute we are
  var containers = document.querySelectorAll('.minutes-container');
  var secondAngle = containers[0].getAttribute("data-second-angle");
  if (secondAngle > 0) {
    // Set a timeout until the end of the current minute, to move the hand
    var delay = (((360 - secondAngle) / 6) + 0.1) * 1000;
    setTimeout(function() {
      moveMinuteHands(containers);
    }, delay);
  }
}

＆＃13;

.footer{
	color: black;
	font-style: italic;
	position: fixed; bottom: 0; left:0; right: 0; height: 30px;
	float: left;
	clear: both;
}

.clock {
  border-radius: 50%;
  background: #fff url(./images/ios_clock.svg) no-repeat center;
  background-size: 88%;
  height: 20em;
  padding-bottom: 0%;
  position: relative;
  width: 20em;
}

.clock::after{
  background: #000;
  border-radius: 50%;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 5%;
  height: 5%;
  z-index: 10;
}

.minutes-container, .hours-container, .seconds-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.hours {
  background: #000;
  height: 20%;
  left: 48.75%;
  position: absolute;
  top: 30%;
  transform-origin: 50% 100%;
  width: 2.5%;
}

.minutes {
  background: #000;
  height: 40%;
  left: 49%;
  position: absolute;
  top: 10%;
  transform-origin: 50% 100%;
  width: 2%;
}

.seconds {
  background: #000;
  height: 45%;
  left: 49.5%;
  position: absolute;
  top: 14%;
  transform-origin: 50% 100%;
  width: 1%;
  z-index: 8;
}

@keyframes rotate {
  100% {
    transform: rotateZ(360deg);
  }
}

.hours-container{
  animation: rotate 43200s infinite linear;
}

.minutes-container{
  animation: rotate 3600s infinite linear;
}

.seconds-container {
  animation: rotate 60s infinite linear;
}

＆＃13;

<!DOCTYPE html>

<html>


<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script type="text/javascript" src="script.js" ></script>
</head>

<body>

<article class="clock">
  <div class="hours-container">
    <div class="hours"></div>
  </div>

  <div class="minutes-container">
    <div class="minutes"></div>
  </div>

  <div class="seconds-container">
    <div class="seconds"></div>
  </div>
</article>

</body>

<footer>
<div class="footer">All materials are taken from the website <a href = "https://cssanimation.rocks/clocks/" target="_blank">cssanimation.rocks</a>
</div>
</footer>

</html>

＆＃13;

当我打开页面时，会执行javascript，但是数组＆＃34;元素＆＃34;从行： var elements = document.querySelectorAll（＆＃39;。＆＃39; + hands [j] .hand）是空的。我通过警报窗口进行了检查，实际上，querySelectorAll不会返回对象，但是css类的名称似乎是正确的...我已经在控制台中尝试了相同的内容（例如：document.querySelectorAll（＆＃） 39; .hands＆＃39;），它返回所需的div ... 请你帮助我 - 它可能有什么问题？...

P.S。当我将帖子粘贴到这篇帖子上时，js脚本似乎正常工作......现在我完全迷失了 - 这是我的浏览器设置还是什么？

非常感谢您提出任何建议/帮助！

document.querySelectorAll不起作用

0 个答案: