基于图像的倒计时时钟 [英] image based count down clock
问题描述
我有一个倒计时钟，工作得非常好。现在问题是我可以将图像显示为数字而不是html。我似乎无法弄清楚我将如何处理它的逻辑。我真的不想为此使用插件，所以这真的不是一个选项。
和时钟的JS是这个
setInterval（函数） （）{
var future = new Date（2014年1月20日21:15:00 GMT + 0200）;
var now = new Date（）;
var difference = Math.floor （（future.getTime（） - now.getTime（））/ 1000）;
var seconds = fixIntegers（差异％60）;
差异= Math.floor（差异/ 60） ;
var minutes = fixIntegers（差异％60）;
差异= Math.floor（差异/ 60）;
var hours = fixIntegers（差异％24） ）;
差异= Math.floor（差异/ 24）;
var天=差异;
$（。秒）。文本（秒+ s）;
$（。minutes）。text（分钟+m）;
$（。hours）。text（小时+h）;
$（。days）。text（days +d）;
}，1000）;
函数fixIntegers（整数）
{
if（integer< 0）
integer = 0;
if（整数< 10）
返回0+整数;
返回+整数;
}
我已将图像存储在一个数组中，这是
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）;
}
感谢堆栈溢出帮助我清理阵列。真的很适合它
这是工作小提琴
JS分组
现在，如何分组这两个分开的数字并说：嘿，你们两个是我的时钟秒！ ？
简单地将它们放入数组中！ [3,5] ，而且我们还有几分钟，几小时和一天 - 让我们简单地将所有这些数组放入对象并指定一个键名，这将产生如下对象：
obj = {d：[7,4]，h：[1,9]，m：[2,9]，s：[0,7]}
对HTML的引用
拥有该对象并知道<$ c $内c> for ... in 循环我们可以检索Key名称和数组值，例如： obj ['d'] [0] === 7 obj ['d'] [5] === 4
意味着我们将会需要一个 for 循环来检索 0 和 1 到获取我们的数组位置中的值 [pos0，pos1]
所有在内的... 循环将获得KEY名称： d，h，m，s
2pos x 4keyNames = 8个元素迭代/秒
意味着现在我们将能够定位一个ID元素例如：＃s0 和＃s1
我们现在需要的只是检索元素背景的值和动画由
-width *数字
I have a count down clock which works absolutely fine. Now the question is can I display images as digits instead of html. I cant seem to figure out the logic how would I approach it. I really dont want to use a plugin for this so that is really not an option.
and the JS for the clock is this
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;
}
I have stored the images in an array which is this
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");
}
Thanks to stack overflow folks helping me cleaning the array. Really appriciate it
And here is the working fiddle http://jsfiddle.net/sghoush1/wvbPq/3/
You can do it using only one sprite image and this bit of code I created:
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<fut ? Math.floor( (fut-now)/1000) : 0;
obj.s = intSpl(dif % 60);
obj.m = intSpl(dif/60 % 60);
obj.h = intSpl(dif/60/60 % 24);
obj.d = intSpl(dif/60/60/24);
for(var key in obj){
if(obj.hasOwnProperty(key)){
for(var i=0; i<2; i++){ // get el ID number (0,1)
$('#'+ key+i).css({backgroundPosition: -obj[key][i]*50 });
}
}
}
}
drawTime();
setInterval(drawTime, 1000);
});
This simple HTML:
<div id="clock">
<span id="d0"></span>
<span id="d1"></span>
<span id="h0"></span>
<span id="h1"></span>
<span id="m0"></span>
<span id="m1"></span>
<span id="s0"></span>
<span id="s1"></span>
</div>
and 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;
}
To explain the idea:
- Create elements, each will hold a one digit of the current 2 digits value;
- Set a common bg image to all
spans in CSS - Every second move each element's background-image left by
-(witdh * number)px
While the listed above seems logic, the first problem you can see here is how to retrieve separately a JS time number (1 or 2 digits) keep leading zero if needed, and reference each digit to target the right element in HTML?
Let's start by splitting numbers:
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 Grouping
Now, how to group this two separated digits and say: "Hey you two are for my clock seconds!" ?
By simply putting them into an array! [3, 5], and for we'll have also minutes, hours and day - let's simply put all those arrays into an Object and assign a Key Name which will result in having an object like:
obj = {d:[7,4], h:[1,9], m:[2,9], s:[0,7]}
Reference to HTML
Having that Object and knowing that inside an for...in loop we can retrieve the Key name and the array value like eg: obj['d'][0] === 7 obj['d'][5] === 4
means that we'll need a for loop to retrieve the 0 and 1 to get the values in our array positions [pos0, pos1]
all inside a for...in loop that will get the KEY names : d, h, m, s
2pos x 4keyNames = 8 elements iterations/second
means that now we'll be able to target an ID element eg: #s0 and #s1
and all we need now is to retrieve the value and animate that element background by
-width * digit
这篇关于基于图像的倒计时时钟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
