Question

我之前有过这个问题，但又出现了另一个问题。我想顺时针旋转一个元素22'，然后点击返回0'初始状态。第一个函数运行正常，但第二个函数在3秒后调用，除非重新点击，否则不会触发。

var rotated = false;

function clicked() {
    document.getElementById('box').onclick = function() {
        var div = document.getElementById('box'),
        deg = rotated ? 0 : 22;

        div.style.webkitTransform = 'rotate('+deg+'deg)'; 
        div.style.mozTransform    = 'rotate('+deg+'deg)'; 
        div.style.msTransform     = 'rotate('+deg+'deg)'; 
        div.style.oTransform      = 'rotate('+deg+'deg)'; 
        div.style.transform       = 'rotate('+deg+'deg)'; 
    }
    setInterval(res, 3000);
    function res() {
        document.getElementById('box').onclick = function() {
            var div = document.getElementById('box'),
            deg = rotated ? 0 : 0;

            div.style.webkitTransform = 'rotate('+deg+'deg)'; 
            div.style.mozTransform    = 'rotate('+deg+'deg)'; 
            div.style.msTransform     = 'rotate('+deg+'deg)'; 
            div.style.oTransform      = 'rotate('+deg+'deg)'; 
            div.style.transform       = 'rotate('+deg+'deg)'; 
        }   
    }
}

Answer 1

只需从res()中删除处理程序：

var rotated = false;

function clicked() {
  document.getElementById('box').onclick = function() {
    var div = document.getElementById('box'),
      deg = rotated ? 0 : 22;

    div.style.webkitTransform = 'rotate(' + deg + 'deg)';
    div.style.mozTransform = 'rotate(' + deg + 'deg)';
    div.style.msTransform = 'rotate(' + deg + 'deg)';
    div.style.oTransform = 'rotate(' + deg + 'deg)';
    div.style.transform = 'rotate(' + deg + 'deg)';
  }
  setInterval(res, 3000);

  function res() {
    // document.getElementById('box').onclick = function() {
      var div = document.getElementById('box'),
        deg = rotated ? 0 : 0;

      div.style.webkitTransform = 'rotate(' + deg + 'deg)';
      div.style.mozTransform = 'rotate(' + deg + 'deg)';
      div.style.msTransform = 'rotate(' + deg + 'deg)';
      div.style.oTransform = 'rotate(' + deg + 'deg)';
      div.style.transform = 'rotate(' + deg + 'deg)';
    //}
  }
}
clicked();

#box {
  background-color: red;
  width: 50px;
  height: 50px;
}

<div id="box"></div>

根据您的需要，您还可以做一些简化的事情，例如：

document.getElementById('box').onclick = function() {
  clicked(this, 22); // this is the element clicked
  setInterval(clicked, 3000, this, 0);
}

function clicked(div, deg) {
    div.style.webkitTransform = 'rotate(' + deg + 'deg)';
    div.style.mozTransform = 'rotate(' + deg + 'deg)';
    div.style.msTransform = 'rotate(' + deg + 'deg)';
    div.style.oTransform = 'rotate(' + deg + 'deg)';
    div.style.transform = 'rotate(' + deg + 'deg)';
}

#box {
  background-color: red;
  width: 50px;
  height: 50px;
}

<div id="box"></div>

需要单击以调用函数

1 个答案: