0

私は次のカウントダウンスクリプトを使用していますが、これはうまく機能しますが、数字に先行ゼロを追加する方法がわかりません（たとえば、9ではなく09が表示されます）。誰か助けてくれませんか？現在のスクリプトは次のとおりです。

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();
}
4

6 に答える 6

5

変数が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ソリューションを使用して関数でラップすることもできます。効果は同じで、ロジックを一元化します。

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();
}
于 2012-12-12T11:05:43.047 に答える
2

IMO、先行ゼロを取得する最も簡単な方法は、次を使用することsubstrです。

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

簡単-簡単。これを関数に注ぎたい場合は、文字列を返します。

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

以上です。

于 2012-12-12T11:37:22.813 に答える
2

最も簡単なことは、ユーティリティ関数を投入して数値を埋めることです。

function pad2(n) {
    return (n < 10) ? '0' + n : n;
}
于 2012-12-12T11:05:10.980 に答える
0

これは役立つはずです：

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であり、4つの呼び出しです。

formatNum(day);
formatNum(hour);
formatNum(minute);
formatNum(second);
于 2012-12-12T11:11:30.020 に答える
0

数が日、時、秒で10未満の場合は、単に先行ゼロを追加する必要があります...

day = day<10?'0' + day : day;
hour = hour<10?'0' + hour : hour;
second = second<10?'0' + second : second;
于 2012-12-12T11:14:02.107 に答える
0

私は初心者ですが、これを実行して機能しました。

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 + "";
于 2019-10-30T13:52:54.470 に答える