javascript - 为什么我的最新代码覆盖了我的其余代码-6ren

javascript - 为什么我的最新代码覆盖了我的其余代码

转载作者：行者123 更新时间：2023-12-04 09:12:41

24

4

我有一个带计时器的页面。我最新计时器的代码只能正常工作。但其余的计时器不像 10 分钟计时器。它只显示计时器的设置时间。我的最新代码是否覆盖了我的其他代码？两个计时器之间是否混合了变量？我打算在页面上添加几个计时器，但发生这种情况时我被卡住了。
代码链接:http://jsfiddle.net/vtoLx02j/2/

<body>
    
    <div id="1Div">
    
    <h4>Question goes here?</h4>
    
      <input type="text"id="name1"/>
    
      <button onclick="myFunction1()" id="button0" class="button3">Enter</button>
    
    
    </div>
    
    
    <div id="2Div" style="display:none;">
            <h4 id=typeE>How much time do you think you need in minutes?</h4>
            <button onclick="myFunction2()" id="button1" class="button3">10 minutes</button>
            <button onclick="myFunction3()" id="button2" class="button3">20 minutes</button>
            
    </div>
    
    <script>
      function myFunction1(){
        document.getElementById("1Div").style.display="none";
        document.getElementById("2Div").style.display="block";
    }
    </script>
    
    <script>
      function myFunction2(){
        document.getElementById("2Div").style.display="none";
        document.getElementById("timer10").style.display="block";
      }
    </script>
    
    <script>
      function myFunction3(){
        document.getElementById("2Div").style.display="none";
        document.getElementById("timer20").style.display="block";
      }
    </script>
    
    
    <div id="timer10" style="display:none">
    
    <script>
        function startTimer10(duration10, display10) {
        var timer10 = duration10, minutes10, seconds10;
        setInterval(function () {
            minutes10 = parseInt(timer10 / 60, 10);
            seconds10 = parseInt(timer10 % 60, 10);
    
            minutes10 = minutes10 < 10 ? "0" + minutes10 : minutes10;
            seconds10 = seconds10 < 10 ? "0" + seconds10 : seconds10;
    
            display10.textContent = minutes10 + ":" + seconds10;
    
            if (--timer10 < 0) {
                timer10 = duration10;
            }
        }, 1000);
    }
    
    window.onload = function () {
        var tenMinutes = 60 * 10,
            display10 = document.querySelector('#time10');
        startTimer10(tenMinutes, display10);
    };
    </script>
     
     <body>
        
        <center><div><span id="time10">10:00</span></div></center>
        
    </body>
    
    </div>
    
    
    <div id="timer20" style="display:none">
        <script>
        function startTimer20(duration20, display20) {
        var timer20 = duration20, minutes20, seconds20;
        setInterval(function () {
            minutes20 = parseInt(timer20 / 60, 10);
            seconds20 = parseInt(timer20 % 60, 10);
    
            minutes20 = minutes20 < 10 ? "0" + minutes20 : minutes20;
            seconds20 = seconds20 < 10 ? "0" + seconds20 : seconds20;
    
            display20.textContent = minutes20 + ":" + seconds20;
    
            if (--timer20 < 0) {
                timer20 = duration20;
            }
        }, 1000);
    }
    
    window.onload = function () {
        var twentyMinutes = 60 * 20,
            display20 = document.querySelector('#time20');
        startTimer20(twentyMinutes, display20);
    };
    </script>
     
     <body>
        
        <center><div><span id="time20">20:00</span></div></center>
        
    </body>
    </div>
    
    </body>

最佳答案

您可以简单地组合所有 functions成单startTimer()功能。
我不知道你为什么是 repeating您的 code一次又一次地实现相同的结果。代码更少但结果相同是件好事。
所以这就是我所做的并简化了您的代码。

我已经合并了两个 timers进入一 function

您不需要使用显示 none和 block再次上演时长

当您点击 timer只需通过 minutes到计时器功能，跨度将开始显示剩余时间

您不需要两个跨度来分别显示计时器，您可以在一个中完成所有操作 span

您正在使用 script标记这么多次不必要的

两个计时器都以更少的代码和相同的结果完美运行。

您可以有多个 timers现在你只需要通过 minutes给您的 startTimer()函数和计时器将从给定的时间开始。
现场演示

//Start timer
function startTimer(duration, display) {
  var timer = duration,
    minutes, seconds;
  setInterval(function() {
    minutes = parseInt(timer / 60, 10);
    seconds = parseInt(timer % 60, 10);
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    display.textContent = minutes + ":" + seconds;
    if (--timer < 0) {
      timer = duration;
    }
  }, 1000);
}

//1
function myFunction1() {
  document.getElementById("1Div").style.display = "none";
  document.getElementById("2Div").style.display = "block";
}

//10 Minutes
function myFunction2() {
  document.getElementById("2Div").style.display = "none";
  var tenMinutes = 60 * 10,
  display10 = document.querySelector('#timerDuration');
  startTimer(tenMinutes, display10);
}

//20 minutes
function myFunction3() {
  document.getElementById("2Div").style.display = "none";
  var twentyMinutes = 60 * 20,
  display20 = document.querySelector('#timerDuration');
  startTimer(twentyMinutes, display20);
}

<body>
  <div id="1Div">
    <h4>Question goes here?</h4>

    <input type="text" id="name1" />

    <button onclick="myFunction1()" id="button0" class="button3">Enter</button>
  </div>
  <div id="2Div" style="display:none;">
    <h4 id=typeE>How much time do you think you need in minutes?</h4>
    <button onclick="myFunction2()" id="button1" class="button3">10 minutes</button>
    <button onclick="myFunction3()" id="button2" class="button3">20 minutes</button>
  </div>
  <center>
    <div><span id="timerDuration"></span></div>
  </center>
</body>

关于javascript - 为什么我的最新代码覆盖了我的其余代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63321763/

24

4

0

文章推荐： assembly - 当 D-cache 关闭时，使 D-cache 失效的目的是什么？

C++ 覆盖...覆盖？
我知道 C++ 中的 overriding 是什么。但是，是否存在覆盖？如果有，是什么意思？谢谢。最佳答案在 C++ 术语中，您有覆盖(与类层次结构中的虚拟方法相关)和重载(与具有相同名称但
覆盖/覆盖/堆叠元素上的 Javascript 鼠标事件
我想捕获位于另一个元素下的元素的鼠标事件。这是我所拥有的示例:http://jsfiddle.net/KVLkp/13/ 现在我想要的是当鼠标悬停在红色方 block 上时蓝色方 block 有黄色
python - Pandas boxplot 覆盖/覆盖 matplotlib 图
以下报道 here我尝试创建一个带有重叠散点图的箱线图。但是当我运行时: In [27]: table1.t_in[table1.duration==6] Out[27]: counter 7
javascript - 在 JavaScript 事件中替换/覆盖/覆盖 e.target
有一个 JS Fiddle here , 你能在不克隆到新对象的情况下替换 e.target 吗？下面重复了那个 fiddle 的听众； one.addEventListener('click',
JavaDoc 覆盖
首先要解决重复的可能性: 我不是询问 Override 是什么、它的含义或 @Override 在 java 文档注释之外。那是我不是问 /**Some JavaDoc Comment*/ @over
Java特殊数组补顶/覆盖
我想要高于定义的数组。它存储点及其坐标。 public static List simpleGraph(List nodes) { int numEdges = nodes.size() *
CSS 覆盖
我在 http://olisan.dk/blog/ 有一个博客- 如您所见，有一个 28 像素的高间隙(边距顶部)...在 style.css 中: margin-top: 0; 也被设置为 marg
c++ - 覆盖 VK_USE_64_BIT_PTR_DEFINES
Vulkan 句柄是指向 struct 的不透明指针，或者只是无符号的 64 位整数，具体取决于 VK_USE_64_BIT_PTR_DEFINES 的值: #if (VK_USE_64_BI
wpf - 覆盖 DataGridTextColumn
我正在尝试提供一个行为类似于 DataGridTextColumn 的 DataGrid 列，但在编辑模式下有一个附加按钮。我查看了 DataGridTemplateColumn，但似乎更容易将 Da
Django 覆盖 ASCIIUsernameValidator
使用 Django 1.10 我想在用户名中允许\字符，因为我在使用“django.contrib.auth.middleware.RemoteUserMiddleware”的 Windows 环境中
找不到用于在视频中添加水印的 FFMPEG 覆盖
我正在尝试使用 ffmpeg 将 Logo 放入 rtmp 流中。我的 ffmpeg 版本是 ffmpeg version 4.3.1目前在我的复杂过滤器中，我有: ffmpeg -re -i 'v
Firebase 3存储不允许文件更新/覆盖
是否有用于Firebase 3存储的方法/规则来禁用文件更新或覆盖？我为数据库找到了data.exists()，但没有为存储找到解决方案。最佳答案 TL; DR:在Storage Security
Docker Compose 覆盖
我有两个 Docker Compose 文件，docker-compose.yml看起来像这样 version: '2' services: mongo: image: mongo:3.2
java - 覆盖@CollectionTable
我需要覆盖 JPA 中的集合表吗？也许有人有想法 public class nationality{ @Embedded @AttributeOverrides({
WIX 安装文件，覆盖
嗨，我正在使用 WIX 和下面的代码将文件安装到目录中。我的应用程序的工作方式是用户可以在该目录中复制他们自己的文件，覆盖他们喜欢的内容
Lua 覆盖 # 字符串
我正在尝试为 Lua 中的字符串实现我自己的长度方法。我已成功覆盖字符串的 len() 方法，但我不知道如何为 # 运算符执行此操作。 orig_len = string.len function
scala - 覆盖 'val'时出现意外结果
在Scala 2.10.4中，给出以下类: scala> class Foo { | val x = true | val f = if (x) 100 else 200
Magento 覆盖 Controller
我想做上面的事情。我过去覆盖了许多文件...... block ，模型，助手......但这个让我望而却步。谁能看到我在这里做错了什么: (我编辑了这段代码......现在包括一些建议......
java - 参数顺序 - 覆盖
根据javadoc An instance method in a subclass with the same signature (name, plus the number and the ty
Java FileWriter 覆盖
我有一段代码，只要有可用的新数据作为 InputStream 就会生成新数据。每次都覆盖同一个文件。有时文件在写入之前变为 0 kb。 Web 服务会定期读取这些文件。我需要避免文件为 0 字节的情况

首页

博学

6Ren·AI

商城

javascript - 为什么我的最新代码覆盖了我的其余代码