单击开始按钮时的 JavaScript 倒数计时器，用于小时、分钟和秒答案

【问题标题】：JavaScript countdown timer for hour, minutes and seconds when a start button click单击开始按钮时的 JavaScript 倒数计时器，用于小时、分钟和秒
【发布时间】：2018-04-26 11:10:06
【问题描述】：

我想在单击按钮时为小时、分钟和秒创建倒数计时器。这是我目前的代码。

HTML代码

<div class="colomn" style="margin-right: 20px">
   <button class="start" onclick="clock();">Start</button>
</div>

javascript函数

<script>
 var myTimer;
 function clock() {
        myTimer = setInterval(myClock, 1000);
        var c = 5;

        function myClock() {
            document.getElementById("demo").innerHTML = --c;
               if (c == 0) {
                   clearInterval(myTimer);
        }
      }
    }
  </script>

这很简单，不显示单独的小时、分钟和秒。我如何将其应用于计数小时、分钟和秒。请帮帮我。

【问题讨论】：

w3schools.com/howto/howto_js_countdown.asp 可能有帮助吗？
也是一个程式化的时钟 -> codepen.io/SitePoint/pen/MwNPVq

标签： javascript html

【解决方案1】：

工作代码：

<!DOCTYPE HTML>
<html>
<body>

<p id="demo"></p>
<button onclick="countdownTimeStart()">Start Timer</button>

<script>
// Set the date we're counting down to

function countdownTimeStart(){

var countDownDate = new Date("Sep 25, 2025 15:00:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();
    
    // Find the distance between now an the count down date
    var distance = countDownDate - now;
    
    // Time calculations for days, hours, minutes and seconds
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
    // Output the result in an element with id="demo"
    document.getElementById("demo").innerHTML = hours + "h "
    + minutes + "m " + seconds + "s ";
    
    // If the count down is over, write some text 
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
    }
}, 1000);
}
</script>

</body>
</html>

【讨论】：

我所做的只是从上面的链接中复制代码，将其修改为按钮处理程序，然后粘贴。所以应该归功于它。

【解决方案2】：

简单的答案如下， html部分，

<button onclick="clockStart()">Start</button>

<p id="demo"></p>

JS部分，

function clockStart() {
          setInterval(function() {
                     date = new Date()
                     let hour = date.getHours();
                     let minutes = date.getMinutes();
                     let seconds = date.getSeconds();
                     document.getElementById("demo").innerHTML = hour + ":"+ minutes + ":" + seconds;
        }, 1000);
    }

【讨论】：

【解决方案3】：

你需要一个计数器几秒钟。在每 1 秒的时间间隔内，递减此计数器，并进行必要的计算。

var myTimer;
function clock() {
    myTimer = setInterval(myClock, 1000);
    var c = 3610; //Initially set to 1 hour


    function myClock() {
        --c
        var seconds = c % 60; // Seconds that cannot be written in minutes
        var secondsInMinutes = (c - seconds) / 60; // Gives the seconds that COULD be given in minutes
        var minutes = secondsInMinutes % 60; // Minutes that cannot be written in hours
        var hours = (secondsInMinutes - minutes) / 60;
        // Now in hours, minutes and seconds, you have the time you need.
        console.clear();
        console.log(hours + ":" + minutes + ":" + seconds)
        if (c == 0) {
            clearInterval(myTimer);
        }
    }
}

clock();

也把它放在fiddle 中。看看有没有效果。。

EDIT：更新了错误代码。感谢@JDrake 指出事实...

【讨论】：

如何计算每小时、分钟和秒。你能指路吗？
@ChathuriFernando 用代码 sn-p 更新了答案。那应该不错..
这不起作用。将c 设置为 10000 并检查结果。
@JDrake 纠正了错误。感谢您指出...（y）

【解决方案4】：

你可以试试这个；

    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <!-- This will start a timer for 5 hours 6 minutes and 7 seconds -->
    <button onclick="countdown(5,6,7)"> Start </button>
    <div><h3 id="timer"></h3></div>
    <script>
    function countdown(hr,mm,ss)
    {
        var interval = setInterval(function(){

            if(hr == 0 && mm == 0 && ss == 0)clearInterval(interval);
            ss--;
            if(ss == 0)
            {
                ss = 59;
                mm--;
                if(mm == 0)
                {
                    mm = 59;
                    hr--;
                }
            }

            if(hr.toString().length < 2) hr = "0"+hr;
            if(mm.toString().length < 2) mm = "0"+mm;
            if(ss.toString().length < 2) ss = "0"+ss;
            $("#timer").html(hr+" : "+mm+" : "+ss);

        },1000)
    }
    </script>

【讨论】：

【解决方案5】：

您可以将以秒为单位的值转换为以小时、分钟和秒为单位的值：

var secs  = Math.floor(c % 60);
var mins  = Math.floor((c/60) % 60);
var hours = Math.floor((c/(60*60)));

这将为您提供删除分钟时剩余的秒数（使用模运算符），然后在分钟和小时内重复此操作。您还可以轻松地将其扩展到包括几天或几周：

var hours = Math.floor((c/(60*60)) % 24);
var days = Math.floor((c/(60*60*24) % 7);
var weeks = Math.floor((c/60*60*24*7));

您的代码确实有一个缺点：如果由于某种原因调用之间的距离稍微远一些，这可能会越来越多地造成延迟。您可能希望使用以下行：

endTime = Date.parse(new Date()) + delay;
timeLeft = endTime - Date.parse(new Date());

【讨论】：

【解决方案6】：

这是一个非常原始的时钟：

 function clock(t){
    if(clock._stop){return};
    var d = new Date(Date.now());
    console.log(d.getHours()+":"+d.getMinutes()+":"+d.getSeconds()+":"+d.getMilliseconds())
    window.requestAnimationFrame(clock);
}
    clock._stop = false;
    clock();

检查您的控制台。要停止时钟，请执行clock._stop = true；要启动它，请将其设置回 false 并像 clock() 一样调用。您可以使用 getter/setter 或任何您喜欢的方式将逻辑包装在其他对象中。

FIDDLE

【讨论】：

我试过了。但不工作。是否可以在单击按钮时添加？
您能否更新完整的答案。我是 javascript 新手。
当我在上面复制粘贴并打开控制台时，它记录正常。当然可以将其绑定到按钮。做yourButtonElement.addEventListener("click",function(e){clock._stop = false;clock();},false)
等我来做小提琴
添加了小提琴

【解决方案7】：

var seconds_inputs =  document.getElementsByClassName('deal_left_seconds');
var total_timers = seconds_inputs.length;
for ( var i = 0; i < total_timers; i++){
    var str_seconds = 'seconds_'; var str_seconds_prod_id = 'seconds_prod_id_';
    var seconds_prod_id = seconds_inputs[i].getAttribute('data-value');
    var cal_seconds = seconds_inputs[i].getAttribute('value');

    eval('var ' + str_seconds + seconds_prod_id + '= ' + cal_seconds + ';');
    eval('var ' + str_seconds_prod_id + seconds_prod_id + '= ' + seconds_prod_id + ';');
}
function timer() {
    for ( var i = 0; i < total_timers; i++) {
        var seconds_prod_id = seconds_inputs[i].getAttribute('data-value');

        var days = Math.floor(eval('seconds_'+seconds_prod_id) / 24 / 60 / 60);
        var hoursLeft = Math.floor((eval('seconds_'+seconds_prod_id)) - (days * 86400));
        var hours = Math.floor(hoursLeft / 3600);
        var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
        var minutes = Math.floor(minutesLeft / 60);
        var remainingSeconds = eval('seconds_'+seconds_prod_id) % 60;

        function pad(n) {
            return (n < 10 ? "0" + n : n);
        }
        document.getElementById('deal_days_' + seconds_prod_id).innerHTML = pad(days);
        document.getElementById('deal_hrs_' + seconds_prod_id).innerHTML = pad(hours);
        document.getElementById('deal_min_' + seconds_prod_id).innerHTML = pad(minutes);
        document.getElementById('deal_sec_' + seconds_prod_id).innerHTML = pad(remainingSeconds);

        if (eval('seconds_'+ seconds_prod_id) == 0) {
            clearInterval(countdownTimer);
            document.getElementById('deal_days_' + seconds_prod_id).innerHTML = document.getElementById('deal_hrs_' + seconds_prod_id).innerHTML = document.getElementById('deal_min_' + seconds_prod_id).innerHTML = document.getElementById('deal_sec_' + seconds_prod_id).innerHTML = pad(0);
        } else {
            var value = eval('seconds_'+seconds_prod_id);
            value--;
            eval('seconds_' + seconds_prod_id + '= ' + value + ';');
        }
    }
}

var countdownTimer = setInterval('timer()', 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" class="deal_left_seconds" data-value="1" value="8888888">
                        <div class="box-wrapper">
                            <div class="date box"> <span class="key" id="deal_days_1">00</span> <span class="value">DAYS</span> </div>
                        </div>
                        <div class="box-wrapper">
                            <div class="hour box"> <span class="key" id="deal_hrs_1">00</span> <span class="value">HRS</span> </div>
                        </div>
                        <div class="box-wrapper">
                            <div class="minutes box"> <span class="key" id="deal_min_1">00</span> <span class="value">MINS</span> </div>
                        </div>
                        <div class="box-wrapper hidden-md">
                            <div class="seconds box"> <span class="key" id="deal_sec_1">00</span> <span class="value">SEC</span> </div>
                        </div>

【讨论】：

【解决方案8】：

<!DOCTYPE HTML>
<html>
<body>

<p id="demo"></p>
<button onclick="countdownTimeStart()">Start Timer</button>

<script>
// Set the date we're counting down to

function countdownTimeStart(){

var countDownDate = new Date("Sep 25, 2025 15:00:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();
    
    // Find the distance between now an the count down date
    var distance = countDownDate - now;
    
    // Time calculations for days, hours, minutes and seconds
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
    // Output the result in an element with id="demo"
    document.getElementById("demo").innerHTML = hours + "h "
    + minutes + "m " + seconds + "s ";
    
    // If the count down is over, write some text 
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
    }
}, 1000);
}
</script>

</body>
</html>

【讨论】：