倒计时显示 秒杀

         近日在做秒杀活动，涉及到页面倒计时显示功能，这里记录一下可以为大家提供一个参考，本示例，基本流程是在登录主页时在后台将剩余秒数和活动时限秒数传至前台页面，功能实现为倒计时在活动时限内显示并且秒杀按钮可以点击，超过秒杀时限则秒杀按钮失效。

      如果大家有更好的方法可以靠诉我，或者给我链接，我们共同成长。

好少说废话，上代码：

javascript：

$(function(){
	//活动倒计时
	countDown("#colockbox1");
});

//倒计时显示
function countDown(id){
	var sys_scope = ${sysTimeScope};//活动时限-秒
	var sys_second = ${sysSecond};//剩余时间-秒
	var activityIsStart = ${activityIsStart};
	if(!activityIsStart|| sys_second<=0){
		$("#gold_div").addClass('gray'); //背景置灰 
		$("#gold_btn").attr("disabled",true); //按钮失效
		$("#gold_ipu").attr("disabled",true);//输入框失效
	}
	var timer = setInterval(function(){
		if (sys_second > sys_scope) {
			$(id).text("活动尚未开始");
			sys_second -= 1;
		} else if(sys_second <= (sys_scope) && sys_second >=1 ){
			$("#gold_div").removeClass('gray'); //背景置灰
			$("#gold_btn").removeAttr("disabled");//按钮失效
			$("#gold_ipu").removeAttr("disabled");//输入框失效
			sys_second -= 1;
			var hour = Math.floor((sys_second / 3600) % 24);
			var minute = Math.floor((sys_second / 60) % 60);
			var second = Math.floor(sys_second % 60);
			var alertText = "";
			if(hour>0){
				alertText+=hour+"小时";
			}
			if(minute>0){
				alertText+=minute+"分";
			}
			alertText+=second+"秒";
			$(id).text(alertText);
		}else{
			$("#gold_ipu").attr("disabled",true).val("");//清空输入框
			$("#gold_div").addClass('gray'); //背景置灰 
			$("#gold_btn").attr("disabled",true); //按钮失效
			$(id).text("活动已结束");//提示
			clearInterval(timer);
		}
	}, 1000);
}

jsp

 

    
         
    
 
 

    
剩余时间：