Question

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

我已经让它工作了几分钟和几秒钟，但似乎无法弄清楚如何在按钮点击之前显示静态时间。

我想知道的是如何在开始按钮上方的网页上显示时间（在这种情况下为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>

Answer 1

使用JavaScript创建一个div并使用该div的内部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>

Answer 2

为什么不将59:59放在div中，然后从60*60-2 (59:58)开始倒数计时器。您还可以在文档的<head>中找到开始按钮。以下是example如何快速获取代码working。

但是，如果您需要/想要使用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>

Answer 3

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

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

另一种选择，如果你想要更灵活，可以使用javascript设置它。

$(document).ready(function() {

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

  }

  intialize();
})

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

Answer 4

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

eventStartsIn =（eventDate：Date）=> { 今天的const = 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;
}

设置Javascript倒计时器的初始值

4 个答案: