繁体   English   中英

交替重复倒数计时-HTML-JavaScript

[英]Alternating Repeating Countdown - html - javascript

显然,此问题包含多个部分:一个部分进行倒计时,另一部分进行交替显示。 我想倒数到周末(星期六00:00),在周末它将显示倒数到周末(星期一00:00)

因此,首先进行倒数计时:我所看到的方式是在倒数计时网站上使用,然后将其存在,唯一的问题是这与背景不匹配,您必须滚动。 因此,您必须使用另一种方法。

其次,交替:我对此没有很多想法,但是我必须考虑一些事情,或者这是不合时宜的。 因此,如果我希望更改两次。 我可以将倒数设为变量(x),然后测试x是否为0,然后将y加1,当它为奇数时,显示5天倒计时(432000秒),然后为偶数,然后显示2天的倒计时(172800秒)所以这是我的尝试(可能失败了):

    if x=0 {
        if y=1 {
           var z=432000
        }
        else {
           var z=172000
        }
    }

我不知道这是否正确,但我希望您对我的尝试表示赞赏。 先感谢您!

因此,如果您尝试编写一个符合您要求的小型Web应用程序,那么实际上它不需要您使用第三方计时器。 您真正想要的是Date对象。 然后,您可以使用它来检测当前时间和星期几,并使用它来确定a)您想要的计时器,以及b)计时器结束之前需要多长时间。

var now = new Date;
var day = now.getDay(); // this returns a number from 0-6, where 0 is Sunday, going through the days of the week.
var month = now.getMonth();
var date = now.getDate();
var year = now.getFullYear();
var target_time; // this will be used to store the time at which the timer elapses
var day_offset; // this stores the number of days we need to offset by until we get to the end of the timer
if(day === 0 || day === 6){
    // it's the weekend!
    day_offset = (day === 0) ? 1 : 2;
    target_time = new Date(year, month, date+day_offset, 0, 0, 0);
} else {
    // it's a week day!
    day_offset = 6-day; // i think this will work!
    target_time = new Date(year, month, date+day_offset, 0, 0, 0);
}
var milliseconds_until_end = target_time.getTime() - Date.now();
// milliseconds_until_end is the number of milliseconds until the timer should end. 
// you can parse this in all sorts of ways, but for starters, you could do something 
// like this:
var seconds = Math.floor(milliseconds_until_end/1000);
var minutes = seconds/60;
var hours = minutes/60;
var extra_minutes = 60 * (hours - Math.floor(hours));
var extra_seconds = 60 * (extra_minutes - Math.floor(extra_minutes));
hours = Math.floor(hours);
extra_minutes = Math.floor(extra_minutes);
extra_seconds = Math.floor(extra_seconds);
// presumably we want to write all this somewhere!
var output = document.getElementById("output");
output.textContent = hours + ":" + extra_minutes + ":" + extra_seconds;

只是警告,我还没有测试过任何一个。 您现在要做的就是将所有这些代码放入setInterval中。 为此,您首先必须将以上所有代码包装在一个函数定义中(我们可以将其称为getTime函数)。

setInterval(getTime, 1); // this makes the getTime function trigger once every millisecond (not second as i had previously! my bad).

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM