javascript时钟倒计时（非原创）

于 2012-11-27 17:20:43 发布
阅读量90 收藏
点赞数
分类专栏： java学习笔记 jsuc 文章标签： javascript json xhtml ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jcair/article/details/84361477
版权 
/**
 * 模拟时钟
 * @author lulu
 * @version 2012-6-17
 */

/**
 * 取两个日期的时间间隔
 * @param {Date} time1 日期对象
 * @param {Date} time2 日期对象
 * @return {int[3]} tim1和time2的时间间隔(按顺序分别表示时分秒)
 */
function distanceOfTwoDate(time1, time2){
	var distanceHour = 0;
	var distanceMinute = 0;
	var distanceSecond = 0;
	var distance = time1 - time2;
	if (distance > 0) {
		distanceHour = Math.floor(distance / 1000 / 60 / 60);
		distanceMinute = Math.floor(distance / 1000 / 60 % 60);
		distanceSecond = Math.floor(distance / 1000 % 60);
	}
	var distance = new Array(3);
	distance[0] = distanceHour;
	distance[1] = distanceMinute;
	distance[2] = distanceSecond;
	return distance;
}

/**
 * 模拟时钟倒计时
 * @param {int[3]} time 按顺序分别表示时分秒
 * @param {function} callback 回调函数
 */
function timeWalk(time, callback){
	time[2]--;
	var timeStr = changeTimeStr(time);
	if (typeof(callback) == 'function') {
		callback.call(this, timeStr);
	}
	if (timeStr == '000000') {
		return;
	}
	window.setTimeout(function(){
			timeWalk(time, callback);
		}, 1000
	);
}

/**
 * 处理参数time，数组元素小于0时向前高位借位，最高位小于0时数组置0，并返回time经过处理后的字符串形势
 * @param {int[3]} time 按顺序分别表示时分秒
 * @return {String} time的字符串形势('095903'，前两位表示时，中两位表示分，后两位表示秒)
 */
function changeTimeStr(time){
	if (time[2] < 0) {
		time[1]--;
		time[2] += 60;
	}
	if (time[1] < 0) {
		time[0]--;
		time[1] += 60;
	}
	if (time[0] < 0) {
		time[0] = 0;
		time[1] = 0;
		time[2] = 0;
		return '000000';
	}
	var hour = time[0];
	var minute = time[1];
	var second = time[2];
	hour = (hour < 10 ? '0' : '') + hour;
	minute = (minute < 10 ? '0' : '') + minute;
	second = (second < 10 ? '0' : '') + second;
	return hour + minute + second;
}

/**
 * 将日期字符串转换成日期对象
 * @param {String} time 日期字符串(yyyy-MM-dd HH:mm:ss 中间连接字符[-和:]任意)
 * @return {Date} 由time生成的日期对象
 */
function parseDate(time) {
	var year = 1 * time.substring(0, 4);
	var month = 1 * time.substring(5, 7) - 1;
	var day = 1 * time.substring(8, 10);
	var hour = 1 * time.substring(11, 13);
	var minute = 1 * time.substring(14, 16);
	var second = 1 * time.substring(17, 19);
	var date = new Date(year, month, day, hour, minute, second);
	return date;
}

 xy_ms_tg_index.js

var now = '';
window.addEvent('domready', function(){
	queryInfo();
});

function queryInfo(){
	var url = '/shop/school/SchoolAct.do?operFlag=query&act_type=ms_tg&sale_type=2';
	RequestJSON(url, 'post', '', true, function(json, text) {
		if($chk(json.error_desc)){
			alert(json.error_desc);
			return;
		}
		if ($chk(json.goodslist) && json.goodslist.length == 0) {
			$('miaosha').style.display = 'none';
			return;
		}
		now = json.now;
		var ms_index = 0;
		var tg_index = 0;
		json.goodslist.each(function(data, index){
			var template = $('def.template.div').clone(true, true);
			template.inject($('def.template.div'), 'before');
			template.set('goods_id', data.id);
			template.set('act_type', data.act_type);
			var czkPic = data.goods_type == '9' ? ('/shop/school/imgs/czk/chongzhika_' + data.price + '.jpg') : '';
			template.getElement('img[id=def.img.goods_pic]').set('src', data.goods_type == '9' ? czkPic : data.pic_path);
			template.getElement('span[id=def.span.price]').set('html', data.price);
			template.getElement('td[id=def.td.act_price]').set('html', data.act_price);
			var distanceBegin = distanceOfTwoDate(parseDate(data.start_time), parseDate(now));
			alert("30:"+distanceBegin);
			var isBegin = (changeTimeStr(distanceBegin) == '000000');
			var distanceEnd = distanceOfTwoDate(parseDate(data.end_time), parseDate(now));
			var isEnd = (changeTimeStr(distanceEnd) == '000000');

			if (isBegin && !isEnd) {
				setGoodsStatus(template, true);
			} else {
				setGoodsStatus(template, false);
				if (isBegin && isEnd) {
					template.getElement('td[id=def.td.time_label]').set('html', '距离结束时间');
				}
			}
			timeWalk(distanceBegin, function(distanceStr){
				distanceStr = distanceStr.length > 7 ? '9995959' : distanceStr;
				if(distanceStr.length == 7){
					template.getElement('td[id=def.td.time_cal]').set('class','time02');
					for (var i = 0; i < 7; i++) {
						var element = template.getElement('span[id=def.span.time' + i + ']');
						if(i==0){
							element.style.display = '';
						}
						element.set('html', distanceStr.charAt(i));
					}
				}
				else if(distanceStr.length == 6){
					var element = template.getElement('span[id=def.span.time0]');
					element.set('html', '0');
					for (var i = 0; i < 6; i++) {
						var element = template.getElement('span[id=def.span.time' + (i+1) + ']');
						element.set('html', distanceStr.charAt(i));
					}
				}
				
				if (!isBegin && distanceStr == '000000') {
					isBegin = true;
					setGoodsStatus(template, true);
				}
				if (isBegin && !isEnd) {
					displayDistanceEnd(template, data.end_time);
				}
			});
			if(data.act_type=='1'){
				//秒杀
				ms_index = ms_index +1;
				template.id = 'msMk0'+ms_index;
			}
			else {
				//团购
				tg_index = tg_index+1;
				template.getElement('td[id=def.td.price]').set('height', '21');
				template.id = 'tgMk0'+tg_index;
			}
			template.style.display = '';
			
		});
	});	
}

function displayDistanceEnd (template, endTime) {
	var url = '/shop/school/SchoolAct.do?operFlag=queryCurrentDate&sale_type=2';
	RequestJSON(url, 'post', '', false, function(json, text){
		if($chk(json.error_desc)){
			alert(json.error_desc);
			return;
		}
		now = json.now;
		var distanceEnd = distanceOfTwoDate(parseDate(endTime), parseDate(now));
		
		timeWalk(distanceEnd, function(distanceStr){
			distanceStr = distanceStr.length > 7 ? '9995959' : distanceStr;
			if(distanceStr.length == 7){
				template.getElement('td[id=def.td.time_cal]').set('class','time02');
				for (var i = 0; i < 7; i++) {
					var element = template.getElement('span[id=def.span.time' + i + ']');
					if(i==0){
						element.style.display = '';
					}
					element.set('html', distanceStr.charAt(i));
				}
			}
			else if(distanceStr.length == 6){
				var element = template.getElement('span[id=def.span.time0]');
				element.set('html', '0');
				for (var i = 0; i < 6; i++) {
					var element = template.getElement('span[id=def.span.time' + (i+1) + ']');
					element.set('html', distanceStr.charAt(i));
				}
			}
			if (distanceStr == '000000') {
				setGoodsStatus(template, false);
			}
		});
	});
}

function setGoodsStatus(template, canBuy){
	var actType = template.get('act_type');
	var goodsId = template.get('goods_id');
	var goodsType = actType == '1' ? 'ms' : 'tg';
	var toBuyUrl = '/shop/sales/goods_detail.shtml?goods_id=' + goodsId + '&goods_type=' + goodsType;
	var picPath = template.getElement('img[id=def.img.goods_pic]').get('src');
	
	var picTd = template.getElement('td[id=def.td.goods_pic]');
	picTd.empty();
	var picHtml = canBuy ? 
					'<a target="_blank" href="' + toBuyUrl + '"><img id="def.img.goods_pic" src="' + picPath +'" border="0" width="155" height="166"/></a>' 
					: '<img id="def.img.goods_pic" src="' + picPath +'" border="0" width="155" height="166"/>';
	picTd.set('html', picHtml);
					
	var buyTd = template.getElement('td[id=def.td.buy]');
	buyTd.empty();
	var btnHtml = canBuy ? 
					'<a target="_blank" id="def.a.buy" href=""><img id="def.img.btn" src="" border="0"/></a>' 
					: '<img id="def.img.btn" src="" border="0"/>';
	buyTd.set('html', btnHtml);
	if (actType == '1') {
		var btnImg = '/shop/school/imgs/n_sy/' + (canBuy ? 'msBtn.jpg' : 'msBtn01.jpg');
		template.getElement('img[id=def.img.btn]').set('src', btnImg);
		template.getElement('img[id=def.img.act_price]').set('src', '/shop/school/imgs/n_sy/msj.jpg');
	} else if (actType == '2') {
		var btnImg = '/shop/school/imgs/n_sy/' + (canBuy ? 'buy.jpg' : 'buy01.jpg');
		template.getElement('img[id=def.img.btn]').set('src', btnImg);
		template.getElement('img[id=def.img.act_price]').set('src', '/shop/school/imgs/n_sy/qg.jpg');
	}
	if (canBuy) {
		template.getElement('a[id=def.a.buy]').set('href', toBuyUrl);
		template.getElement('td[id=def.td.time_label]').set('html', '距离结束时间');
	}
}

 

 xy_ms_tg_index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title></title>
<script type="text/javascript" src='/shop/js/pub/shop.js'></script>
<script type="text/javascript" src='/shop/school/js/school.js'></script>
<script type="text/javascript" src='/shop/school/js/xy_ms_tg_index.js' charset="GBK"></script>
<style>
#miaosha{
	position:relative; 
	width:960px; 
	height:364px;  
	
	background-image:url(/shop/school/imgs/n_sy/msBg.jpg); 
	background-repeat:no-repeat;}
.wz01{
	color:#000;}
#miaosha .time{
	color:#000;
	width:35px;
	height:32px;
	background-image:url(/shop/school/imgs/n_sy/djsBg.jpg);
	background-repeat:no-repeat; 
	font-size:14px;
	font-weight:bold;}
#miaosha .time02{
	color:#000;
	width:35px;
	height:32px;
	background-image:url(/shop/school/imgs/n_sy/djsBg02.jpg);
	background-repeat:no-repeat; 
	font-size:14px;
	font-weight:bold;}
.msMk{
	width:215px;
	position: relative;
	float:left;
	margin-left:10px;
	margin-top:80px;
	color:#ED6C00;
	}

#msMk01{ position:absolute;left:40px;}
#msMk02{ position:absolute;left:260px;}
#tgMk01{ position:absolute;left:495px;}
#tgMk02{ position:absolute;left:710px;}	
</style>
</head>

<body>

<div  id="miaosha" >
  <div id="def.template.div" class="msMk" style="display: none;"> 
  <table width="215" border="0" style=" font-size:12px;">
 
  <tr>
    <td colspan="3" id="def.td.goods_pic" align="center"><a href="#"><img id="def.img.goods_pic" src="" border="0" width="155" height="166"/></a></td>
  </tr>
  <tr>
    <td id="def.td.price" height="17" align="right" class="wz01" >原价：<span id="def.span.price" style="text-decoration: line-through;">5880</span></td>
    <td id="def.td.act_price" width="66" rowspan="2" align="center" style="font-size:26px; font-weight: bold; "  class="wz02">4999</td>
    <td id="def.td.buy" width="42" rowspan="2" align="right"><a id="def.a.buy" href="#"><img id="def.img.btn" src="" border="0"/></a></td>
  </tr>
  <tr>
    <td width="83" height="17" align="right"><img id="def.img.act_price" src=""/></td>
    </tr>
</table>
<table width="215" border="0" style=" font-size:11px; color:#ED6C00">
  <tr>
    <td  width="65" id="def.td.time_label" align="right" class="wz02" >距离开始时间</td>
    <td width="35" class="time"  id="def.td.time_cal"><span id="def.span.time0" style="margin-left:5px;display:none">0</span><span id="def.span.time1" style="margin-left:6px; ">0</span><span id="def.span.time2" style="margin-left:6px;">0</span></td>
    <td width="8">时</td>
  <td class="time"  ><span id="def.span.time3" style="margin-left:6px;">0</span><span id="def.span.time4" style="margin-left:7px; ">0</span></td>
    <td width="8">分</td>
  <td class="time" ><span id="def.span.time5" style="margin-left:6px;">0</span><span id="def.span.time6" style="margin-left:7px; ">0</span></td>
    <td width="8">秒</td>
  </tr>
</table>
</div>
	
</div>

</body>
</html>

 

jcair
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值