• js计时器倒计时显示问题

    关注 码龄 粉丝数 原力等级 -- 被采纳 被点赞 采纳率 ．548 2024-05-22 20:15 采纳率: 50% 浏览 6 首页/ 编程语言 / js计时器倒计时显示问题 javascripthtml js计时器显示出现跳动 在重新开启计时器时候 会出现先继承上一次暂停计时器的时间 再从14s往下跳动 即我在回答问题点下选项按钮的时候 会有剩余时间如图8s进入判断答案正误界面点击nextquestion按钮进入下一个问题进入下一个问题界面后 显示剩余时间7s但是很快会跳到14s然后正常倒计时 最主要是有时候不会出现这种状况 正常从15s开始倒计时 一开始我认为是显示问题 在renwal函数开头更新 document.getElementById("timer").innerText = "Time to answer 15 seconds"; 但是没有用 后来尝试用date函数来构造计时器但是出现了其他bug 希望能得到解答注startTimer函数构造计时器并每1s更新倒计时 stop变量实际上是我为了以按下选项按钮为条件设置的 当我没有按钮按钮 stop=F 当按下按钮 selectionAnswer函数会将stop变为T从而触发计时器中的条件进而clearInterval(timerInterval) 这是Quit.html ```html Quit sss

    MyWebsite

    school logo

    Welcome to quiz!

    这是quit.js ```javascript var questions = [ { question: "Which planet is known as the Red Planet?", options: ["Jupiter", "Mars", "Venus", "Saturn"], answer: "B" }, { question: "What is the capital of Australia?", options: ["Sydney", "Melbourne", "Canberra", "Brisbane"], answer: "C" }, { question: "Who painted the Mona Lisa?", options: ["Leonardo da Vinci", "Pablo Picasso", "Vincent van Gogh", "Michelangelo"], answer: "A" }, { question: "What is the largest ocean on Earth?", options: ["Atlantic Ocean", "Indian Ocean", "Arctic Ocean", "Pacific Ocean"], answer: "D" }, { question: "What is the main ingredient in guacamole?", options: ["Tomato", "Avocado", "Onion", "Pepper"], answer: "B" }, { question: "Who wrote 'Pride and Prejudice'?", options: ["Emily Bronte", "Jane Austen", "Charlotte Bronte", "Louisa May Alcott"], answer: "B" }, { question: "Which country is famous for the Great Wall?", options: ["Japan", "China", "India", "Russia"], answer: "B" }, { question: "What is the largest mammal?", options: ["Elephant", "Blue whale", "Giraffe", "Hippopotamus"], answer: "B" }, { question: "What is the capital of Brazil?", options: ["Rio de Janeiro", "Brasília", "São Paulo", "Salvador"], answer: "B" }, { question: "Who discovered penicillin?", options: ["Alexander Fleming", "Marie Curie", "Louis Pasteur", "Robert Koch"], answer: "A" } ]; var startTime; function startDate(){ startTime = new Date(); } var endTime; function endDate(){ endTime = new Date(); } var inputName=''; function show(){ let div1obj=document.getElementById("div1"); let div2obj=document.getElementById("div2"); inputName = document.getElementById("welcome").value; div1obj.style.display="none"; div2obj.style.display="block"; startDate() } var stop='F'; function startTimer() { let timeLeft = 15; // 初始倒计时时间，单位为秒 document.getElementById("timer").innerText = "Time to answer: " + timeLeft + " seconds"; // 更新显示的倒计时时间 let timerInterval = setInterval(function () { timeLeft--; // 每次执行时减少一秒 document.getElementById("timer").innerText = "Time to answer: " + timeLeft + " seconds"; // 更新显示的倒计时时间 if (timeLeft == 0) { clearInterval(timerInterval); selectionAnswer('F')//直接给个一定错误答案 弹出 } if (stop=='T'){ clearInterval(timerInterval); stop='F'; } }, 1000); // 每隔一秒执行一次 } var questionNo=1; function renewal(){ let div2obj = document.getElementById("div2"); let div3obj=document.getElementById("div3"); let div4obj=document.getElementById("div4"); div3obj.style.display = "none"; div4obj.style.display = "none"; div2obj.style.display = "block"; document.getElementById("questionNo").innerText = 'Question'+questionNo; document.getElementById("questionText").innerText = questions[questionNo - 1].question; document.getElementById("btn2").innerText = 'A.'+ questions[questionNo - 1].options[0]; document.getElementById("btn3").innerText = 'B.'+ questions[questionNo - 1].options[1]; document.getElementById("btn4").innerText = 'C.'+ questions[questionNo - 1].options[2]; document.getElementById("btn5").innerText = 'D.'+ questions[questionNo - 1].options[3]; startTimer(); } var selectedAnswer=''; function selectionAnswer(selection){ selectedAnswer = selection; stop='T' judgeAnswer(); questionNo = questionNo + 1; } function judgeAnswer(){ let answer=questions[questionNo-1].answer let div2obj=document.getElementById("div2"); let div3obj=document.getElementById("div3"); let div4obj=document.getElementById("div4"); let div5obj=document.getElementById("div5"); div2obj.style.display="none"; if(selectedAnswer==answer) { div3obj.style.display = "block"; numberQuestionsCorrectAnswer() } else { div4obj.style.display = "block"; } if(questionNo==10){ document.getElementById("btn6").style.display="none"; document.getElementById("btn7").style.display="none"; div5obj.style.display = "block"; } } var CorrectAnswer= 0; function numberQuestionsCorrectAnswer(){ CorrectAnswer = CorrectAnswer+1; if(questionNo==10){ document.getElementById("CorrectAnswer").innerText = "You got " + CorrectAnswer + " right out of 10."; endDate(); var timeAnswered = (endTime-startTime)/1000; document.getElementById("timeAnswered").innerText = inputName +' you use ' + timeAnswered + ' seconds to finish.'; saveUserData(inputName, CorrectAnswer, timeAnswered); readLeaderboard(); } } function saveUserData(inputName, CorrectAnswer, timeAnswered) { var users = JSON.parse(sessionStorage.getItem('users')) || []; users.push({ name: inputName, correctAnswers: CorrectAnswer, timeTaken: timeAnswered }); sessionStorage.setItem('users', JSON.stringify(users)); } function readLeaderboard(){ // 从本地存储中获取数组 var storedArray = JSON.parse(sessionStorage.getItem('users')); storedArray.sort(function(a, b) { if (b.correctAnswers !== a.correctAnswers) { return b.correctAnswers - a.correctAnswers; // 降序 } else { return a.timeTaken.toString().localeCompare(b.timeTaken.toString()); // 升序 } }); // 获取输出元素 var outputDiv = document.getElementById('output'); // 创建一个列表来显示数组内容 var ul = document.createElement('ul'); // 遍历数组并将每个元素添加到列表中 storedArray.forEach(function(user) { var li = document.createElement('li'); li.textContent = `Name: ${user.name}, CorrectAnswers: ${user.correctAnswers},timeTaken:${user.timeTaken}`; ul.appendChild(li); }); // 将列表添加到输出元素中 outputDiv.appendChild(ul); } 展开全部 收起 写回答 好问题 0 提建议 追加酬金 关注问题 微信扫一扫 点击复制链接 分享 邀请回答 编辑 收藏 删除 结题 收藏 举报 追加酬金 (90%的用户在追加酬金后获得了解决方案) 当前问题酬金 ¥ 0 (可追加 ¥500） ¥ 15¥ 20¥ 50¥ 100¥ 200 支付方式 扫码支付 二维码出错 点击刷新 支付金额 15 元 提供问题酬金的用户不参与问题酬金结算和分配 支付即为同意 《付费问题酬金结算规则》 结题 再想想 删除 再等等

    2条回答 默认 最新

    • 阿里嘎多学长 2024-05-22 20:18
      关注

      以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

      【解题思路】：重置计时器时清除现有计时并从设定时间开始

      评论
    • 专家-百锦再@新空间代码工作室 全栈领域优质创作者 2024-05-22 20:20
      关注

      通过阅读代码，我发现问题出在刷新页面时计时器的时间会从上一次停留的时间开始计算，此后再正常倒计时。这是因为在点击下一个问题按钮后，在renewal函数中没有重置计时器的初始时间，导致计时器从上一个问题结束的剩余时间开始计算。

      我建议在renewal函数中添加以下代码，将计时器的初始时间重置为15秒：

      function renewal() {let div2obj = document.getElementById("
      div2"
      );
      let div3obj = document.getElementById("
      div3"
      );
      let div4obj = document.getElementById("
      div4"
      );
      div3obj.style.display = "
      none"
      ;
      div4obj.style.display = "
      none"
      ;
      div2obj.style.display = "
      block"
      ;
       
          document.getElementById("
      questionNo"
      ).innerText = 'Question ' + questionNo;
      document.getElementById("
      questionText"
      ).innerText = questions[questionNo - 1].question;
      document.getElementById("
      btn2"
      ).innerText = 'A. ' + questions[questionNo - 1].options[0];
      document.getElementById("
      btn3"
      ).innerText = 'B. ' + questions[questionNo - 1].options[1];
      document.getElementById("
      btn4"
      ).innerText = 'C. ' + questions[questionNo - 1].options[2];
      document.getElementById("
      btn5"
      ).innerText = 'D. ' + questions[questionNo - 1].options[3];
       
          startTimer();
      }

      同时，在startTimer函数中，需要将计时器的初始时间重置为15秒：

      var timeLeft = 15;
       // 初始倒计时时间，单位为秒 
      function startTimer() {document.getElementById("
      timer"
      ).innerText = "
      Time to answer: "
       + timeLeft + "
       seconds"
      ;
       // 更新显示的倒计时时间 
          timerInterval = setInterval(function() {timeLeft--;
       // 每次执行时减少一秒document.getElementById("
      timer"
      ).innerText = "
      Time to answer: "
       + timeLeft + "
       seconds"
      ;
       // 更新

      有问题你别着急，评论留言都可以，看到马上就回复，尽量及时补充齐

      展开全部

      评论
    编辑
    预览

    报告相同问题？

  • 相关阅读:
    开发笔记：如何对【动态链接库】文件进行加密保护？
    Identity Server 4客户端认证控制访问API
    el-checkbox-group的全选与反选
    K8S：kubectl陈述式、声明式资源管理及金丝雀部署
    【项目实战课】基于Pytorch的PFLD人脸关键点检测实战
    HarmonyOS开发案例：【首选项】
    【智能优化算法-正弦余弦算法】基于正弦余弦算法求解高维优化问题附matlab代码
    【服务器数据恢复】RAID5强制上线后又被格式化的数据恢复案例
    【ppt技巧】批量修改ppt中的字体
    百度发布文心大模型4.0，百度搜索实现重构；AI报告2023
  • 原文地址：https://ask.csdn.net/questions/8107760