Question

我用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>

Answer 1

我认为您可以通过分解代码来减少代码，因为据我所知，大多数代码都是相同的。

您的代码可以是这样的，它将或多或少地执行相同的操作：

df['proximal'] = [
    is_proximal((a, b), (c, d)) 
    for a, b, c, d in df[['lat_x', 'long_x', 'lat_y', 'long_y']].values
]

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);

}

无需任何CSS即可完成

，如果您希望它仅是一项功能：

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

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

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);

}

Answer 2

您可以使用CSS Animations而不是JavaScript来实现动画。我在下面提供一个示例，以帮助您入门。只需更改动画属性即可获得预期的效果。

.container {
  text-align: center;
  margin: 0 auto;
}

#tres, #dois, #um, #go {
  font-size: 0;
  animation: .5s ease-in-out 2 forwards alternate zoom;
}
#dois {
  animation-delay: 1s;
}
#um {
  animation-delay: 2s;
}
#go {
  animation-delay: 3s;
  animation-iteration-count: 1;
}

@keyframes zoom {
    0% { font-size: 0; }   
    100% { font-size: 80px; }
 }

<div class="container">
  <div id="tres">3</div>
  <div id="dois">2</div>
  <div id="um">1</div>
  <div id="go">GO!</div>
</div>

在示例中，ease-in-out用于animation-timing-function属性。但是，如果您需要的速度功能与您的帖子中的速度功能相同，请使用其他预定义的速度曲线或使用cubic-bezier() function定义自己的速度曲线。

Answer 3

将CSS与一些JS混合以提供灵活性：

var states = [3, 2, 1, "GO!"];
var countdownElement = document.getElementById('countdown');

states.forEach(function(state, index){
  countdown.style.animationIterationCount = states.length * 2 - 1;

  setTimeout(function(){
    countdownElement.innerHTML = state;
  }, index * 1000);
});

.countdown-out, .countdown-in {
  animation: .5s linear forwards alternate zoom;
}

@keyframes zoom {
  0% { font-size: 0; }   
  100% { font-size: 64px; }
}

<div id="countdown">3</div>

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

3 个答案: