Question

所以我必须制作一个倒计时器，圆棒会根据时间逐渐下降。

创建HTML

else if(theme == 'watch-and-circular-bar') {
var countdown_text = '<div id="countdown"><svg class="svgCountDown"><text  x="50" y="50" font-family="Verdana" font-size="20" fill="black" text-anchor="middle" alignment-baseline="top">22</text><circle r="18" cx="50" cy="50" stroke="red" fill="none"></circle><circle class="d" r="18" cx="50" cy="50" style="stroke-dashoffset:0px; animation-duration: 10s;"></circle></svg></div>';
}

添加CSS

.svgCountDown {
  width: 100px;
  height: 100px;
  transform: rotateY(-180deg) rotateZ(-90deg);
}

.svgCountDown circle.d {
  stroke-dasharray: 113px;
  stroke-linecap: round;
  stroke-width: 2px;
  stroke: black;
  fill: none;
  animation: countdown linear infinite forwards;
}

@keyframes countdown {
  to {
    stroke-dashoffset: 113%;
  }
}

最后添加

$('#ubundle_discount_countdown').html(countdown_text);

但是，如果我使用html，它会在页面中添加它，但动画永远不会启动，如果我使用.append或.innerHTML动画启动，但它每隔几秒就将它附加到我的页面，任何想法？< / p>

Answer 1

尝试使用.empty().append()代替.html()！ .html()会覆盖内容。因此，.empty()将清除＆amp; .append()将照常运作。

$('#ubundle_discount_countdown').empty().append(countdown_text);

追加，html之间的区别？

1 个答案: