如何重置Javascript分钟倒计时器
重置JavaScript分钟倒计时器可以通过以下步骤实现：
- 创建一个全局变量来存储倒计时的时间，例如
remainingTime。 - 创建一个函数来启动倒计时，例如
startCountdown()。 - 在
startCountdown()函数中，使用setInterval()函数来每秒更新倒计时的时间，并将剩余时间显示在页面上。 - 在每次更新倒计时时，检查剩余时间是否为0。如果是，则停止倒计时。
- 创建一个重置倒计时的函数，例如
resetCountdown()。 - 在
resetCountdown()函数中，清除之前的倒计时器，将剩余时间重置为初始值，并重新启动倒计时。
以下是一个示例代码：
// 全局变量
let remainingTime = 60; // 初始倒计时时间为60秒
// 启动倒计时
function startCountdown() {
let countdown = setInterval(() => {
// 更新倒计时时间
remainingTime--;
// 显示剩余时间
console.log(remainingTime);
// 检查是否倒计时结束
if (remainingTime === 0) {
clearInterval(countdown); // 停止倒计时
console.log("倒计时结束");
}
}, 1000); // 每秒更新一次倒计时
}
// 重置倒计时
function resetCountdown() {
clearInterval(countdown); // 清除之前的倒计时器
remainingTime = 60; // 重置倒计时时间为60秒
startCountdown(); // 重新启动倒计时
}
// 调用启动倒计时函数
startCountdown();这是一个简单的示例，你可以根据实际需求进行修改和扩展。
相关·内容
3回答
我需要从另一个函数调用ClearInterval
javascript、reactjs、react-native、setinterval、clearinterval
我正在创建一个倒计时计时器，并且需要从不同的函数调用clearInterval，因为我想使用两个不同的按钮启动和暂停倒计时 下面是我的一段代码 const startCountdown = () => {
const countdown = setInterval(() => {
setSecondsElapsed(secondsElapsed => secondsElapsed - 1);
}, 1000);
};
const pauseCountdown = () => {
clearInterval(countdow
浏览 64提问于2021-07-01得票数 2
回答已采纳
1回答
从功能外部清除电流间隔
javascript、jquery、setinterval、clearinterval
我正在尝试设置一个计时器，它从页面加载开始，每秒钟运行一次，我已经开始工作了。
当你还剩不到5分钟的时候，会弹出一个模式，告诉你你的课程在5分钟内就会到期，我也有这个部分在工作。
我正在挣扎的部分是，当你关闭模态，它意味着停止间隔，然后重新启动它。我可以让它开始/停止间隔，但我不能让两者兼而有之。
我是JS的新手，所以我们非常感谢您的帮助。
$(document).ready(function() {
restartCountdown();
timeRemaining = 1 * 60 * 1000;
function restartCountdown() {
count
浏览 1提问于2019-08-15得票数 0
回答已采纳
1回答
javascript倒计时计时器，点击事件后间隔加速
javascript、timer、setinterval、clearinterval
我开始做一个倒计时器。到目前为止，它基本上是按照我想要的方式工作。按钮将启动或暂停计时器。但是，如果我启动和暂停它超过一次，间隔将不再设置为1000ms。这让我认为它现在在每次点击按钮时并行运行多个时间间隔。我不确定该如何解决这个问题，也不知道问题到底出在哪里。
function startCountDown() {
running = !running;
running ? startButton.value = "Stop Countdown" : startButton.value = "Start Countdown";
let t = t
浏览 3提问于2017-01-16得票数 0
回答已采纳
2回答
按Javascript键开始倒计时
javascript、timer、setinterval、keypress、countdown
我需要开始和停止60秒倒计时按空格键，所有通过Javascript。要做到这一点，我想我必须使用setInterval()和clearInterval()，但是，我无法使它工作。我可以开始倒计时，但是一旦它被激活，我就无法阻止它了。这是我的代码：
var timeLeft = 60; /* countdown duration */
var isRunning = 0;
浏览 27提问于2022-07-24得票数 0
回答已采纳
2回答
当多次单击链接时，javaScript倒计时启动多次
javascript、timer、setinterval
我是JavaScript的新手，我想实现以下功能： 单击网站上的链接，将启动具有15分钟倒计时的计时器。如果该链接只被单击一次，则可以很好地工作。但是如果再次点击这个链接(或另一个链接)，会并行显示两个(或更多)倒计时。我尝试了两种不同的方法:第一种是专注于Date()对象的代码，第二种是处理连续减少一秒的变量的版本。这两个代码(当然)都基于setInterval()函数。 在第一种情况下，stopZeit日志显示，每次单击一个链接时，都会创建一个新的stopZeit值。在第二种情况下，无论链接被点击的频率有多高，console.log(timerLaenge)都会显示30，但是会启动多个计
浏览 21提问于2020-01-16得票数 0
回答已采纳
2回答
使用jQuery暂停倒计时
javascript、php、jquery、html
我基本上想要的是，当有人点击div本身的时候，停止计数。
所以我有下面的代码
var count = 60;
jQuery("#watched_countdown").text(count);
var myTimer = setInterval(function(){
if(count > 0){
count = count - 1;
jQuery("#watched_countdown").text(count);
}
else {
clearInterval(myTimer);
浏览 4提问于2013-12-19得票数 0
回答已采纳
1回答
如何使倒计时器与setTimeOut函数在JavaScript中同步
javascript、html、twitter-bootstrap、settimeout、countdowntimer
我有一个简单的引导页。这是一个更大的项目的开始，在那里他们必须回答一个定时的小测验。整个页面都列在这里。
到目前为止，我的代码有两个问题。第一个问题是计时器与setTimeOut()函数不同步。这应该是工作的方式，孩子们将有45秒的时间间隔来回答每个问题。倒计时器将出现在按钮的顶部，指示还有多少时间。在后台，setTimeOut()将在45秒后完成测试。
我的第一个问题是，一旦测试在45秒后按设计结束，倒计时器不会停止，而是将自身重置为另一个45秒并继续进行。我想在这一点上，一旦倒计时结束，“--”
第二个问题是我想让孩子们在45秒的间隔内再次点击按钮来重置时间。这对倒计时器很好，但对setT
浏览 1提问于2019-03-02得票数 0
回答已采纳
2回答
带react钩子的倒计时器
reactjs、react-hooks
我正在尝试自己实现倒计时计时器，只是为了更多地了解钩子。我知道有很多库，但我不想使用它。我的代码的问题是，我不能在“计时器”函数中获得更新的状态，这个函数在启动计时器函数中更新。我正在尝试实现计时器，它将有启动，停止和恢复的触发器&可以手动触发。由使用倒计时组件的其他组件执行 import React, { useState } from 'react';
const Countdown = ({ countDownTimerOpt }) => {
const [getObj, setObj] = useState({
formatTimer: n
浏览 35提问于2020-10-18得票数 2
回答已采纳
4回答
倒计时器在零时停止，我要它重置
javascript、html、css
我正在设法使我的倒计时计时器重新开始在25，当它再次达到0。我不知道我做错了什么，但这是行不通的。
Javascript
window.onload = function() {
startCountDown(25, 1000, myFunction);
}
function startCountDown(i, p, f) {
var pause = p;
var fn = f;
var countDownObj = document.getElementById("countDown");
countDownObj.count = fun
浏览 9提问于2012-11-30得票数 0
回答已采纳
3回答
setTimeOut()或setInterval()。4种方法应用相同的东西。哪一个是最好的？
javascript、jquery、settimeout、setinterval、anonymous-function
我正在显示一个倒计时表相对于给定的结束时间。
虽然它的工作很完善，但我想知道哪些方法是最好的应用。
下面是我的倒计时功能。
var timerId;
var postData = {endDate : endDate, tz : tz};
var countdown = function()
{
$.ajax({
type : 'post',
async : false,
timeout : 1000,
url :
浏览 2提问于2012-07-17得票数 7
回答已采纳
2回答
无法执行停止功能的反应倒计时器
javascript、reactjs、react-native、react-hooks
我几乎是第一次反应。在这个应用程序中，我正在使用钩子！我做了一个倒数计时器，它会在登录后几秒钟内显示出来。我不能让它停止按一下按钮。我需要一些关于这方面的建议，因为在过去的两天里，我一直在为这个而奋斗。到目前为止，这是我的代码：(请帮助)
function Admin() {
const [isTimerOpen, setTimmer] = useState(false);
let history = useHistory();
// SET BY THE ADMIN
var minutesToCountDown = 0.9;
// TRANSFORM
浏览 3提问于2020-05-04得票数 1
回答已采纳
1回答
计数为零时如何改变文本
javascript、php
你好，我的倒计时不停止在零，我需要改变我的测试，当倒计时到零时，这个倒计时在零后再次开始，我需要替换倒计时后的值为零……$countdown = 50
function startTimer(duration, display) {
var start = Date.now(),
diff,
minutes,
seconds;
function timer() {
// get the number of seconds that have elapsed since
// startTimer() was called
diff = dura
浏览 4提问于2015-10-06得票数 0
回答已采纳
1回答
在setInterval内部未更新React状态
reactjs
我正在尝试用一些简单的项目来学习React，但似乎无法理解下面的代码，所以如果能解释一下，我会很感激。
这段来自一个简单的倒计时函数的代码运行良好；但是，当我执行console.log时，时间似乎正确地更新了‘setTime’的值，但是当我紧接着执行console.log(console.log)时，它给出了原始值3。为什么会这样呢？
额外的问题-当函数startCountdown被调用时，在我的JSX中出现正确的时间值会有延迟，我假设这是由于变量‘秒’被填充和setInterval函数的开始，所以我不能顺利和准确地开始倒计时。有什么办法可以解决这个问题吗？
const [ time, s
浏览 0提问于2021-01-20得票数 1
1回答
带有开始和停止按钮的clearInterval
javascript、setinterval
我有一个简单的倒计时使用setinterval，我得到的错误，我的函数没有定义。我正在使用按钮来启动和停止间隔。知道为什么会这样吗？
Javascript
function startCount() {
$(function() {
var count = 10;
countdown = setInterval(function() {
$("p.countdown").html(count + " seconds remaining!");
if (count === 0)
浏览 4提问于2012-05-13得票数 2
回答已采纳
2回答
react中的setInterval不更新setState
reactjs、react-hooks、setinterval、use-state
我想做一个倒计时器(25分钟)。这是App.js文件中的代码
import './App.css';
import React, { useState } from 'react';
function App() {
const [remainingTime, setRemainingTime] = useState(1500);
const [seconds, setSeconds] = useState(0);
const [minute, setMinute] = useState(remainingTime/60);
function
浏览 5提问于2021-04-26得票数 1
回答已采纳
3回答
为什么我的date对象返回NaN值？
javascript、setinterval、countdowntimer、clearinterval
这是我的JS小提琴：
我的程序应该启动一个倒数计时器，计算从今天到用户在输入字段中选择的日期的剩余时间(以天、小时、秒等为单位)。
当程序用正确的剩余时间更新时，当我尝试每秒钟更新一次倒计时计时器时，问题就开始了。由于某种原因，它返回NaN值。为什么返回？？
这是我的JS：
const input = document.querySelector('input')
let timeInterval;
let timeStop;
input.addEventListener('change', (e) => {
e.preventDefault
浏览 3提问于2019-09-26得票数 0
回答已采纳
1回答
设置Interval()和ClearInterval()逻辑支持
javascript、html、function、setinterval、clearinterval
在循环外停止计时器有困难。我真的不知道为什么setTimeout()一直在帮助函数工作……我知道它在句法上不是最正确的..但是想知道是否有人可以告诉我如何在函数外调用它来停止倒计时，比如在计时器之前发生了一个动作，并且想要调用一个stopCountdown()函数？
function countdown(start){
setTimeout(setCountdown, 1000);
let startingMinutes = timerEl.innerHTML;
startingMinutes = start;
let time = startingMinute
浏览 17提问于2021-05-31得票数 1
回答已采纳
1回答
使用角，TypeScript更改网页内的倒计时错误
javascript、angular、typescript
我在首页的网页打字稿中设置了倒计时器。但是，当我切换到另一个页面时，每秒钟都会收到一个控制台错误。
.TS
countDown() {
var countDownDate = new Date("Jan 1, 2022 00:00:00").getTime();
// Update the count down every 1 second
var x = setInterval(function () {
var now = new Date().getTime();
// Find the distance betwe
浏览 10提问于2021-12-10得票数 0
回答已采纳
2回答
在ReactJS中使用功能组件的倒计时器不能正常工作
javascript、reactjs、countdowntimer
我想做一个倒计时开始，停止，恢复和重置按钮。但是，我不知道为什么我的代码不能工作。我猜问题就在定时器、setInterval和clearInterval上。
我在下面附加了我的代码片段。
非常感谢您的帮助，谢谢！
function Countdown() {
const [ timerRunning, setTimerRunning ] = useState(false);
const [ startTime, setStartTime ] = useState(0);
const [ totalTime, setTotalTime ] = useState(0);
浏览 11提问于2022-05-31得票数 0
2回答
在vuejs中创建一个带有瞬间的倒计时
javascript、vue.js、momentjs
我有一个混合器，它返回这种格式的HH:mm:ss的剩余时间。
Vue.mixin({
methods: {
remainingTime(){
// some calculations based on current time and given time
return timeLeft.toString();
}
....
在组件中，我调用混合器来获取时间。
export default {
....
data() {
return {
timeLeft: this.remaining
浏览 11提问于2021-12-11得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
