html - 如何在每次点击按钮时旋转方 block ？

Question

更准确地说，方 block 的旋转不起作用。

目前方 block 转一次，我每次点击两个方向都想转。

怎么做？

var now = 10
$('.left').click(function() {

  $(".d").css('transform', 'rotate (' + now + 'deg)');
});

.r {
  width: 200px;
  height: 200px;
  border: 20px solid;
  border-radius: 50%;
}

.d {
  width: 200px;
  height: 200px;
  border: 20px solid blue;
  border-radius: 50%;
}

.wrapper {
  width: 230px;
}

.parent {
  width: 240px;
  height: 240px;
  position: relative;
}

.r,
.d {
  position: absolute;
}

.d {
  border-right-color: transparent;
  border-top-color: transparent;
  transform: rotate(45deg);
}

.btns {
  display: table;
  margin: 10px auto;
}

button {
  margin-left: 10px;
}

<div class="wrapper">
  <div class="parent">
    <div class="r"></div>
    <div class="d"></div>
  </div>

  <div class="btns">
    <button class="left">+</button>
    <button class="right">-</button>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

一开始我想做一个截图中这样的稳压器。

但由于对 JS 没有很好的了解，所以我决定用 HTML 和 CSS + jQuery 来做

想用svg但是不知道怎么改

希望得到您的帮助

Answer 1

您需要在 now 中保持总计，以便您可以不断递增。例如:

var now = 0;

$('.left').click(function() {
  now += 10;
  $(".d").css('transform', 'rotate(' + now + 'deg)');
});

$('.right').click(function() {
  now -= 10;
  $(".d").css('transform', 'rotate(' + now + 'deg)');
});

正如另一个人刚刚指出的那样，您在 rotate 和 ( 之间的空格也破坏了它。

如果您需要，这里有一个 CodePen:https://codepen.io/MSCAU/pen/MZgqop