js自定义倒计时

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>