设置Javascript倒计时计时器的初始值

Set an initial value for a Javascript Count Down Timer

本文关键字：计时器 Javascript 倒计时设置更新时间：2023-09-26

我正在尝试制作一个从点击按钮开始的倒计时计时器。

我已经让它工作了几分钟，但似乎不知道如何在点击按钮之前显示静态时间。

我想知道的是，一旦按下按钮，我如何在网页上显示时间（在这种情况下为59分59秒）并启动倒计时功能？

<head>
<input type="button" onclick="countdown('countdown');" value="Start" />
<script type="text/javascript">
var cdtime;
var minutes = 59;
var seconds = 59;
function countdown(element) {
    cdtime = setInterval(function() {
        var timer = document.getElementById(element);
        if(seconds == 0) {
            if(minutes == 0) {
                alert(timer.innerHTML = "countdown's over!");                    
                clearInterval(cdtime);
                return;
            } else {
                minutes--;
                seconds = 60;
            }
        }
        if(minutes > 0) {
            var minutetxt = minutes + (minutes > 1 ? ' minutes' : 'minute');
        } else {
            var minutetxt = '';
        }
        var secondstxt;
        if(seconds > 1) {
            secondstxt = 'seconds'; 
        } else { 
            secondstxt = 'second';
        }
        timer.innerHTML = minutetxt + ' ' + seconds + ' ' + secondstxt;
        seconds--;
    }, 1000);
}
</script> 
</head>
<body>
<div id='countdown'></div>
</body>
</html>

创建一个div，并使用JavaScript使用该div的set内部html（我是在定义了分钟和秒之后完成的）。
也把你的元素从标题中带出来，带到主体中
如果您不使用jquery来等待窗口完成加载，请将脚本放在所有html元素之后

    var cdtime;
    var minutes = 59;
    var seconds = 59; 
    document.getElementById("initialtime").innerHTML=minutes+":"+seconds;
function countdown(element) {
    cdtime = setInterval(function() {
        var timer = document.getElementById(element);
        if(seconds == 0) {
            if(minutes == 0) {
                alert(timer.innerHTML = "countdown's over!");                    
                clearInterval(cdtime);
                return;
            } else {
                minutes--;
                seconds = 60;
            }
        }
        if(minutes > 0) {
            var minutetxt = minutes + (minutes > 1 ? ' minutes' : 'minute');
        } else {
            var minutetxt = '';
        }
        var secondstxt;
            if(seconds > 1)
            {
            secondstxt = 'seconds'; 
            }
            else
            { 
            secondstxt = 'second';
            }
        timer.innerHTML = minutetxt + ' ' + seconds + ' ' + secondstxt;
        seconds--;
    }, 1000); }

<body> 
<div id="initialtime"></div>
<input type="button" onclick="countdown('countdown');" value="Start" />
<div id='countdown'></div> 
</body>

两个选项-将时间最初放在html 中

<div id='countdown'>59 minutes 59 seconds</div>

如果您希望以后有更大的灵活性，另一种选择是使用javascript进行设置。

$(document).ready(function() {
  function initialize() {
    document.getElementById("countdown").innerHTML = "59 minutes 59 seconds";
  }
  intialize();
})

使用第二个选项，您可以将文本替换为返回字符串的代码，或者将字符串生成代码分离为您调用的单独函数。

为什么不直接将59:59放在div中，然后从60*60-2 (59:58)开始倒计时。此外，您在文档的<head>中也有"开始"按钮。下面是一个示例，说明如何使代码快速工作。

然而，如果您需要/想要使用JavaScript设置div的初始值，这里有一些选项和一些额外的改进；包括也可重复使用的更精确的定时器功能。

function startTimer(duration, displayFtn) {
  var start = Date.now(), diff, obj;
  (function timer() {
    diff = duration - (((Date.now() - start) / 1000) | 0);
    obj = minutesSeconds(diff);
    displayFtn(obj.minutes, obj.seconds);
    if (diff > 0) {
      setTimeout(timer, 200);
    }
  }());  
}
function minutesSeconds(duration) {
  return {
    'minutes': (duration / 60) | 0,
    'seconds': (duration % 60) | 0
  };
}
// we need to wait for the page to load before we can select any DOM elements
window.onload = function() {
  var duration = 5, // set to 60*60-1 for 59 minutes and 59 seconds
      display1 = document.querySelector('#countdown1'),
      display2 = document.querySelector('#countdown2'),
      startTime = minutesSeconds(duration);
  // here is where the initial values are set
  format1(startTime.minutes, startTime.seconds);
  format2(startTime.minutes, startTime.seconds);
  // here we add an event listenter this is called when the buttons is clicked 
  document.querySelector('#startcountdown1').addEventListener('click', listener);
  document.querySelector('#startcountdown2').addEventListener('click', listener);
  
  function listener(event) {
    // we don't want to start the count down twice for the same button,
    // so remove the listener
    event.target.removeEventListener('click', listener);
    var formatter = event.target.id == 'startcountdown1' ? format1 : format2;
    startTimer(duration, formatter);
  }
  
  // these two functions just format the remaining minutes and
  // seconds differently
  function format1(minutes, seconds) {
    minutes = minutes + (minutes > 1 ? ' minutes' : ' minute');
    seconds = seconds + (seconds > 1 ? ' seconds' : ' second');
    display1.textContent = minutes + ' ' + seconds;
  }
  function format2(minutes, seconds) {
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    display2.textContent = minutes + ':' + seconds;
  }
};

<input type="button" value="Start Count Down 1" id='startcountdown1' />
<div id='countdown1'></div>
<hr />
<input type="button" value="Start Count Down 2" id='startcountdown2' />
<div id='countdown2'></div>

//其中eventDate=事件开始日期enter event start date

eventStartsIn=（eventDate:Date）=>{const today=moment（）.format（）；

    const actualStartEvent = moment(eventDate).format();
    if (today < actualStartEvent) {
        const todayDate = moment(today);
        const actualDate = moment(actualStartEvent);
        const dayDiffrence = actualDate.diff(todayDate, 'days');
        if (dayDiffrence === 0) {
            const timeDiff = moment.utc(moment(actualDate, 'DD/MM/YYYY HH:mm:ss').diff(moment(
                todayDate, 'DD/MM/YYYY HH:mm:ss'))).format('HH:mm');
            const hours = moment.duration(timeDiff).hours();
            const min = moment.duration(timeDiff).minutes();
            return `In ${hours >= 1 ? timeDiff : min} ${hours >= 1 ? `${hours > 1 ? 'hours' : 'hour'}` :
                'minutes'}`;
        }
        return `In ${dayDiffrence} ${dayDiffrence > 1 ? 'days' : 'day'}`;
    }
    if (today > actualStartEvent) {
        const todayDate = moment(today);
        const actualDate = moment(actualStartEvent);
        const dayDiffrence = actualDate.diff(todayDate, 'days');
        if (dayDiffrence === 0) {
            const timeDiff = moment.utc(moment(todayDate, 'DD/MM/YYYY HH:mm:ss').diff(moment(
                actualDate, 'DD/MM/YYYY HH:mm:ss'))).format('HH:mm');
            const hours = moment.duration(timeDiff).hours();
            const min = moment.duration(timeDiff).minutes();
            return `${hours >= 1 ? timeDiff : min} ${hours >= 1 ? `${hours > 1 ? 'hours' : 'hour'}` :
                'minutes'} Ago`;
        }
        return `${Math.abs(dayDiffrence)} ${Math.abs(dayDiffrence) > 1 ? 'days' : 'day'} Ago`;
    }
    return null;
}