0

我很困惑我的时钟不工作

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

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>

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

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

谢谢你 ：）

4

1 回答 1

0

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

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

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

我还对图像进行了base64 编码并将它们转储到一个 javascript 对象中，如下所示：

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

这意味着所有图像都可以在单个请求中加载到页面中，并通过数据 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

于 2013-09-12T21:23:05.110 回答