添加前导零到这个javascript倒计时脚本?

k5ifujac  于 2023-02-28  发布在  Java
关注(0)|答案(7)|浏览(107)

我正在使用下面的倒计时脚本,它的工作很好,但我不知道如何添加前导零的数字(例如,所以它显示09而不是9。)有人能帮我吗?这里是当前的脚本:

function countDown(id, end, cur){
        this.container = document.getElementById(id);
        this.endDate = new Date(end);
        this.curDate = new Date(cur);

var context = this;

var formatResults = function(day, hour, minute, second){
    var displayString = [
                '<div class="stat statBig">',day,'</div>',
                '<div class="stat statBig">',hour,'</div>',
                '<div class="stat statBig">',minute,'</div>',
                '<div class="stat statBig">',second,'</div>'
    ];
    return displayString.join("");
}

var update = function(){
    context.curDate.setSeconds(context.curDate.getSeconds()+1);

    var timediff = (context.endDate-context.curDate)/1000; 

    // Check if timer expired:
    if (timediff<0){ 
        return context.container.innerHTML = formatResults(0,0,0,0);
    }

    var oneMinute=60; //minute unit in seconds
    var oneHour=60*60; //hour unit in seconds
    var oneDay=60*60*24; //day unit in seconds

    var dayfield=Math.floor(timediff/oneDay);
    var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour);
    var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute);
    var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute));

    context.container.innerHTML = formatResults(dayfield, hourfield, minutefield, secondfield);

    // Call recursively
    setTimeout(update, 1000);
};

// Call the recursive loop
update();
}
pengsaosao

pengsaosao1#

你只需要检查变量是否小于10,并在它们前面加上零。

function countDown(id, end, cur){
        this.container = document.getElementById(id);
        this.endDate = new Date(end);
        this.curDate = new Date(cur);

var context = this;

var formatResults = function(day, hour, minute, second){
    day = (day < 10) ? "0"+day : day;
    hour = (hour < 10) ? "0"+hour : hour;
    minute = (minute < 10) ? "0"+minute : minute;
    second = (second < 10) ? "0"+second: second; 
    var displayString = [
                '<div class="stat statBig">',day,'</div>',
                '<div class="stat statBig">',hour,'</div>',
                '<div class="stat statBig">',minute,'</div>',
                '<div class="stat statBig">',second,'</div>'
    ];
    return displayString.join("");
}

var update = function(){
    context.curDate.setSeconds(context.curDate.getSeconds()+1);

    var timediff = (context.endDate-context.curDate)/1000; 

    // Check if timer expired:
    if (timediff<0){ 
        return context.container.innerHTML = formatResults(0,0,0,0);
    }

    var oneMinute=60; //minute unit in seconds
    var oneHour=60*60; //hour unit in seconds
    var oneDay=60*60*24; //day unit in seconds

    var dayfield=Math.floor(timediff/oneDay);
    var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour);
    var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute);
    var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute));

    context.container.innerHTML = formatResults(dayfield, hourfield, minutefield, secondfield);

    // Call recursively
    setTimeout(update, 1000);
};

// Call the recursive loop
update();
}
    • 更新日期:**

您也可以使用@Alnitak解决方案并将其 Package 为一个函数,效果是相同的,并且您将集中您的逻辑:

function countDown(id, end, cur){
        this.container = document.getElementById(id);
        this.endDate = new Date(end);
        this.curDate = new Date(cur);

var context = this;

var addLeadingZeros = function(number){
    return (number < 10) ? "0"+number : number;
}

var formatResults = function(day, hour, minute, second){
    day = addLeadingZeros(day);
    hour = addLeadingZeros(hour);
    minute = addLeadingZeros(minute);
    second = addLeadingZeros(second); 
    var displayString = [
                '<div class="stat statBig">',day,'</div>',
                '<div class="stat statBig">',hour,'</div>',
                '<div class="stat statBig">',minute,'</div>',
                '<div class="stat statBig">',second,'</div>'
    ];
    return displayString.join("");
}

var update = function(){
    context.curDate.setSeconds(context.curDate.getSeconds()+1);

    var timediff = (context.endDate-context.curDate)/1000; 

    // Check if timer expired:
    if (timediff<0){ 
        return context.container.innerHTML = formatResults(0,0,0,0);
    }

    var oneMinute=60; //minute unit in seconds
    var oneHour=60*60; //hour unit in seconds
    var oneDay=60*60*24; //day unit in seconds

    var dayfield=Math.floor(timediff/oneDay);
    var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour);
    var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute);
    var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute));

    context.container.innerHTML = formatResults(dayfield, hourfield, minutefield, secondfield);

    // Call recursively
    setTimeout(update, 1000);
};

// Call the recursive loop
update();
}
7rtdyuoh

7rtdyuoh2#

最简单的方法是加入一个实用函数来填充你的数字:

function pad2(n) {
    return (n < 10) ? '0' + n : n;
}
js4nwp54

js4nwp543#

要获得前导零,最简单的方法是使用substr

var n = 10;
console.log(('00' + n).substr(-2));//logs 10
n = 2;
console.log(('00' + n).substr(-2));//logs 02

easy-peasy.如果你想把这个函数倒进一个函数,返回一个字符串:

function addLeadingZeroes(n)
{
    return ('00' + n).substr(-2);
}

就是这样。

lfapxunr

lfapxunr4#

这应有助于:

function countDown(id, end, cur){
        this.container = document.getElementById(id);
        this.endDate = new Date(end);
        this.curDate = new Date(cur);

var context = this;

var formatNum = function (num) {
    if (num.toString().length < 2) {
        return '0' + num;
    }    
    return num;
}

var formatResults = function(day, hour, minute, second){
    formatNum(day);
    formatNum(hour);
    formatNum(minute);
    formatNum(second);    
    var displayString = [
                '<div class="stat statBig">',day,'</div>',
                '<div class="stat statBig">',hour,'</div>',
                '<div class="stat statBig">',minute,'</div>',
                '<div class="stat statBig">',second,'</div>'
    ];
    return displayString.join("");
}

var update = function(){
    context.curDate.setSeconds(context.curDate.getSeconds()+1);

    var timediff = (context.endDate-context.curDate)/1000; 

    // Check if timer expired:
    if (timediff<0){ 
        return context.container.innerHTML = formatResults(0,0,0,0);
    }

    var oneMinute=60; //minute unit in seconds
    var oneHour=60*60; //hour unit in seconds
    var oneDay=60*60*24; //day unit in seconds

    var dayfield=Math.floor(timediff/oneDay);
    var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour);
    var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute);
    var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute));

    context.container.innerHTML = formatResults(dayfield, hourfield, minutefield, secondfield);

    // Call recursively
    setTimeout(update, 1000);
};

// Call the recursive loop
update();
}

唯一的区别是formatNum方法,它有四个调用:

formatNum(day);
formatNum(hour);
formatNum(minute);
formatNum(second);
v6ylcynt

v6ylcynt5#

如果数字小于10,只需在前面加上零,然后加上日、时、秒......

day = day<10?'0' + day : day;
hour = hour<10?'0' + hour : hour;
second = second<10?'0' + second : second;
iovurdzv

iovurdzv6#

我是一个新手,但我这样做,它的工作!

if (days< 10) {
        day =  "0"+days;}

  if (hours < 10) {
    hours = "0"+hours;
}

  if (minutes < 10) {
    minutes = "0"+minutes;
  }

  if (seconds < 10) {
    seconds = "0"+seconds;
}

  // Output the result
  document.getElementById("demo").innerHTML = days + ":" + hours + ":"
  + minutes + ":" + seconds + "";
4dbbbstv

4dbbbstv7#

days < 10 ? (day =  "0" + days) : days;
hours < 10 ? (hours = "0" + hours) : hours;
minutes < 10 ? (minutes = "0" + minutes) : minutes;
seconds < 10 ? (seconds = "0" + seconds) : seconds;
// Output the result
document.getElementById("demo").innerHTML = `${days}:${hours}:${minutes}:${seconds}`;

相关问题