Question

如何创建一个电源条，它会自动上下切换，并在我点击屏幕时停止。

http://i.stack.imgur.com/L3JSH.jpg

Answer 1

您需要更具体地了解您的确切尝试和不起作用的内容。但是，这应该让你开始。此示例使用 sgv ，但可以轻松转换为更强大的 div 方法。

目标是在圆圈位于中心区域时点击切换按钮。祝你好运！

注意：目前这可能只适用于Chrome。

＆＃13;

document.getElementById("toggler").addEventListener("click", function(){
  var el = document.querySelector("circle");
  var className = "stopped";

  el.classList.toggle(className);

  if (!el.classList.contains(className)) { return }

  var currentCX = parseFloat(getComputedStyle(el).getPropertyValue("cx"));

  if (currentCX >= 240 && currentCX <= 260 ) {
    console.log("hit");
  } else {
    console.log("miss");
  }
});

＆＃13;

@keyframes sweep {
  from { cx: 5; }
  to { cx: 495; }
}

circle{
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-name: sweep;
  animation-iteration-count: infinite;  
  animation-direction: alternate;
}

circle.stopped{
  animation-play-state: paused;
}

＆＃13;

<svg id="lineWithDots" width="500px" height="20px">
  <g transform="translate(0,10)">
    <rect width="490" height="2" y="-1" x="5" />
    <rect width="20" height="10" y="-5" x="240" />
    <circle r="4" cx="5" stroke="rgb(0, 0, 0)" fill="rgb(255, 255, 255)" />
  </g>
</svg>

<div>
  <button id="toggler">toggle</button>
</div>

＆＃13;

如何在JavaScript中创建一个电源条

1 个答案: