Question

我是一个JavaScript菜鸟，我正在努力完成以下任务：

一个div，其行为类似于按钮，其宽度（BG）逐渐增加点击（想想一个随每次点击而增加的进度条）一定数量，比如每次点击进度增加10％
父div宽度已满后，应该有一个 10秒延迟，之后div再次开始以恒定速率收缩。（有点像反向进度条）
宽度为时减少，用户应该能够点击div并开始再次增加直到达到最大宽度。

请查看以下图片以供参考：

我已经完成了第1步，我认为一旦我能够实施第2步，第3步就会自行处理。

请帮助我完成第二步，（不断减小背景div的宽度）。

我的代码如下：

var paddleBtn = document.getElementById('paddleBtn');
var paddleC = document.getElementById('paddleC');
if (paddleC) {
  paddleC.style.width = "0px";
}
if (paddleBtn) {
  paddleBtn.style.cursor = 'pointer';
  paddleBtn.onclick = function() {
    if ((parseInt(paddleC.style.width) + 5) < paddleC.parentElement.offsetWidth) {
      var widthC = parseInt(paddleC.style.width) + 20;
      paddleC.style.width = String(widthC).concat('px');
      if (paddleC.offsetWidth > paddleC.parentElement.offsetWidth) {
        paddleC.style.width = paddleC.parentElement.offsetWidth;
      }
    }
    if (parseInt(paddleC.style.width) >= paddleC.parentElement.offsetWidth - 5) {
      paddleC.style.backgroundColor = "#B3DDE0";
      paddleC.style.width = paddleC.parentElement.offsetWidth - 2;
    }
  };
}

.btn {
  display: inline-block;
  border: 1px solid Black;
  height: 30px;
  width: 100px;
}

.cooldown {
  z-index: 1;
  position: fixed;
  height: inherit;
  background-color: #DCDCDC;
  -webkit-transition: width 0.4s ease-in-out;
  -moz-transition: width 0.4s ease-in-out;
  -o-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
  transition: background-color 0.2s ease;
}

.labelT {
  z-index: 2;
  position: fixed;
  padding: 5px;
  text-align: center;
  font-size: 18px;
  font-family: "Arial", Times, serif;
  width: inherit;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<html>

<head>
  <script src="./script.js" async></script>
</head>

<body>
  <div class='btn' id='paddleBtn'>
    <div class='labelT'>Paddle</div>
    <div class='cooldown' id='paddleC'></div>
  </div>
</body>

</html>

对于丑陋的代码感到抱歉，正如我所说，我仍然试图了解JavaScript基础知识。我不得不修改代码示例以使其在StackOverflow上运行。

请帮忙！

谢谢！ Viksit

Answer 1

你可以试试这个。你可以根据你的要求改变间隔时间，我现在放3秒。感谢

   

 var paddleInterval;
    var paddleBtn = document.getElementById('paddleBtn');
    var paddleC = document.getElementById('paddleC');
    function decreasePaddle(){
        var widthC = parseInt(paddleC.style.width) - 20;
        paddleC.style.width = String(widthC).concat('px');
        paddleC.style.backgroundColor = "#DCDCDC";
        if (parseInt(paddleC.style.width) <= 0){
clearInterval(paddleInterval);
}
    }
    if (paddleC) {
      paddleC.style.width = "0px";
    }
    if (paddleBtn) {
      paddleBtn.style.cursor = 'pointer';
      paddleBtn.onclick = function() {
        if ((parseInt(paddleC.style.width) + 5) < paddleC.parentElement.offsetWidth) {
          clearInterval(paddleInterval);
          var widthC = parseInt(paddleC.style.width) + 20;
          paddleC.style.width = String(widthC).concat('px');
          if (paddleC.offsetWidth > paddleC.parentElement.offsetWidth) {
            paddleC.style.width = paddleC.parentElement.offsetWidth;
          }
        }
        if (parseInt(paddleC.style.width) >= paddleC.parentElement.offsetWidth - 5) {
          paddleC.style.backgroundColor = "#B3DDE0";
          paddleC.style.width = paddleC.parentElement.offsetWidth - 2;
          paddleInterval = setInterval(decreasePaddle, 3000);
        }
      };
    }

.btn {
  display: inline-block;
  border: 1px solid Black;
  height: 30px;
  width: 100px;
}

.cooldown {
  z-index: 1;
  position: fixed;
  height: inherit;
  background-color: #DCDCDC;
  -webkit-transition: width 0.4s ease-in-out;
  -moz-transition: width 0.4s ease-in-out;
  -o-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
  transition: background-color 0.2s ease;
}

.labelT {
  z-index: 2;
  position: fixed;
  padding: 5px;
  text-align: center;
  font-size: 18px;
  font-family: "Arial", Times, serif;
  width: inherit;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<html>

<head>
  <script src="./script.js" async></script>
</head>

<body>
  <div class='btn' id='paddleBtn'>
    <div class='labelT'>Paddle</div>
    <div class='cooldown' id='paddleC'></div>
  </div>
</body>

</html>

Answer 2

您可以使用setInterval完成此操作。请记住将其分配给可到达的变量（IE：var interval = setInterval（..）;），这样您就可以引用它并在每次需要时取消它（IE：用户点击时 - > gt; setTimeout / setInterval 10s - ＆gt; setInterval改变宽度的200ms直到0）

JavaScript - 在固定间隔后连续减小div宽度

2 个答案: