1、首先贴出美工设计的样式
2、自己的写的布局
<span style="white-space:pre"> </span><span class="jyhendtimetitle">距开始</span>
<div class="timebox">
<div class="jyhendtime">
<ul class="jyh-timenumberlist" isshow="true" style="top: 0px;">
<li>0</li>
<li>1</li>
</ul>
<ul class="jyh-timenumberlist" isshow="false" style="display: none;">
<li>0</li>
<li>1</li>
</ul>
</div>
<div class="jyhendtime lastchild">
<ul class="jyh-timenumberlist" isshow="true" style="top: 0px;">
<li>0</li>
<li>1</li>
</ul>
<ul class="jyh-timenumberlist" isshow="false" style="display: none;">
<li>0</li>
<li>1</li>
</ul>
</div>
</div>
<span class="jyh-timedot"></span>
<div class="timebox">
<div class="jyhendtime">
<ul class="jyh-timenumberlist" isshow="true" style="top: 0px;">
<li>0</li>
<li>1</li>
</ul>
<ul class="jyh-timenumberlist" isshow="false" style="display: none;">
<li>0</li>
<li>1</li>
</ul>
</div>
<div class="jyhendtime lastchild">
<ul class="jyh-timenumberlist" isshow="true" style="top: 0px;">
<li>0</li>
<li>1</li>
</ul>
<ul class="jyh-timenumberlist" isshow="false" style="display: none;">
<li>0</li>
<li>1</li>
</ul>
</div>
</div>
<span class="jyh-timedot"></span>
<div class="timebox">
<div class="jyhendtime">
<ul class="jyh-timenumberlist" isshow="true" style="top: 0px;">
<li>0</li>
<li>1</li>
</ul>
<ul class="jyh-timenumberlist" isshow="false" style="display: none;">
<li>0</li>
<li>1</li>
</ul>
</div>
<div class="jyhendtime lastchild">
<ul class="jyh-timenumberlist" isshow="true" style="top: 0px;">
<li>0</li>
<li>1</li>
</ul>
<ul class="jyh-timenumberlist" isshow="false" style="display: none;">
<li>0</li>
<li>1</li>
</ul>
</div>
</div>
3、贴出css样式
.jyhendtimetitle{font-size: 14px;color: #3c3c3c;margin-left: 30px;margin-right: 10px;}
.timebox{display: inline-block;position: relative;top: 5px;}
.jyh-timenumberlist{position: absolute;}
.jyh-timenumberlist li{height: 24px;width: 24px;line-height: 24px;text-align: center;}
4、贴出javascript
<pre name="code" class="javascript"><script type="text/javascript">
$(function() {
var nowtimer = new Date("2014-10-27 11:04:50"),
endtimer = new Date("2014-10-27 12:05:00");
var times = endtimer - nowtimer //计算剩余的毫秒数
if (times > 0) {
var hh = parseInt(times / 1000 / 60 / 60 % 24, 10); //计算剩余的小时数
var mm = parseInt(times / 1000 / 60 % 60, 10); //计算剩余的分钟数
var ss = parseInt(times / 1000 % 60, 10); //计算剩余的秒数
var timeArray = new Array();
timeArray[0] = getNumber(hh)[0];
timeArray[1] = getNumber(hh)[1];
timeArray[2] = getNumber(mm)[0];
timeArray[3] = getNumber(mm)[1];
timeArray[4] = getNumber(ss)[0];
timeArray[5] = getNumber(ss)[1];
initializeNumber(timeArray);
var timetmp, isstart;
var timer = setInterval(function() {
if (parseInt(timeArray.join("")) != 0) {
timeArray[5] = timeArray[5] - 1;
isstart = true;
for (var i = 5; 0 < i; i--) {
if (isstart) {
if ((timeArray[i]) == -1) {
if (i % 2 == 0) {
timeArray[i] = 5;
} else {
timeArray[i] = 9;
}
timeArray[i - 1] = timeArray[i - 1] - 1;
isstart = true;
} else {
isstart = false;
}
changeNumber(i, timeArray[i]);
}
}
} else {
clearInterval(timer);
}
}, 1000);
}
})
function getNumber(hh) {
var arrays = new Array();
if (hh > 9) {
arrays[0] = parseInt(hh.toString().substr(0, 1));
arrays[1] = parseInt(hh.toString().substr(1, 1));
} else {
arrays[0] = 0;
arrays[1] = parseInt(hh);
}
return arrays;
}
function initializeNumber(timeArray) {
if (timeArray) {
var numbers;
$(".jyhendtime").each(function(index, data) {
$(this).find('.jyh-timenumberlist[isshow=true]').find("li").eq(0).html(timeArray[index]);
})
}
}
function changeNumber(index, numbers) {
var $showtop;
$showtop = $(".jyhendtime").eq(index).find('.jyh-timenumberlist[isshow=true]').css("top");
if ($showtop == "0px") {
$showtop = $(".jyhendtime").eq(index).find('.jyh-timenumberlist[isshow=true] li:eq(1)').html(numbers);
$(".jyhendtime").eq(index).find('.jyh-timenumberlist[isshow=true]').animate({
"top": "-24px"
}, 500);
$(".jyhendtime").eq(index).find('.jyh-timenumberlist[isshow=false]').css("top", "24px");
} else {
$showtop = $(".jyhendtime").eq(index).find('.jyh-timenumberlist[isshow=false] li:eq(0)').html(numbers);
$(".jyhendtime").eq(index).find('.jyh-timenumberlist[isshow=true]').animate({
"top": "-48px"
}, 500, function() {
$(this).css("top", "24px");
});
$(".jyhendtime").eq(index).find('.jyh-timenumberlist[isshow=false]').show().animate({
"top": "0px"
}, 500, function() {
$(".jyhendtime").eq(index).find('.jyh-timenumberlist[isshow=true]').attr("isshow", "false");
$(this).attr("isshow", "true");
});
}
}
</script>