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个独特的图像，而传统上这意味着对网络服务器的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

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

1 个答案: