需要帮助调用倒计时功能

Question

我得到了一些 JS，它提供了对数组中的日期进行倒计时的功能。我只需要调用它的帮助。换句话说，我如何执行此功能并提供正确的 HTML 来显示倒计时？我目前有一个 div 和一些 HTML 和脚本，这里是：

    <div class="container-full">        
    <div class="row">
        <div class="col-md-12" id="countdown">
        <h3>
        <span id="next-term"></span> starts:
        <span id="date_container"></span>
        </h3>
        <div id="countdown">
        <div id="weeks_container" class="countdown_container">
        <div id="weeks">0</div>
        <div id="weeks-text">Weeks</div>
        </div>
        <div id="days_container" class="countdown_container">
        <div id="days">0</div>
        <div id="days-text">Days</div>
        </div>
        </div>
        <span id="register-time-left-text">You still have <span id="register-time-left"></span> days left to register for <span id="live-term"></span>.
        </span>

            <script>
            function countdownDate() {
//COUNTDOWN
var nextDate;
var nextTerm;
var liveDate;
var liveTerm;

var arrStartDates = new Array();

//For Testing
//arrStartDates[0] = new Date(2014,03,18);

arrStartDates[0] = new Date(2016, 0, 04);
arrStartDates[1] = new Date(2016, 01, 15);
arrStartDates[2] = new Date(2016, 03, 04);
arrStartDates[3] = new Date(2016, 04, 16);
arrStartDates[4] = new Date(2016, 06, 05);
arrStartDates[5] = new Date(2016, 07, 15);
arrStartDates[6] = new Date(2016, 09, 03);
arrStartDates[7] = new Date(2016, 10, 14);
arrStartDates[8] = new Date(2017, 0, 02);
arrStartDates[9] = new Date(2017, 01, 13);
arrStartDates[10] = new Date(2017, 03, 03);
arrStartDates[11] = new Date(2017, 04, 15);
arrStartDates[12] = new Date(2017, 06, 03);
arrStartDates[13] = new Date(2017, 07, 14);
arrStartDates[14] = new Date(2017, 09, 02);
arrStartDates[15] = new Date(2017, 10, 13);
arrStartDates[16] = new Date(2018, 0, 02);
arrStartDates[17] = new Date(2018, 01, 12);
arrStartDates[18] = new Date(2018, 03, 02);
arrStartDates[19] = new Date(2018, 04, 14);
arrStartDates[20] = new Date(2018, 06, 02);
arrStartDates[21] = new Date(2018, 07, 13);
arrStartDates[22] = new Date(2018, 09, 01);
arrStartDates[23] = new Date(2018, 10, 12);

var arrTermNames = new Array();
arrTermNames[0] = ("Winter Quarter 2016");
arrTermNames[1] = ("Winter Quarter 2016");
arrTermNames[2] = ("Spring Quarter 2016");
arrTermNames[3] = ("Spring Quarter 2016");
arrTermNames[4] = ("Summer Quarter 2016");
arrTermNames[5] = ("Summer Quarter 2016");
arrTermNames[6] = ("Fall Quarter 2016");
arrTermNames[7] = ("Fall Quarter 2016");
arrTermNames[8] = ("Winter Quarter 2017");
arrTermNames[9] = ("Winter Quarter 2017");
arrTermNames[10] = ("Spring Quarter 2017");
arrTermNames[11] = ("Spring Quarter 2017");
arrTermNames[12] = ("Summer Quarter 2017");
arrTermNames[13] = ("Summer Quarter 2017");
arrTermNames[14] = ("Fall Quarter 2017");
arrTermNames[15] = ("Fall Quarter 2017");
arrTermNames[16] = ("Winter Quarter 2018");
arrTermNames[17] = ("Winter Quarter 2018");
arrTermNames[18] = ("Spring Quarter 2018");
arrTermNames[19] = ("Spring Quarter 2018");
arrTermNames[20] = ("Summer Quarter 2018");
arrTermNames[21] = ("Summer Quarter 2018");
arrTermNames[22] = ("Fall Quarter 2018");
arrTermNames[23] = ("Fall Quarter 2018");

//determine what the date is today
today = new Date();
//Milliseconds per day
msPerDay = 24 * 60 * 60 * 1000;

for (var i = 0; i < arrStartDates.length; i++) {
    if (today.getTime() < arrStartDates[i].getTime()) {
        nextDate = arrStartDates[i];
        nextTerm = arrTermNames[i];

        liveDate = arrStartDates[i];
        liveTerm = arrTermNames[i];

        break;
    }
}

for (var i = 0; i < arrStartDates.length; i++) {
    if (today.getTime() < (arrStartDates[i].getTime() + (msPerDay * 3))) {
        liveDate = arrStartDates[i];
        liveTerm = arrTermNames[i];

        break;
    }
}

//do not edit this information
//Term Date
termTime = new Date(nextDate);
//Time from today to beginning of term
timeLeft = (termTime.getTime() - today.getTime());

//To get total number of days left, divide total time left by the time length of one day
e_daysLeft = (timeLeft / msPerDay);
//To get number of weeks left, divide total numbers of days by 7
e_wksLeft = (e_daysLeft / 7);

//Calculate amount of days left in current week and display number without decimals
daysLeft = Math.floor(e_daysLeft % 7);
//display number without decimals
wksLeft = Math.floor(e_wksLeft);

//define variables to write month, day, and year of current start date
y = nextDate.getFullYear();
//we add "1" to the month because in JavaScript, January is expressed as "0", not as "1".
m = nextDate.getMonth() + 1;
d = nextDate.getDate();

//Write results on page
$('#next-term').html(nextTerm);
$('#date_container').html(m + '/' + d + '/' + y);
$('#weeks').html(wksLeft);
$('#days').html(daysLeft);
$('#live-term').html(liveTerm);

//if weeks value is less than 10 add a "0" in front of remaining value
if (wksLeft <= 9) {
    $('#weeks').html("&#160; " + wksLeft);
}

if (nextDate != liveDate) {
    liveDate = liveDate.getTime() + (msPerDay * 4);
    termTime = new Date(liveDate);
    timeLeft = (termTime.getTime() - today.getTime());
    $('#register-time-left-text').css("display", "block");
    $('#register-time-left').html(Math.floor((timeLeft / msPerDay)));
}

}
                </script>
            </div>  
        </div>
    </div>

不确定我是否遗漏了某些关键组件、将某些东西放在了错误的位置，或者是什么。我没有触及提供的 JS，并且希望尽可能获得正确的 HTML 成分以使其工作。谢谢。

Answer 1

您只需添加：

$(function(){
  countdownDate();
});

function countdownDate() {
//COUNTDOWN
var nextDate;
var nextTerm;
var liveDate;
var liveTerm;

var arrStartDates = new Array();

//For Testing
//arrStartDates[0] = new Date(2014,03,18);

arrStartDates[0] = new Date(2016, 0, 04);
arrStartDates[1] = new Date(2016, 01, 15);
arrStartDates[2] = new Date(2016, 03, 04);
arrStartDates[3] = new Date(2016, 04, 16);
arrStartDates[4] = new Date(2016, 06, 05);
arrStartDates[5] = new Date(2016, 07, 15);
arrStartDates[6] = new Date(2016, 09, 03);
arrStartDates[7] = new Date(2016, 10, 14);
arrStartDates[8] = new Date(2017, 0, 02);
arrStartDates[9] = new Date(2017, 01, 13);
arrStartDates[10] = new Date(2017, 03, 03);
arrStartDates[11] = new Date(2017, 04, 15);
arrStartDates[12] = new Date(2017, 06, 03);
arrStartDates[13] = new Date(2017, 07, 14);
arrStartDates[14] = new Date(2017, 09, 02);
arrStartDates[15] = new Date(2017, 10, 13);
arrStartDates[16] = new Date(2018, 0, 02);
arrStartDates[17] = new Date(2018, 01, 12);
arrStartDates[18] = new Date(2018, 03, 02);
arrStartDates[19] = new Date(2018, 04, 14);
arrStartDates[20] = new Date(2018, 06, 02);
arrStartDates[21] = new Date(2018, 07, 13);
arrStartDates[22] = new Date(2018, 09, 01);
arrStartDates[23] = new Date(2018, 10, 12);

var arrTermNames = new Array();
arrTermNames[0] = ("Winter Quarter 2016");
arrTermNames[1] = ("Winter Quarter 2016");
arrTermNames[2] = ("Spring Quarter 2016");
arrTermNames[3] = ("Spring Quarter 2016");
arrTermNames[4] = ("Summer Quarter 2016");
arrTermNames[5] = ("Summer Quarter 2016");
arrTermNames[6] = ("Fall Quarter 2016");
arrTermNames[7] = ("Fall Quarter 2016");
arrTermNames[8] = ("Winter Quarter 2017");
arrTermNames[9] = ("Winter Quarter 2017");
arrTermNames[10] = ("Spring Quarter 2017");
arrTermNames[11] = ("Spring Quarter 2017");
arrTermNames[12] = ("Summer Quarter 2017");
arrTermNames[13] = ("Summer Quarter 2017");
arrTermNames[14] = ("Fall Quarter 2017");
arrTermNames[15] = ("Fall Quarter 2017");
arrTermNames[16] = ("Winter Quarter 2018");
arrTermNames[17] = ("Winter Quarter 2018");
arrTermNames[18] = ("Spring Quarter 2018");
arrTermNames[19] = ("Spring Quarter 2018");
arrTermNames[20] = ("Summer Quarter 2018");
arrTermNames[21] = ("Summer Quarter 2018");
arrTermNames[22] = ("Fall Quarter 2018");
arrTermNames[23] = ("Fall Quarter 2018");

//determine what the date is today
today = new Date();
//Milliseconds per day
msPerDay = 24 * 60 * 60 * 1000;

for (var i = 0; i < arrStartDates.length; i++) {
    if (today.getTime() < arrStartDates[i].getTime()) {
        nextDate = arrStartDates[i];
        nextTerm = arrTermNames[i];

        liveDate = arrStartDates[i];
        liveTerm = arrTermNames[i];

        break;
    }
}

for (var i = 0; i < arrStartDates.length; i++) {
    if (today.getTime() < (arrStartDates[i].getTime() + (msPerDay * 3))) {
        liveDate = arrStartDates[i];
        liveTerm = arrTermNames[i];

        break;
    }
}

//do not edit this information
//Term Date
termTime = new Date(nextDate);
//Time from today to beginning of term
timeLeft = (termTime.getTime() - today.getTime());

//To get total number of days left, divide total time left by the time length of one day
e_daysLeft = (timeLeft / msPerDay);
//To get number of weeks left, divide total numbers of days by 7
e_wksLeft = (e_daysLeft / 7);

//Calculate amount of days left in current week and display number without decimals
daysLeft = Math.floor(e_daysLeft % 7);
//display number without decimals
wksLeft = Math.floor(e_wksLeft);

//define variables to write month, day, and year of current start date
y = nextDate.getFullYear();
//we add "1" to the month because in JavaScript, January is expressed as "0", not as "1".
m = nextDate.getMonth() + 1;
d = nextDate.getDate();

//Write results on page
$('#next-term').html(nextTerm);
$('#date_container').html(m + '/' + d + '/' + y);
$('#weeks').html(wksLeft);
$('#days').html(daysLeft);
$('#live-term').html(liveTerm);

//if weeks value is less than 10 add a "0" in front of remaining value
if (wksLeft <= 9) {
    $('#weeks').html("&#160; " + wksLeft);
}

if (nextDate != liveDate) {
    liveDate = liveDate.getTime() + (msPerDay * 4);
    termTime = new Date(liveDate);
    timeLeft = (termTime.getTime() - today.getTime());
    $('#register-time-left-text').css("display", "block");
    $('#register-time-left').html(Math.floor((timeLeft / msPerDay)));
}

}

countdownDate();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-full">        
    <div class="row">
        <div class="col-md-12" id="countdown">
        <h3>
        <span id="next-term"></span> starts:
        <span id="date_container"></span>
        </h3>
        <div id="countdown">
        <div id="weeks_container" class="countdown_container">
        <div id="weeks">0</div>
        <div id="weeks-text">Weeks</div>
        </div>
        <div id="days_container" class="countdown_container">
        <div id="days">0</div>
        <div id="days-text">Days</div>
        </div>
        </div>
        <span id="register-time-left-text">You still have <span id="register-time-left"></span> days left to register for <span id="live-term"></span>.
        </span>

            </div>  
        </div>
    </div>

需要帮助调用倒计时功能

Need help invoking a function for a countdown

javascript

html

function

countdown