每次单击按钮即可旋转div元素 [英] Rotate div-element with every click on a button

问题描述

要点:单击按钮时，content-div旋转360度.但是，在第二次单击时，什么也没有发生.

To the point: The content-div rotates 360 degrees when the button is clicked. But, on the 2nd click, nothing happens.

我想要的是，每次点击按钮时div元素都会旋转360度，就像第一次点击一样.

What I want, is that on every click on the button the div-element rotates 360 degrees, just like it does on the first click.

我找到了一些jQuery建议，但我希望通过使用JavaScript 来实现.

I have found some jQuery suggestions, but I wish to accomplish this by using JavaScript.

var content = document.getElementById("content");
var btn = document.getElementById("btn");
btn.addEventListener("click", function() {
  content.style = 'transform: rotate(' + 0 + '360deg)';
});

#content {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 1s ease-in-out;
}

#btn {
  width: 100px;
  height: 50px;
  background: grey;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
}

a {
  color: white;
  text-decoration: none;
}

<div id="content">
  <p>It's spinning</p>
</div>
<div id="btn"><a href="#">Click</a></div>

推荐答案

您只需要继续添加360！

You just need to keep adding 360!

var content = document.getElementById("content");
var btn = document.getElementById("btn");
var rot = 360;
btn.addEventListener("click", function() {
  content.style = 'transform: rotate(' + rot + 'deg)';
  rot += 360;
});

#content {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 1s ease-in-out;
}

#btn {
  width: 100px;
  height: 50px;
  background: grey;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
}

a {
  color: white;
  text-decoration: none;
}

<div id="content">
  <p>Its spinning</p>
</div>
<div id="btn"><a href="#">Click</a></div>

这篇关于每次单击按钮即可旋转div元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！