时间戳

首页 > 解决方案 > JavaScript 扩大和缩小“球”对象

javascript - JavaScript 扩大和缩小“球”对象

问题描述

开始学习一点javascript，当我点击它时，我遇到了一个任务，即让一个“球”越来越大（球从100开始，每次点击增长50）。因此，当它变得太 400 时，它应该将其大小缩小 50，直到球再次达到 100，然后他长大。

这就是代码：

      function onBall2Click() {
        var ball2 = document.querySelector('.ball2');
        if(ball2Size === 400) {
            ball2Size -= 50;
        } else if(ball2Size) {
            ball2Size += 50;
        }
      
       
      
        ball2.innerText = ball2Size;
        ball2.style.width = ball2Size;
        ball2.style.height = ball2Size;
    }

ball2Size 定义为 100。

现在，当我再次单击时，球达到 400，它达到 350，但随后又达到 400，因为 350 不是 === 到 400。我很沮丧，我试着玩了一个小时，但被卡住了，这就是为什么我将其发布在这里..希望有人能给我一个有用的解决方案。谢谢你！

标签： javascript

解决方案

添加一个保存方向的变量。direction = "growing"或direction = "shrinking"。或者更简单，一个布尔值（真=增长，假=收缩）。

let isGrowing = true;
const ball2 = document.querySelector('.ball2');

function onBall2Click() {

    if (ball2Size === 400) {
        isGrowing = false
    } else if (ball2Size === 100) {
        isGrowing = true
    }

    if (isGrowing) {
        ball2Size += 50;
    } else {
        ball2Size -= 50;
    }

    ball2.innerText = ball2Size;
    ball2.style.width = ball2Size;
    ball2.style.height = ball2Size;
}

推荐阅读