Question

我坐在一个项目中，我希望显示图像而不是数字。但我无法弄清楚JS倒计时是否有可能。

目前我的代码看起来像这样，但我没有得到任何结果。

希望有人可以帮助我？

<div id="countdown" onload="myFunction"></div>
<div id="newcountdown"></div>

CountDownTimer('02/19/2017 10:1 AM', 'countdown');
CountDownTimer('02/20/2017 10:1 AM', 'newcountdown');

function CountDownTimer(dt, id)
{
    var end = new Date(dt);

    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var timer;

    function showRemaining() {
        var now = new Date();
        var distance = end - now;
        if (distance < 0) {

            clearInterval(timer);
            document.getElementById(id).innerHTML = 'EXPIRED!';

            return;
        }
        var days = Math.floor(distance / _day);
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);

        document.getElementById(id).innerHTML = days + 'days ';
        document.getElementById(id).innerHTML += hours + 'hrs ';
        document.getElementById(id).innerHTML += minutes + 'mins ';
        document.getElementById(id).innerHTML += seconds + 'secs';
    }

    timer = setInterval(showRemaining, 1000);
}

(function myFunction() {
var str = document.getElementById("countdown").innerHTML; 
var res = str.replace("2", "W3Schools");
document.getElementById("countdown").innerHTML = res;}

Answer 1

你想要

使用替换

变化

document.getElementById(id).innerHTML = days + 'days ';
document.getElementById(id).innerHTML += hours + 'hrs ';
document.getElementById(id).innerHTML += minutes + 'mins ';
document.getElementById(id).innerHTML += seconds + 'secs';

到

    document.getElementById(id).innerHTML = getImg(days) + 'days ';
    document.getElementById(id).innerHTML += getImg(hours) + 'hrs ';
    document.getElementById(id).innerHTML += getImg(minutes) + 'mins ';
    document.getElementById(id).innerHTML += getImg(seconds) + 'secs';

并且

function getImg(num) {
  var digits = String(num).split(""), text="";
  for (var i=0;i<digits.length;i++) {
    text += '<img src="'+digits[i]+'.gif" />';
  }
  return text;
}

并且在您的服务器上有0.gif，1.gif ... 9.gif

＆＃13;

function getImg(num) {
      var digits = String(num).split(""), text="";
      for (var i=0;i<digits.length;i++) {
        text += '<img alt="'+digits[i]+'" src="'+digits[i]+'.gif" />';
      }
      return text;
    }



CountDownTimer('02/19/2017 10:1 AM', 'countdown');
CountDownTimer('02/20/2017 10:1 AM', 'newcountdown');

function CountDownTimer(dt, id)
{
    var end = new Date(dt);

    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var timer;

    function showRemaining() {
        var now = new Date();
        var distance = end - now;
        if (distance < 0) {

            clearInterval(timer);
            document.getElementById(id).innerHTML = 'EXPIRED!';

            return;
        }
        var days = Math.floor(distance / _day);
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);

        document.getElementById(id).innerHTML= getImg(days) + 'days '
                 + getImg(hours) + 'hrs '
                 + getImg(minutes) + 'mins '
                 + getImg(seconds) + 'secs';
    }

    timer = setInterval(showRemaining, 1000);
}

＆＃13;

<div id="countdown"></div>
<div id="newcountdown"></div>

＆＃13;

在倒计时JS中替换数字

1 个答案: