Javascript计时器如何用图像替换数字？

Question

您好如何将以下javascript计时器中的数字替换为相应的图像。即0表示dig1.png，1表示dig2.png，3表示dig3。 png .....冒号（:)与colo.png。     00:23:01 ==＆gt;＆gt;

var Timer;
var TotalSeconds;


function CreateTimer(TimerID, Time) {
Timer = document.getElementById(TimerID);
TotalSeconds = Time;

UpdateTimer()
window.setTimeout("Tick()", 1000);
}

function Tick() {
if (TotalSeconds <= 0) {
doSubmit();
document.getElementById("timeisup").innerHTML = "Time is up response.";
return;
}

TotalSeconds -= 1;
UpdateTimer()
window.setTimeout("Tick()", 1000);
}


function UpdateTimer() {
Timer.innerHTML = TotalSeconds;
}

function UpdateTimer() {
var Seconds = TotalSeconds;

var Days = Math.floor(Seconds / 86400);
Seconds -= Days * 86400;

var Hours = Math.floor(Seconds / 3600);
Seconds -= Hours * (3600);

var Minutes = Math.floor(Seconds / 60);
Seconds -= Minutes * (60);


var TimeStr = ((Days > 0) ? Days + " days " : "") + LeadingZero(Hours) + ":" 
+ LeadingZero(Minutes) + ":" + LeadingZero(Seconds)


Timer.innerHTML = TimeStr;
}


function LeadingZero(Time) {

return (Time < 10) ? "0" + Time : + Time;

}

这是显示计时器的html标记......

<span id="timer"style="font-weight: bold;"></span><script
type="text/javascript">window.onload = CreateTimer("timer", 7200);</script>

由于

Answer 1

旧时尚而非最佳： 首先，创建HTML DOM对象：

    var image = document.createElement("img");
    image.className = "style here";
    //image.style can come here ...
    image.src = "Path/to/image/here";

或使用

预先填充image

    <image src="path/to/image" id="imageId like ie0">

并将它们附加到Tick功能中所需的div：

 var parentDiv = document.getElementById("parent div ID");
 parentDiv.appendChild(image);

现代化的做法：

在代码中包含CSS。您可以添加漂亮的样式，而不用担心图像，因为它会很慢并且有些不一致。查看开源代码的实时示例：Minimal Digital Clock with CSS

Answer 2

我认为最好的方法是首先创建图像并将其保留到位

<img id="d0" src="dig0.png">
<img id="d1" src="dig0.png">
<img src="col.png">
<img id="d2" src="dig0.png">
<img id="d3" src="dig0.png">
<img src="col.png">
<img id="d4" src="dig0.png">
<img id="d5" src="dig0.png">

然后只需从javascript：

更新图片src

var digits = [document.getElementById("d0"),
              document.getElementById("d1"),
              document.getElementById("d2"),
              document.getElementById("d3"),
              document.getElementById("d4"),
              document.getElementById("d5")];

function setTime(hh, mm, ss) {
    digits[0].src = "dig" + Math.floor(hh / 10) + ".png";
    digits[1].src = "dig" + (hh % 10) + ".png";
    digits[2].src = "dig" + Math.floor(mm / 10) + ".png";
    digits[3].src = "dig" + (mm % 10) + ".png";
    digits[4].src = "dig" + Math.floor(ss / 10) + ".png";
    digits[5].src = "dig" + (ss % 10) + ".png";
}