需要的jquery.timer.js已经在/js/中提供了,只要稍作修改就可以实现了,KingCMS地方门户 V2.2的 投票和抢楼的倒计时功能效果如下图:
- JS方面
1、在HTML的head中引入jquery.timer.js,如下所示
<script type="text/javascript" charset="UTF-8" src="<?=DIR?>js/jquery.timer.js"></script>2、增加一个包装函数,可以放在head.或</body>前面。以下是读秒的封装
<script type="text/javascript"> function maketimer(ele){ return $.timer(function(){ var currentEle=$('#'+ele); var et=parseInt(currentEle.html()); if(et==0){this.stop();}else{et-=1;} if(et==0){ var tol=currentEle.attr('rel'); if(parseInt(tol)>60){ currentEle.attr('rel',tol-60); et=60; }else if(parseInt(tol)>0){ currentEle.attr('rel','0') et=tol; }else{ this.stop(); $('#'+ele+'_action').removeClass('on').addClass('finish').html(''); } } currentEle.html(et); },1000,true); } </script>
- 如果要读小时,或分钟要改几个地方。
以下是秒数显示在dt中,在这块区域:
<div class="lcbox"><dl><dt></dt></dl>详细代码
<?php if($pl['m']>0):?><script type="text/javascript">maketimer("poll_<?=$pl['vid']?>");</script> <?php endif;?>说明:$pl['m']中存放是当前时间到结束时间所剩的秒数.该示例以60秒一个区段.也就是说<dt>中显示的数字在1-60之间.如果到0重新从60开始.一秒过后-1
- 注册timer
<?php if($pl['m']>0):?><script type="text/javascript">maketimer("poll_<?=$pl['vid']?>");</script> <?php endif;?>完整示例,只标示了修改的部分,不变的省略掉了
<div class="body-box"> <?php foreach($polls as $pl):?> <div class="cbox"> <div class="lcbox"> <dl><dt id="poll_<?=$pl['vid']?>" rel="<?=($pl['m']>60)?($pl['m']-60):0?>"><?=($pl['m']>60)?60:$pl['m']?></dt> <dd id="poll_<?=$pl['vid']?>_action" class="<?=($pl['m']>0)?'on':'finish'?>">...</dd> </dl> </div> <div class="rcbox">...</div> </div> <?php if($pl['m']>0):?><script type="text/javascript">maketimer("poll_<?=$pl['vid']?>");</script> <?php endif;?> <?php endforeach;?> </div>
文章出自kcest.com