Question

找到这个每日倒数计时器并对其进行了一些编辑，但我发现它有点长，并且了解到Jquery是一个较短的javascript符号，但对此却一无所知。

我的知识不够先进，无法缩短或改为jquery。

我使用<body onload = "getSeconds()">开始每日倒计时。

var reloadPage = false;
function getSeconds()
{
    var now = new Date();
    var time = now.getTime(); // time now in milliseconds
    var midnight = new Date(now.getFullYear(),now.getMonth(),now.getDate(),21,57,0); //midnight 0000 hrs
    //midnight - change time hh,mm,ss to whatever time required, e.g. 7,50,0 (0750)
    var ft = midnight.getTime() + 86400000; // add one day 86 400 000
    var diff = ft - time;
    diff = parseInt(diff/1000);
    if (diff > 86400) {diff = diff - 86400}
    startTimer (diff);
}

var timeInSecs;
var ticker;

function startTimer(secs){
    timeInSecs = parseInt(secs);
    ticker = setInterval("tick()",1000); 
    tick(); //to start counter display right away
}

function tick() {
    var secs = timeInSecs;
    if (secs > 0) {
        timeInSecs--;
    }
    else
    {
    clearInterval(ticker); //stop counting at zero
    if (secs == 0)
    {
        reloadPage = true;
        console.log("reset");
    };
    getSeconds();  //and start again if required
}

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

if(reloadPage)
{
    var result = "Please reload page for daily reset."
}
else
{
    var result = ((hours <= 0 ) ? "" : hours + " hours ") + ( (mins <= 0) ? "" : mins + " minutes " ) + ( (mins <= 0) ? " < 1 minute " : "" );
}
document.getElementById("countdown").innerHTML = "Daily reset: " + result;
}

Answer 1

这是你的代码“改为jQuery”

var reloadPage = false;
function getSeconds()
{
    var now = new Date();
    var time = now.getTime(); // time now in milliseconds
    var midnight = new Date(now.getFullYear(),now.getMonth(),now.getDate(),21,57,0); //midnight 0000 hrs
    //midnight - change time hh,mm,ss to whatever time required, e.g. 7,50,0 (0750)
    var ft = midnight.getTime() + 86400000; // add one day 86 400 000
    var diff = ft - time;
    diff = parseInt(diff/1000);
    if (diff > 86400) {diff = diff - 86400}
    startTimer (diff);
}

var timeInSecs;
var ticker;

function startTimer(secs){
    timeInSecs = parseInt(secs);
    ticker = setInterval("tick()",1000); 
    tick(); //to start counter display right away
}

function tick() {
    var secs = timeInSecs;
    if (secs > 0) {
        timeInSecs--;
    }
    else
    {
    clearInterval(ticker); //stop counting at zero
    if (secs == 0)
    {
        reloadPage = true;
        console.log("reset");
    };
    getSeconds();  //and start again if required
}

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

if(reloadPage)
{
    var result = "Please reload page for daily reset."
}
else
{
    var result = ((hours <= 0 ) ? "" : hours + " hours ") + ( (mins <= 0) ? "" : mins + " minutes " ) + ( (mins <= 0) ? " < 1 minute " : "" );
}
$("#countdown").html("Daily reset: " + result);
}

保存27个字节...我确定加载86000+字节的jQuery库根本不会否定这个保存

Answer 2

更短的实现，imo。更简单，不需要jQuery（即使你已经加载了它）

//a few values that come in handy when dealing with timestamps
MILLISECOND = MILLISECONDS = 1;
SECOND = SECONDS = 1000*MILLISECONDS;
MINUTE = MINUTES = 60*SECONDS;
HOUR = HOURS = 60*MINUTES;
DAY = DAYS = 24*HOURS;
TIMEZONE_OFFSET = new Date().getTimezoneOffset() * MINUTES;

var midnight = Date.now() + DAY - (Date.now() - TIMEZONE_OFFSET) % DAY;

function updateCountdown(){
    //an utility to fetch the parts (hours, mins, ...) of the time
    //and return a formated output
    function fetch(factor, postfix){
        var value = Math.floor(t/factor);
        t %= factor;    //beware: side-effect

        //format the value
        return value > 0? 
            value + (postfix == null? "": postfix): 
            "";
    }

    var t = midnight - Date.now(); //time till midnight

    var countdown = document.querySelector("#countdown");
    if(t <= 0){
        countdown.innerHTML = "Please reload page for daily reset.";
        location.reload();
    }else{
        countdown.innerHTML = [
            "Daily reset:",
            fetch(HOURS, " hours"),
            fetch(MINUTES, " minutes"),
            fetch(SECONDS, " seconds")
        ].join(" ");

        setTimeout(updateCountdown, 200);
    }
}

updateCountdown();

修改

我如何更改
重置的时间

变量midnight包含我指望的目标时间戳：t = midnight-Date.now()

更改目标时间戳。

//a utility that gives you the timestamp for today `00:00 AM` (in your local timezone) function today(){ var now = Date.now(); return now - (now - TIMEZONE_OFFSET) % DAY; } console.log( new Date( today() ) ); //today 00:00:00 GMT+yourTimeZoneOffset

定义目标时区：

var midnight = today() + 1*DAY; var target = today() + 20*HOURS + 45*MINUTES + 59*SECONDS; //you see how these constants get handy ;)

并计算到该目标的时间：

var t = target - Date.now();

其余的是相同的

每日javascript倒计时缩短为jquery

2 个答案: