每日javascript倒计时缩短到jquery

发现这个每日倒计时计时器，编辑一点，但我觉得它有点长，并了解到，jquery是一个JavaScript的简短表示法，但不知道任何关于它。每日javascript倒计时缩短到jquery

我的知识不够先进，不足以缩短它或将其更改为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; 
}

来源

2016-07-23 Wanjia

jQuery是** **不一个JS的简短表示法！它是一个庞大的图书馆（数千行代码），它为不同的（大多数是较老的）浏览器提供了许多不同之处，并为您提供了一些额外的功能/糖。 – Thomas

什么问题？ – charlietfl

这里是你的代码 “改为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库不会否定这个储蓄在所有

来源

2016-07-24 00:12:41

嗯，我已经有jquery加载，但我认为代码会更短，jquery – Wanjia

一更短的实施，伊莫。简单，而且不需要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()

chang e目标时间戳。

//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();

其余是一样的

来源

2016-07-24 14:32:14 Thomas

它使用较少的代码，谢谢，但我将如何改变时间重置在而不是午夜来测试它？ – Wanjia

@万佳我做了一个编辑 – Thomas

我试着编辑它，但是当我改变它的时候页面一直在重新设置，你可以在某种下拉菜单中添加一个完整版本的编辑过的代码吗？ – Wanjia

每日javascript倒计时缩短到jquery

回答

相关问题