“多个”的倒计时JavaScript；时钟“；_Javascript_Jquery_Countdown

“多个”的倒计时JavaScript；时钟“；

javascript jquery

“多个”的倒计时JavaScript；时钟“；,javascript,jquery,countdown,Javascript,Jquery,Countdown,我需要在一页上创建多个倒计时时钟。目前，我只有一个，但我想使脚本美观紧凑，所以我想对日期使用相同的计算，但只是通过一个不同的值英联邦运动会开始前的一个时钟倒计时。我需要另一个倒计时到闭幕式脚本： // set the date we're counting down to var target_date_opening = new Date("Jul 23, 2014").getTime(); var target_date_closing = new Date("Aug 23, 2014"

我需要在一页上创建多个倒计时时钟。目前，我只有一个，但我想使脚本美观紧凑，所以我想对日期使用相同的计算，但只是通过一个不同的值

英联邦运动会开始前的一个时钟倒计时。我需要另一个倒计时到闭幕式

脚本：

// set the date we're counting down to
var target_date_opening = new Date("Jul 23, 2014").getTime();
var target_date_closing = new Date("Aug 23, 2014").getTime();

// variables for time units
var days, hours, minutes, seconds;

// get tag element
var countdownOpening = document.getElementById("countdownOpening");
var countdownClosing = document.getElementById("countdownClosing");

// update the tag with id "countdownOpening" every 1 second
setInterval(function () {
    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (target_date_opening - current_date) / 1000;

    // do some time calculations
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;

    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;

    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);

    // format countdown string + set tag value
    countdownOpening.innerHTML = days + " days " + hours + " hours "
    + minutes + " minutes " + seconds + " seconds";  

}, 1000);

您可以看到我创建了新变量来区分目标日期（

target\u date\u closing

）

我有

innerHTML

的ID作为倒计时结束

我的问题是使

setInterval

函数计算

target\u date\u closing

并输出这是

countdownClosing

，而无需再次复制脚本

我不确定是否需要单个变量来存储

分钟

，

天

，

小时

，

秒

变量。

试试看

// set the date we're counting down to
var target_date_opening = new Date("Jul 23, 2014").getTime();
var target_date_closing = new Date("Aug 23, 2014").getTime();

// variables for time units
var days, hours, minutes, seconds;

// get tag element
var countdownOpening = document.getElementById("countdownOpening");
var countdownClosing = document.getElementById("countdownClosing");

// update the tag with id "countdownOpening" every 1 second
setInterval(function () {
    print(countdownOpening, target_date_opening)
    print(countdownClosing, target_date_closing)
}, 1000);

function print(el, time) {
    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (time - current_date) / 1000;

    // do some time calculations
    var days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;

    var hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;

    var minutes = parseInt(seconds_left / 60);
    var seconds = parseInt(seconds_left % 60);

    // format countdown string + set tag value
    el.innerHTML = days + " days " + hours + " hours " + minutes + " minutes " + seconds + " seconds";
}

演示：


//确定我们倒计时的日期
var target_date_opening=新日期（“2014-07-23”）.getTime（）；
var target_date_closing=新日期（“2014年8月23日”）。getTime（）；
//时间单位变量
var天、小时、分钟、秒；
var showCountdown=函数（elementID，dt）{
var elem=document.getElementById（elementID）；
//每隔1秒更新id为“countdownOpening”的标签
setInterval（函数（）{
//找出从现在到目标之间的“秒数”
var current_date=new date（）.getTime（）；
var秒数（左）=（dt-当前日期）/1000；
//做一些时间计算
天=parseInt（还剩秒/86400）；
剩余秒数=剩余秒数%86400；
小时=parseInt（剩余秒/3600）；
剩余秒数=剩余秒数%3600；
分钟=parseInt（剩余秒/60）；
秒=parseInt（剩余%60秒）；
//格式化倒计时字符串+设置标记值
elem.innerHTML=天+天+小时+小时
+分钟+“分钟”+秒+“秒”；
}, 1000);
};
倒数计时（“倒数开始”，目标日期开始）；
showCountdown（“倒计时结束”，倒计时结束）；

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script language="JavaScript">
        // set the date we're counting down to
        var target_date_opening = new Date("2014-07-23").getTime();
        var target_date_closing = new Date("Aug 23, 2014").getTime();

        // variables for time units
        var days, hours, minutes, seconds;

        var showCountdown = function(elementID, dt) {

            var elem = document.getElementById(elementID);

            // update the tag with id "countdownOpening" every 1 second
            setInterval(function () {
                // find the amount of "seconds" between now and target
                var current_date = new Date().getTime();
                var seconds_left = (dt - current_date) / 1000;

                // do some time calculations
                days = parseInt(seconds_left / 86400);
                seconds_left = seconds_left % 86400;

                hours = parseInt(seconds_left / 3600);
                seconds_left = seconds_left % 3600;

                minutes = parseInt(seconds_left / 60);
                seconds = parseInt(seconds_left % 60);

                // format countdown string + set tag value
                elem.innerHTML = days + " days " + hours + " hours "
                        + minutes + " minutes " + seconds + " seconds";

            }, 1000);

        };
    </script>

</head>
<body>
<div id="countdownOpening"></div>
<div id="countdownClosing"></div>
     <script>
        showCountdown('countdownOpening', target_date_opening);
        showCountdown('countdownClosing', countdownClosing);

    </script>
</body>
</html>