Javascript时钟用图像改变小时，分钟，秒

Question

我很困惑我的时钟不工作

我已经制作了小时、分钟、秒和上午/下午的图片

http://i.stack.imgur.com/4zg00.png

我试过这个脚本

<script language="JavaScript1.1"> <!--

/* Live image clock III Written by Alon Gibli (http://www.angelfire.com/biz6/deathrowtech) Visit http://wsabstract.com for this script and more
*/

// Setting variables dig = new Image() dig[0] = '0.gif' dig[1] = '1.gif' dig[2] = '2.gif' dig[3] = '3.gif' dig[4] = '4.gif' dig[5] = '5.gif' dig[6] = '6.gif' dig[7] = '7.gif' dig[8] = '8.gif' dig[9] = '9.gif'

//writing images document.write('<table border=1 cellspacing=0 bgcolor="silver">') document.write('<tr><td><img src="0.gif" name="hrs1"></img>') document.write('<img src="0.gif" name="hrs2"></img>') document.write('<td><img src="col.gif"></img>') document.write('<td><img src="0.gif" name="mins1"></img>') document.write('<img src="0.gif" name="mins2"></img>') document.write('<td><img src="col.gif"></img>') document.write('<td><img src="0.gif" name="secs1"></img>') document.write('<img src="0.gif" name="secs2"></img>') document.write('<td><img src="am.gif" name="ampm"></img></table>')

//starting clock function function showTime() { now = new Date ampmtime = now.getHours() - 12 thisHrs = '' + now.getHours() + '' thisMin = '' + now.getMinutes() + '' thisSec = '' + now.getSeconds() + ''

if (thisHrs > 9) {   if (thisHrs >= 12) {
    document.ampm.src = 'pm.gif'
             if (thisHrs==12)
                    newHrs=''+12+''
    if (thisHrs > 12) {
      newHrs = '' + ampmtime + ''
    }
    if (newHrs <= 9) {
      document.hrs1.src = dig[0]
      document.hrs2.src = dig[newHrs.charAt(0)]
    }
    if (newHrs > 9) {
      document.hrs1.src = dig[newHrs.charAt(0)]
      document.hrs2.src = dig[newHrs.charAt(1)]
    }   }   else {
    document.ampm.src = 'am.gif'
    document.hrs1.src = dig[thisHrs.charAt(0)]
    document.hrs2.src = dig[thisHrs.charAt(1)]   } } if (thisHrs <= 9) {   document.ampm.src = 'am.gif'   if (thisHrs == 0) {
    document.hrs1.src = dig[1]
    document.hrs2.src = dig[2]   }   else {
    document.hrs1.src = dig[0]
    document.hrs2.src = dig[thisHrs.charAt(0)]   } } if (thisMin > 9) {   document.mins1.src = dig[thisMin.charAt(0)]   document.mins2.src = dig[thisMin.charAt(1)] } if (thisMin <= 9) {   document.mins1.src = dig[0]   document.mins2.src = dig[thisMin.charAt(0)] } if (thisSec > 9) {   document.secs1.src = dig[thisSec.charAt(0)]   document.secs2.src = dig[thisSec.charAt(1)] } if (thisSec <= 9) {   document.secs1.src = dig[0]   document.secs2.src = dig[thisSec.charAt(0)] } setTimeout("showTime()",1000) }

window.onload=showTime // --> </script>

如何用我制作的图像更改每小时、分钟、秒和上午/下午？

我尝试了很多方法，但都失败了:(

谢谢你:)

Answer 1

通常我会考虑sprite sheet 来处理这个问题，因为您有 135 个独特的图像，传统上这意味着对 Web 服务器的 135 个请求会导致性能不佳。从技术上讲，您的图像非常简单，使用 CSS 或 SVG 也可以很容易地生成效果......

但是，因为这感觉像是在作弊，而且您还没有为时钟指定特定的尺寸；我一直坚持使用单个图像的解决方案 - 尽管我已针对此示例采取措施优化您的图像，我将首先解释。

---

您的 zip 文件中的图像为 400x298 像素，总大小为 4MB（这可能是不网络友好的），如果您无法调整它们的大小（IE。你实际上想要一个大时钟）那么你应该考虑压缩图像。为了这个示例和其他人的带宽，我已将图像减少到 50x37 并使用 pngquant 压缩它们（强烈建议检查一下）。

我还 base64-encoded 图像并将它们转储到一个 javascript 对象中，如下所示：

Clock.prototype.imgs = {
    hrs:[...], // array(13)
    min:[...], // array(60)
    sec:[...], // array(60)
    gmt:[...]  // array(2)
}

这意味着所有图像都可以在一个请求中加载到页面中，并通过data URI 被浏览器理解。

^{总而言之，文件大小减少到 ~150KB :)}

---

脚本也是这样：（我尽量保持直截了当）

首先你需要在页面中留下一个元素来连接，例如：

<div id="myClock"></div>

然后在你的脚本标签中：

new Clock;
function Clock(){

    // setup our DOM elements
    var clock = document.getElementById('myClock');
    this.elHrs = document.createElement('img');
    this.elMin = document.createElement('img');
    this.elSec = document.createElement('img');
    this.elGmt = document.createElement('img'); 
    clock.appendChild(this.elHrs);
    clock.appendChild(this.elMin);
    clock.appendChild(this.elSec);
    clock.appendChild(this.elGmt);

    // set a timer to update every second
    this.tick = setInterval((function(scope){
        return function(){ scope.draw(); }
    })(this), 1000);

    this.draw = function(){
        var date = new Date,
            gmt  = Math.floor(date.getHours()/12),
            hrs  = date.getHours(),
            min  = date.getMinutes(),
            sec  = date.getSeconds(),
            uri  = 'data:image/png;base64,';
        if(hrs!=12) hrs %= 12;
        this.elHrs.src = uri + this.imgs.hrs[hrs];
        this.elMin.src = uri + this.imgs.min[min];
        this.elSec.src = uri + this.imgs.sec[sec];
        this.elGmt.src = uri + this.imgs.gmt[gmt];        
    }
}

jsFiddle