基于图像的倒计时时钟

我有一个倒计时钟，工作得非常好。 现在问题是我可以将图像显示为数字而不是html。 我似乎无法弄清楚我将如何处理它的逻辑。 我真的不想为此使用插件，所以这真的不是一个选项。

时钟的JS就是这个

setInterval(function(){ var future = new Date("Jan 20 2014 21:15:00 GMT+0200"); var now = new Date(); var difference = Math.floor((future.getTime() - now.getTime()) / 1000); var seconds = fixIntegers(difference % 60); difference = Math.floor(difference / 60); var minutes = fixIntegers(difference % 60); difference = Math.floor(difference / 60); var hours = fixIntegers(difference % 24); difference = Math.floor(difference / 24); var days = difference; $(".seconds").text(seconds + "s"); $(".minutes").text(minutes + "m"); $(".hours").text(hours + "h"); $(".days").text(days + "d"); }, 1000); function fixIntegers(integer) { if (integer < 0) integer = 0; if (integer < 10) return "0" + integer; return "" + integer; } 

我已将图像存储在一个数组中

 var linkCons = 'http://soumghosh.com/otherProjects/Numbers/' var num = []; var linkCons = "http://soumghosh.com/otherProjects/Numbers/"; for(var i = 0; i < 10; i++) { num.push(linkCons + "nw" + i + ".png"); } 

感谢堆栈溢出帮助我清理arrays。 真的很喜欢它

这是工作小提琴http://jsfiddle.net/sghoush1/wvbPq/3/

Answer 1

你只能使用一个精灵图像和我创建的这段代码来做到这一点：

现场演示

 jQuery( function($) { var fut = new Date("Jan 20 2014 21:15:00 GMT+0200").getTime(), obj = {}; // Number splitter function intSpl( i ){ i = Math.floor(i); return [~~(i/10), i%10]; // 37=[3,7] // 5=[0,5] // 0=[0,0] } function drawTime(){ var now = new Date().getTime(), dif = now 

这个简单的HTML ：

和CSS ：

 #clock span{ display:inline-block; width:50px; height:85px; background:url('http://i.imgur.com/uBTxTTD.jpg'); background-position:0 0; } #clock span:nth-child(even){ margin-right:15px; } 

解释这个想法：

• 创建元素，每个元素将保存当前2位数值的一位数;
• 将常见的bg图像设置为CSS中的所有span
• 每秒移动每个元素的背景图像-(witdh * number) px

虽然上面列出的似乎是逻辑，但你可以在这里看到的第一个问题是如何单独检索JS时间数（1或2位数），如果需要保持前导零 ，并引用每个数字以定位HTML中的正确元素？

让我们从分裂数字开始：

35 == 3, 5 /// 0 == 0, 0 // this is an example of what we need.

 var n = 35; // Set any 1 or 2 digit number. var n1 = ~~(n/10); // 3 //// ~~ "Double Bitwise NOT" // just instead of parseInt(time/10, 10). var n2 = n%10; // 5 //// % "Mudulus operator" (reminder). 

^{示例游乐场}

JS分组

现在， 如何将这两个分开的数字分组并说：“嘿，你们两个是我的时钟秒！” ？
只需将它们放入arrays即可！ [3, 5] ，因为我们还有几分钟，几小时和一天 - 让我们简单地将所有这些数组放入一个Object并分配一个键名 ，这将产生一个像这样的对象：

 obj = {d:[7,4], h:[1,9], m:[2,9], s:[0,7]} 

参考HTML

拥有该Object并知道在for...in循环中我们可以检索Key名称和数组值，例如： obj['d'][0] === 7 obj['d'][5] === 4

意味着我们需要一个for循环来检索0和1来获取数组位置[pos0, pos1]
所有在for...in循环中将得到KEY名称： d, h, m, s

2pos x 4keyNames = 8个元素迭代/秒

意味着现在我们将能够定位ID元素，例如： #s0和#s1
我们现在需要的是检索值并为该元素背景设置动画
-width * digit

Answer 2

好吧，还有另一种方法可以用来解决同样的问题。 这是步骤。 首先，我为每个图像位置编写了一个CSS类选择器。

 .list-group-item .digit-display{ display:inline-block; width:50px; height:85px; background:url('http://i.imgur.com/uBTxTTD.jpg'); } .position-0 { background-position: 0 0; } .position-1 { background-position: -50px 0px !important; } 

然后我写了一个JavaScript函数，它接受一个数字作为输入，并返回该数字的CSS类选择器，如下所示。

  displayDigit(digit) { const baseSelector = "digit-display position-"; return `${baseSelector}${digit}`; } 

最后，在JSX元素内部调用此函数，如下所示。

这解决了这个问题。

但是，如果某人确实需要使用上面指定的基于jquery的方法，我们仍然可以压缩相同的代码，如下所示。

  secondsToTime(secs) { let hours = `${constants.ZERO}${Math.floor(secs / (60 * 60))}`.slice(-2); let divisorForMinutes = secs % (60 * 60); let minutes = `${constants.ZERO}${Math.floor(divisorForMinutes / 60)}`.slice(-2); let divisorForSeconds = divisorForMinutes % 60; let seconds = `${constants.ZERO}${Math.ceil(divisorForSeconds)}`.slice(-2); let obj = { "h": hours, "m": minutes, "s": seconds }; return obj; } handleFlipClockImage = () => { var myObj = this.secondsToTime(seconds); Object.keys(myObj).forEach(key => { let obj = myObj[key]; var digits = obj.split(constants.EMPTY_SPACE_CHAR); digits.forEach((digit, index) => { jquery(`#${this.state.label}${key}${index}`).css({backgroundPosition: -digit*50 }); }); }); }