倒計時顯示 秒殺

標籤：倒計時   秒殺   

         近日在做秒殺活動，涉及到頁面倒計時顯示功能，這裡記錄一下可以為大家提供一個參考，本樣本，基本流程是在登入首頁時在後台將剩餘秒數和活動時限秒數傳至前台頁面，功能實現為倒計時在活動時限內顯示並且秒殺按鈕可以點擊，超過秒殺時限則秒殺按鈕失效。

      如果大家有更好的方法可以靠訴我，或者給我連結，我們共同成長。

好少說廢話，上代碼：

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);"  onclick="secKill();" >         <input type="button"  value="提交秒殺" id="gold_btn"/>    </a> </div> <dl class="cf">    <dt><span></span>剩餘時間：</dt>       <dd id="colockbox1"></dd> </dl>

倒計時顯示 秒殺