JS实现计时器（prototype）+表格排序

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">有关prototype的解释，请看</span><a target=_blank target="_blank" href="http://www.uw3c.com/jsviews/js12.html" style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">http://www.uw3c.com/jsviews/js12.html</a>

最近做playmenu餐饮平台项目，厨师端需要计时器来显示菜品从点单到现在已用时间，并且进行降序排序。

因为项目需要，才接触了js。查了下资料，自己用js中function的prototype属性，面向对象实现了一个计时器。

//计时器
function TimeCount() {
	
};

TimeCount.prototype={
	init: function(date, curDate) {
		var _this = this;
		/* _this._hour = date.getHours();
		_this._minute = date.getMinutes();
		_this._sec = date.getSeconds();
		_this._curHour = curDate.getHours();
		_this._curMin = curDate.getMinutes();
		_this._curSec = curDate.getSeconds(); */
		_this._showHour = 00;
		_this._showMin = 00;
		_this._showSec = 00;
		_this._totalSec = (curDate.getTime() - date.getTime())/1000;
		//_this._totalSec=(_this._curHour-this._hour)*3600+(_this._curMin-this._minute)*60+(_this._curSec-this._sec);			
	},

	//订单更新时间，当前时间，匿名回调函数——时间 毫秒
	begin: function(date, curDate, callback) {
		var _this = this;
		_this.init(date, curDate);
		_this.timeInterval = setInterval(function() {
			_this._totalSec++;
			if (_this._totalSec > 24*3600) {//大于24小时，不再计时
				_this._showHour = "--";
				_this._showMin = "--";
				_this._showSec = "--";
				window.clearInterval(_this.timeInterval);
			} else {
				_this._showHour = parseInt(_this._totalSec/3600);
				_this._showMin = parseInt((_this._totalSec%3600)/60);
				_this._showSec = parseInt((_this._totalSec%3600)%60);				
			}
			if (callback) {	
				callback();
			}
		}, 1000);
	},
	
	stop: function() {
		window.clearInterval(this.timeInterval);//停止计时
	},
	
	//已用时间，毫秒
	elapsedTime: function() {
		return this._totalSec;
	},
	//已用小时数
	hour: function() {
		var i  = this._showHour;
		return i<0?"00":(i < 10 ? "0" + i : i);
	},
	
	minute: function() {
		var i = this._showMin;
		return i<0?"00":(i < 10 ? "0" + i : i);
	},
	
	second: function() {
		var i = this._showSec;
		return i<0?"00":(i < 10 ? "0" + i : i);
	}
}

对于循环计时中所用的setInterval()函数，可以用以下代替

function timeCount(
      var c = setTimeout("timeCount()",1000);
);

//表格排序，(表格jquery对象，排序列，时间所在data属性)
function tableSort(table, tCol, dataId) {
	var tbody = table.find("tbody").eq(0);
	var trArray = tbody.find("tr");
	//排序
	trArray.sort(function(tr1, tr2) {
		var v1 = $(tr1).find("td").eq(tCol).data(dataId);
		var v2 = $(tr2).find("td").eq(tCol).data(dataId);
		return v1-v2;
	});
	//更新html内容
	tbody.html("");
	for (var i = 0; i < trArray.length; i++) {
		tbody.append(trArray[i]);
	}
}

$(function() {
		
		init();
		
		/*初始化  */
		function init() {
			var curDate = new Date();
			$('.time-td').each(function() {
				var element = $(this);
				var dishTd = element.siblings(".dish-td"); 
				var _date = new Date(element.data("time"));
				var timeCount = new TimeCount();
				timeCount.begin(_date, curDate, function() {
					element.find(".hour-cell").eq(0).html(timeCount.hour());	
					element.find(".minute-cell").eq(0).html(timeCount.minute());	
					element.find(".sec-cell").eq(0).html(timeCount.second());
				});
			});
			tableSort($('#main-table'), 0, 'time');
		}
	});

<table class="main-table" id="main-table">
		<thead>
			<tr>
				<th>桌号</th>
				<th>菜名</th>
				<th>等待时间</th>
				<th>备注</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			
			<tr>
				<td>1</td>
				<td>肉丁削面<span>*</span>1</td>
				<td class="time-td" data-time="1422520048074">
					<span class="hour-cell"></span>:<span class="minute-cell"></span>:<span class="sec-cell"></span>
				</td>
				<td>少辣</td>
				<td><a class="smallBtn completeBtn" href="#" data-id="5" data-status="4">完成</a></td>
			</tr>
			
			<tr>
				<td>1</td>
				<td>瓦罐酥鱼头<span>*</span>1</td>
				<td class="time-td" data-time="1422520048074">
					<span class="hour-cell"></span>:<span class="minute-cell"></span>:<span class="sec-cell"></span>
				</td>
				<td>少辣</td>
				<td><a class="smallBtn completeBtn" href="#" data-id="2" data-status="3">完成</a></td>
			</tr>
			
			<tr>
				<td>1</td>
				<td>凉拌海带丝<span>*</span>1</td>
				<td class="time-td" data-time="1422520048074">
					<span class="hour-cell"></span>:<span class="minute-cell"></span>:<span class="sec-cell"></span>
				</td>
				<td>少辣</td>
				<td><a class="smallBtn completeBtn" href="#" data-id="3" data-status="3">完成</a></td>
			</tr>
			
			<tr>
				<td>1</td>
				<td>红烧猪脚<span>*</span>1</td>
				<td class="time-td" data-time="1422520048074">
					<span class="hour-cell"></span>:<span class="minute-cell"></span>:<span class="sec-cell"></span>
				</td>
				<td>少辣</td>
				<td><a class="smallBtn completeBtn" href="#" data-id="4" data-status="3">完成</a></td>
			</tr>
			
			<tr>
				<td>1</td>
				<td>家常豆腐<span>*</span>1</td>
				<td class="time-td" data-time="1422520048074">
					<span class="hour-cell"></span>:<span class="minute-cell"></span>:<span class="sec-cell"></span>
				</td>
				<td>少辣</td>
				<td><a class="smallBtn completeBtn" href="#" data-id="1" data-status="3">完成</a></td>
			</tr>
			
		</tbody>
	</table>

这个项目做了快一个月了，管理端和厨师端都是自己写的，后台用的spring mvc+jdbc，前台就是用jsp+jstl+sitemesh。

继续加油。

希望大家多多指教