Question

我正在努力使一个元素在你点击它时越来越缩小。一旦达到1％的阈值，它应该重新出现在全长而不是可点击的。 style.pointerEvents不起作用。（这是添加的代码，以解决问题。）这是所有代码，必须存在冲突的变量或其他内容。但主要的前提是摇动元素并缩小然后重新生成并禁用自身，并在等待一段时间后自行启用。

`var rotating = false; var height = 24.6; var width = 15

function clickedhub() {
    clicked();
    timeout();
}

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

    div.style.webkitTransform = 'rotate('+deg+'deg)'; 
    div.style.msTransform     = 'rotate('+deg+'deg)'; 
    div.style.oTransform      = 'rotate('+deg+'deg)'; 
    div.style.transform       = 'rotate('+deg+'deg)';
   }
   setInterval(res, 140);
   function res() {
    document.getElementById('box').style = 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)';
 }  
}
}


function timeout() {
    document.getElementById('box').onclick = function() {
    var div = document.getElementById('box');
    width = width / 1.5;
    height = height / 1.5; 
     }
   }

setInterval(gamerule, 10);
   function gamerule() {
        var div = document.getElementById('box');
        if (width <= 1) {
            div.removeEventListener("click", gamerule);
            width = 100;
            height = 100;
    } else {
        width--;
        height--;
    }
    div.style.width = width + '%';
    div.style.height = height + '%';
    div.addEventListener("click", gamerule);
}

`

Answer 1

这应该对你有用

//setInterval(gamerule, 10);
let width = 100;
let height = 100;



var div = document.getElementById('box');

function gamerule() {
    if (width <= 1) {
        div.removeEventListener("click", gamerule);
        width = 100;
        height = 100;
    } else {
        width--;
        height--;
    }
    div.style.width = width + '%';
    div.style.height = height + '%';

}
div.addEventListener("click", gamerule);

#box{
  background-color:red;
  width:100%;
  height:100%;
}
#container{
  width:500px;
  height:500px;
}

Click on the red box 
<div id="container" >
  <div id="box">
  </div>
</div>

style.pointerEvents无法正常工作

1 个答案: