使用Javascript时钟更改小时、分钟、秒和图像

bq9c1y66 于 2022-12-10 发布在 Java

关注(0)|答案(2)|浏览(126)

我很困惑我钟不走了
我已经为小时，分钟，秒和上午/下午的图片
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>

如何改变每小时，分钟，秒和上午/下午与图像我已经做了？
我试过很多方法，但都失败了
谢谢你，谢谢！

JavaScript

来源：https://stackoverflow.com/questions/18762666/javascript-clock-to-change-hour-minute-second-with-image

2条答案

按热度按时间

1l5u6lss1#

通常我会用sprite sheet来处理这个问题，因为你有135个唯一的图像，传统上这意味着135个请求到一个Web服务器，这将导致性能下降。从技术上讲，你的图像足够简单，使用CSS或SVG也可以很容易地生成效果。
然而，因为这感觉像作弊的问题，因为你还没有指定一个特定的大小为您的时钟;我一直坚持使用单个图像的解决方案-尽管我已经采取措施来优化这个例子的图像，我将首先解释。
zip文件中的图像为400x298像素，总大小为4 MB（这可以说是***不***Web友好），如果您无法调整它们的大小（IE。你实际上想要一个大时钟）那么你应该考虑压缩图像。为了这个例子和其他人的带宽，我已经减少了图像到50x37和压缩他们使用pngquant（强烈推荐看看这个）。
我还对图像进行了base64-encoded处理，并将它们转储到一个javascript对象中，如下所示：

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

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

总而言之，文件大小缩减至约150 KB：）*

于是对剧本道：（我已经尽可能地直截了当了）
首先，你需要在页面中留下一个元素来挂钩，例如：

<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

赞(0）回复(0）举报 2022-12-10

szqfcxe22#

setInterval(() => {
  d = new Date();
  htime = d.getHours();
  mtime = d.getMinutes();
  stime = d.getSeconds();
  hrotation = 30 * htime + mtime / 2;
  mrotation = 6 * mtime;
  srotation = 6 * stime;

  hour.style.transform = `rotate(${hrotation}deg)`;
  minute.style.transform = `rotate(${mrotation}deg)`;
  second.style.transform = `rotate(${srotation}deg)`;
}, 1000);

赞(0）回复(0）举报 2022-12-10

我来回答

使用Javascript时钟更改小时、分钟、秒和图像

2条答案

相关问题

热门标签

最新问答