javascript - 如何以更智能的方式使数字增长和减少？

<分区>

我用 JavaScript 创建了一个函数，它是屏幕上数字的倒计时，它会增加和减小它的大小，但是，代码太大了，我想知道如何在不使用的情况下以更智能的方式完成它很多行。谢谢

var mudar5 = document.getElementById("cinco");
var mudar4 = document.getElementById("quatro");
var mudar3 = document.getElementById("tres");
var mudar2 = document.getElementById("dois");
var mudar1 = document.getElementById("um");
var mudarGo = document.getElementById("go");
mudar3.style.fontSize = "20px";

var fonteAtual = 1;
var minSize = 1;
var maxSize = 80;
var intervalTime = 10;
var intervalTimeDecrease = 2;

increaseSize();

//liga o cinco
function increaseSize() {

  var interval = setInterval(function() {
    fonteAtual++;

    mudar3.style.fontSize = fonteAtual + "px";

    if (fonteAtual === maxSize) {
      clearInterval(interval);
      decreaseSize();
    }

  }, intervalTime);

}

function decreaseSize() {

  var interval = setInterval(function() {
    fonteAtual--;
    mudar3.style.fontSize = fonteAtual + "px";

    if (fonteAtual === minSize) {
      clearInterval(interval);
      liga2();
    }

  }, intervalTimeDecrease);

}
//liga o quatro
function liga2() {
  document.querySelector("#tres").style.display = "none";
  document.querySelector("#dois").style.display = "block";
  increasetwo();
}

function increasetwo() {

  var interval = setInterval(function() {
    fonteAtual++;

    mudar2.style.fontSize = fonteAtual + "px";

    if (fonteAtual === maxSize) {
      clearInterval(interval);
      decreasetwo();
    }

  }, intervalTime);

}

function decreasetwo() {

  var interval = setInterval(function() {
    fonteAtual--;
    mudar2.style.fontSize = fonteAtual + "px";

    if (fonteAtual === minSize) {
      clearInterval(interval);
      liga1();
    }

  }, intervalTimeDecrease);

}


//liga o 3
function liga1() {
  document.querySelector("#dois").style.display = "none";
  document.querySelector("#um").style.display = "block";
  increaseone();
}

function increaseone() {

  var interval = setInterval(function() {
    fonteAtual++;

    mudar1.style.fontSize = fonteAtual + "px";

    if (fonteAtual === maxSize) {
      clearInterval(interval);
      decreaseone();
    }

  }, intervalTime);
}

function decreaseone() {
  var interval = setInterval(function() {
    fonteAtual--;
    mudar1.style.fontSize = fonteAtual + "px";

    if (fonteAtual === minSize) {
      clearInterval(interval);
      ligaGo();
    }

  }, intervalTimeDecrease);
}


//Liga o Go
function ligaGo() {
  document.querySelector("#um").style.display = "none";
  document.querySelector("#go").style.display = "block";
  increaseGo();
}

function increaseGo() {

  var interval = setInterval(function() {
    fonteAtual++;

    mudarGo.style.fontSize = fonteAtual + "px";

    if (fonteAtual === maxSize) {
      clearInterval(interval);
      mudarGo.style.fontSize = 80 + "px";
    }

  }, intervalTime);
}

//liga o Um
function liga1() {
  document.querySelector("#dois").style.display = "none";
  document.querySelector("#um").style.display = "block";
  increaseone();
}

function increaseone() {

  var interval = setInterval(function() {
    fonteAtual++;

    mudar1.style.fontSize = fonteAtual + "px";

    if (fonteAtual === maxSize) {
      clearInterval(interval);
      decreaseone();
    }

  }, intervalTime);
}

function decreaseone() {
  var interval = setInterval(function() {
    fonteAtual--;
    mudar1.style.fontSize = fonteAtual + "px";

    if (fonteAtual === minSize) {
      clearInterval(interval);
      ligaGo();
    }

  }, intervalTimeDecrease);
}


//Liga o Go
function ligaGo() {
  document.querySelector("#um").style.display = "none";
  document.querySelector("#go").style.display = "block";
  increaseGo();
}

function increaseGo() {

  var interval = setInterval(function() {
    fonteAtual++;

    mudarGo.style.fontSize = fonteAtual + "px";

    if (fonteAtual === maxSize) {
      clearInterval(interval);
      mudarGo.style.fontSize = 80 + "px";
    }

  }, intervalTime);
}

#dois,
#um,
#go {
  display: none;
  font-size: 0px;
}

<body style="text-align: center; margin: 0 auto">
  <div id="tres">3</div>
  <div id="dois">2</div>
  <div id="um">1</div>
  <div id="go">GO!</div>
</body>

最佳答案

我认为您可以通过分解代码来减少代码，因为据我所知，大部分代码都做同样的事情。

你的代码可以是这样的，它或多或少会做同样的事情:

var counter = 3;
var fonteAtual = 1;
var minSize = 1;
var maxSize = 80;
var intervalTime = 10;
var intervalTimeDecrease = 2;


var mudar = document.getElementById("number");
mudar.innerHTML = counter;

increaseSize();

function increaseSize() {

  mudar.innerHTML = counter==0?'GO!':counter;
  
  var interval = setInterval(function() {
    fonteAtual++;

    mudar.style.fontSize = fonteAtual + "px";

    if (fonteAtual === maxSize) {
      clearInterval(interval);
      if(counter === 0){
        return;
      }
      decreaseSize();
    }

  }, intervalTime);

}

function decreaseSize() {

  mudar.innerHTML = counter==0?'GO!':counter;

  var interval = setInterval(function() {
    fonteAtual--;
    mudar.style.fontSize = fonteAtual + "px";

    if (fonteAtual === minSize) {
      clearInterval(interval);
      counter--;
      increaseSize()
    }

  }, intervalTimeDecrease);

}

<body style="text-align: center; margin: 0 auto">
<div id="number"></div>

<script src="JS/temp.js"></script>
</body>

不需要任何 CSS 来做同样的事情

如果您希望它只有一个功能:

var counter = 3;
var fonteAtual = 1;
var minSize = 1;
var maxSize = 80;
var intervalTime = 10;
var intervalTimeDecrease = 2;

var mudar = document.getElementById("number");

ChangeSize(true);

//-----------------------------------

function ChangeSize(sign){

  mudar.innerHTML = counter==0?'GO!':counter;
  
  var interval = setInterval(function() {
    fonteAtual = sign ? (fonteAtual + 1) : (fonteAtual - 1)

    mudar.style.fontSize = fonteAtual + "px";

    if (fonteAtual === maxSize) {
      clearInterval(interval);
      if(counter === 0){
        return;
      }
      ChangeSize(false)
    }

    if (fonteAtual === minSize) {
      clearInterval(interval);
      counter--;
      ChangeSize(true)
    }

  }, sign ? intervalTime : intervalTimeDecrease);

}

<body style="text-align: center; margin: 0 auto">
    <div id="number"></div>

    <script src="JS/temp.js"></script>
</body>

关于javascript - 如何以更智能的方式使数字增长和减少？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56606808/

上一篇：javascript - 仅当光标来自该元素外部时如何触发 "onmouseenter"

下一篇：javascript - 如何有条件地使用带有 ES6 样式导入的内置 Node.js 或浏览器 API 方法？

jquery - 显示基于表单输入的嵌入视频

css - SCSS Mixin append::before 样式

python - 抓取网页并需要选择正确的选择器

javascript - 位置 :Absolute Not Respecting It's Elders

javascript - 监视同步 XMLHttpRequest 调用的进度

javascript - 一页上有多个 slider

javascript - If 语句不适用于 cookie

jquery - 底部原点固定的 CSS 定位和缩放图像

javascript - 多个隐藏/显示文本