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

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

转载作者：行者123 更新时间：2023-11-30 13:59:28

25

4

<分区>

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

我的代码 can be found here

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>

25

4

0

文章推荐： javascript - 基于函数顺序的不同函数输出

wpf - 智能 DropShadowEffect
是否可以有DropShadowEffect渲染阴影时忽略某些颜色？有某种蒙版(颜色选择性)阴影？我的问题是什么阴影可以分配给整个视觉元素(图形)。它看起来像这样: 而且我要注意没有阴影的网格线(除
java - 在游戏中添加“智能”
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, over
maven - 地址已被使用？智能
有时，当我尝试使用 maven mvn clean install jetty:run 运行我的项目时，它会返回一个错误消息:“地址已在使用中”。我正在使用 Intellij IDEA 14。你能
php - 智能(？)数据库缓存
我见过几个数据库缓存引擎，它们都非常愚蠢(即:将此查询缓存 X 分钟)并要求您在之后手动删除整个缓存存储库>INSERT/UPDATE/DELETE 查询已执行。大约 2 或 3 年前，我为我正在
PHP - 智能、容错的字符串比较
我正在寻找例程或寻找错误容忍字符串比较的方法。比方说，我们有测试字符串 Čakánka - 是的，它包含 CE 字符。现在，我想接受以下任何字符串作为 OK: 恰坎卡 cákanká ÇaKaNK
gwt - 智能 gwt 开发者控制台
大家好我在 windows xp 系统上使用智能 gwt 2.3 专业版和 Mozilla。我在上面做了测试应用程序，它运行成功。现在我想为此应用程序使用开发人员控制台。我的gwt.xml 编
F# 方法重载解析不如 C# 智能？
说，我有 member this.Test (x: 'a) = printfn "generic" 1 member this.Test (x:
java - 智能 watch 应用部署
我正在努力寻找有关如何将应用程序部署到索尼智能 watch 的任何文档或教程(我正在尝试部署由索尼编写的开源“Eight Puzzle”应用程序，我已将其导入到 Eclipse 中。我有一个三星 S3
java - 智能 Java 格式化程序
我正在寻找一个类似于标准格式化程序的智能 Java 字符串格式化程序: StringBuffer buffer = new StringBuffer(); Formatter form
java - 智能 JScrollPane 跟随输出文本
我有一个智能 JScrollPane，但与其他所有解决方案不同，我想知道如果滚动 Pane 不在底部并且文本是否可以跟随(向上滚动)查看的组件(JTextArea)缓冲区已满。包含功能齐全的代码片段。
java - 永久内存不足 | java |智能
我有一个包含 18 个类(class)的项目。它们正在工作线程保存(已检查)，没有递归调用，也没有任何复杂的计算。但是我的IDEA总是说几个小时后 There is not enough memor
c# - 智能 XLS 示例？
我想使用 Smart XLS 库在 C# 中处理 excel 文件(特别是因为它可以生成图表，而且它的价格明显低于 Aspose Cells)，但我找不到任何好的例子。我只想知道如何创建和修改图表，有
java - 综合(智能)数据库
我正在寻找一个完整的 java 日期管理库，它可以让我理解像这样的字符串: 明天中午 => 2011-10-20 12:00 今天下午 4 点 => 2011-10-20 16:00 等... 但如果
android - 智能 watch 如何让按钮打开手机中的文件
我想打开手机中的文件，通过 watch 中的 Action ... 问题是: Intent intent2 = new Intent(); intent2.setAction(android.cont
android - 智能 watch 示例安装
我想编译 Sony 为他的 SmartWatch 提供的示例。我按照此 page 中的说明进行操作.但是当我添加 SmartExtensionUtils 项目时，我看到了很多错误，例如:com.son
mysql - 智能 SQL 分组依据
我有一个 SQL 表:名称、位置、体积名称为字符串类型位置是两个 float 类型的字段(纬度和经度) int 类型的体积我想运行一个 SQL 查询，该查询将对特定范围内的所有位置进行分组并对所
java - 智能 : How to find a method?
我需要找到当我点击某物时调用的方法。项目很大，自己找会花不少时间。有什么办法可以做到吗？我正在使用 Android Studio，是的，这是我有史以来第一次使用其他人的项目。最佳答案我是怎么做到的
iphone - 智能 CVS 和核心数据
我在我的 iMac 上安装了智能 cvs，我已经从 cvs 更新了应用程序。然后我对我的代码和核心数据做了一些更改(核心数据更改是:从核心数据实体中删除一些属性)，然后我尝试将更改提交给 cvs，但我
java - 智能/Tomcat : NoSuchMethodError
在我的 Java 项目中，我有一个类 Person，它存在于两个具有相同包名 (com.example.beans) 的不同 jar 中。问题是这个类在jar1中是这样定义的: class Pers
css - 智能 CSS 压缩器？
已关闭。此问题旨在寻求有关书籍、工具、软件库等的建议。不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以

首页

博学

6Ren·AI

商城

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