个人中心
gpt4 book ai didi

javascript - "Shaking Effect"仅持续一个周期

转载 作者：行者123 更新时间：2023-12-01 02:02:39 25 4
gpt4 key购买 nike

我正在尝试制作一个元素，它可以来回摇晃并变小，然后在单击时重置为其原始大小。问题是，当点击时，它似乎经历了尺寸循环，但在第一个之后，它就不再晃动了。如果尝试到处移动功能，但似乎没有任何效果。我的代码中是否存在导致此问题的错误？

var rotated = false;
var height = 24.6;
var width = 15

var points = 0;

function cl() {
  width = width / 1.1;
  height = height / 1.1;
}

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

    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, 140);
  }
}

function res() {
  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)';
}





setInterval(gamerule, 10);

function gamerule() {
  var div = document.getElementById('box');
  div.style.width = width + "%";
  div.style.height = height + "%";

  if (width < 1) {
    width = 15;
    height = 24.6;
    document.getElementById("cont").style.pointerEvents = "none";
    setInterval(ser, 1000);
    points++;

    function ser() {
      document.getElementById("cont").style.pointerEvents = "all";
    }
  }
}
body {
  background-color: #ccc;
}

#cont {
  width: 90%;
  height: 104%;
  background-color: white;
  position: absolute;
  left: 65px;
  top: -30px;
}

#box {
  background-color: black;
  width: 15%;
  height: 24.6%;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  position: absolute;
  top: 35.7%;
  left: 41.7%;
}
<div id="cont" onclick="cl()">
  <div id="box" onclick="clicked()">

  </div>
</div>

最佳答案

看起来你有一堆垃圾代码，所以我删除了它。此外，您还使用了 setInterval 而不是 setTimeout。

var rotated = false;
var height = 24.6;
var width = 15

var points = 0;
document.querySelector("#box").addEventListener("click", clickFunction);
// Call this function to simulate the click
function clickFunction() {
  width = width / 1.1;
  height = height / 1.1;
  var div = document.getElementById("box"),
      deg = rotated ? 0 : 30;

  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)";
  // You had set Interval I changed it to setTimeout
  setTimeout(res, 140);
}

 function res() {
  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)";
}





setInterval(gamerule, 10);
function gamerule() {
  var div = document.getElementById("box");
  div.style.width           = width + "%";
  div.style.height          = height + "%";

  if (width < 1) {
    width = 15;
    height = 24.6;
    document.getElementById("cont").style.pointerEvents = "none";
    setInterval(ser, 1000);
    points++;
    function ser() {
        document.getElementById("cont").style.pointerEvents = "all";
    }
  }
}
body{
  background-color:#ccc;
}
#cont{
  width:90%;
  height:104%;
  background-color:white;
  position:absolute;
  left:65px;
  top:-30px;
}
#box{
  background-color:black;
  width:15%;
  height:24.6%;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  position:absolute;
  top:35.7%;
  left:41.7%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Clicker</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="cont">
      <div id="box">

      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

关于javascript - "Shaking Effect"仅持续一个周期，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50429801/

25 4 0
文章推荐： jquery - 如何获取父div
文章推荐： jquery - 删除/删除与类最接近的元素
文章推荐： javascript - 为什么 jquery 正则表达式每次返回不同的测试用例？
文章推荐： jquery - 根据元素的数据属性对 div 进行排序
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com