超简单的限时抢购插件
2014-02-07 12:39 阅读(175)

效果:


插件代码:

$(function(){
		   
   function jisuanTime_daojishi(){
     $(".daojishi").each(function(){
		var endtime = $(this).attr("daojishi_time");
		endtime=new Date(endtime);
        var nowtime = new Date();
        var leftsecond = parseInt((endtime.getTime()-nowtime.getTime())/1000);
		if(leftsecond<=0){
			$(this).html("抢购已结束");
        }else{
		    var date = parseInt(leftsecond/3600/24);
            var hour = parseInt((leftsecond/3600)%24);
            var miniute = parseInt((leftsecond/60)%60);
            var second = parseInt(leftsecond%60);
			$(this).html("剩余:"+date + "天" + hour + "小时" + miniute +"分" + second +"秒");
		}
	 });
   }
   var sh = setInterval(jisuanTime_daojishi,1000);
    
})

使用:
<!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=gb2312" />
<title>抢购倒计时</title>
<script type='text/javascript' src='jquery-1.8.1.js'></script>
<script type='text/javascript' src='daojishi.js'></script>
<style type="text/css">
td{width:250px;height:100px;}
</style>
</head>

<body>
<div>
   <table>
       <tr>
	       <td><span class="daojishi" daojishi_time="2014/02/30,16:37:03">正在加载...</span></td>
		   <td><span class="daojishi" daojishi_time="2014/02/07,12:32:30">正在加载...</span></td>
		   <td><span class="daojishi" daojishi_time="2014/01/30,16:37:03">正在加载...</span></td>
	   </tr>
	   <tr>
	       <td><span class="daojishi" daojishi_time="2014/01/30,16:37:03">正在加载...</span></td>
		   <td><span class="daojishi" daojishi_time="2014/01/30,16:37:03">正在加载...</span></td>
		   <td><span class="daojishi" daojishi_time="2014/01/30,16:37:03">正在加载...</span></td>
	   </tr>
   </table>
</div>
</body>
</html>