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 のピクセルであり (これはおそらくWeb フレンドリーではありません)、サイズを変更できない場合 ( IE . 実際には大きな時計が必要です)、画像の圧縮を検討する必要があります。この例と他の人の帯域幅のために、画像を縮小してpngquant50x37を使用して圧縮しました(これを確認することを強くお勧めします)。

また、画像をbase64 でエンコードし、次のような JavaScript オブジェクトにダンプしました。

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

これは、すべての画像を 1 回のリクエストでページにロードし、データ 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];        
    }
}

jsフィドル

于 2013-09-12T21:23:05.110 に答える