倒计时显示 秒杀

7 篇文章 0 订阅
3 篇文章 0 订阅

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

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

好少说废话,上代码:

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'); <span style="font-family: Arial, Helvetica, sans-serif;">//背景置灰 </span>
		$("#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

 <div id="gold_div">
    <a href="javascript:void(0);"  οnclick="secKill();" >
         <input type="button"  value="提交秒杀" id="gold_btn"/>
    </a>
 </div>
 <dl class="cf">
    <dt><span></span>剩余时间:</dt>
       <dd id="colockbox1"></dd>
 </dl>


  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值