新浦京娱乐场官网-301net-新浦京娱乐www.301net
做最好的网站

    这样的倒计时在购物网站中会经常使用

倒计时一般是用来表示今后某有时时距以往随时随地还剩多少时间。倒计时在WEB上应用特别广阔,如考试系统倒计时,团购网址中的减价活动倒计时等等。今日,大家来行使jQuery倒计时一级实现团购秒杀效果,感兴趣的相恋的人合伙念书呢!

1.1 协理文档关键字

    倒计时 秒杀 timer

1.2. 用到境况

    这样的倒计时在购物网址中会平常使用到,举个例子秒杀,限期抢购,确认收货倒计时。

    那个效果并简单落到实处,正是使用js的定时实行,搜了刹那间网络的代码,有滋有味,都以三个措施,未有实现封装,方便使用,所以写了一个插件,方便项目中应用。

1.4. 施用验证

    初叶选拔

    1、 引入oao.timer.js

    2、 要显示倒计时岁月的div

 <div id="timer1" end-date="2016-1-1"></div>
      <div id="timer2" end-date="2015/10/1 12:5:2"></div>Code:

    3、 起首化倒计时

   $(function(){//文档加载完初始化倒计时
         $("#timer1").oaoTime();
         $("#timer2").oaoTime();
      })

诸如此比就能够运用了,很简短,那样有助于项目支出中联合接纳,统一修改。

1.5. 上代码

//倒计时的插件
$.fn.extend({
oaoTime:function(){
this.each(function() { 
      var dateStr = $(this).attr("end-date");
      var endDate = new Date(dateStr.replace(/-/g,"/"));//取得指定时间的总毫秒数 
      //now是在动态页面中取得服务器的时间,如果没有定义使用客户端时间
      if(now==undefined){
        now = new Date().getTime();
      }
      var tms = endDate - now;//得到时间差
      if(tms<0){alert("时间过期了");return;}
$.oaoTime.timers.push({tms:tms,content:$(this)});
$.oaoTime.start();
});
}
});
//倒计时的插件
$.oaoTime={
//倒计时容器,所有需要倒计时的时间都需要注册到这个容器中,容器中放的是一个object,object描述了倒计时的结束时间,以及显示时间的jquery对象(例如div)
timers:[],
//全局的一个倒计时状态,init表示初始化状态,start表示运行中状态,stop表示停止状态
status:'init',
//计算时间并定时刷新时间的方法,本插件的核心代码
takeCount:function(){
//如果定时器没有启动不执行
if(this.status != 'start')return;
setTimeout("$.oaoTime.takeCount()", 1000 );
var timers = this.timers;
for (var i = 0, j = timers.length; i < j; i  ) {
//计数减一
timers[i].tms -= 1000;
//console.info(timers[i].tms);
//计算时分秒
var days = Math.floor(timers[i].tms / (1000 * 60 * 60 * 24));
var hours = Math.floor(timers[i].tms / (1000 * 60 * 60)) % 24;
var minutes = Math.floor(timers[i].tms / (1000 * 60)) % 60;
var seconds = Math.floor(timers[i].tms / 1000) % 60;
if (days < 0)days = 0;
if (hours < 0)hours = 0;
if (minutes < 0)minutes = 0;
if (seconds < 0) seconds = 0;
var newTimeText = days "天" hours "小时" minutes "分" seconds "秒";
timers[i].content.text(newTimeText);
//console.info(newTimeText);
}
},
//启动倒计时
start:function(){
if(this.status=='init'){
this.status = 'start';
this.takeCount();
}
},
//停止倒计时
stop:function(){
this.status = 'stop';
}
}; 
<!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="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/oao.timer.js"></script>
</head>
<body>
<ul>
<div id="stop">停止</div>
<div id="timer1" end-date="2016-1-1"></div>
<div id="timer2" end-date="2015/10/1 12:5:2"></div>
</ul>
</body>
</html>
<script>
$(function(){
$("#stop").click(function() {
$.oaoTime.stop();
});
$("#timer1").oaoTime();
$("#timer2").oaoTime();
})
</script>

以上内容是小编给大家介绍的依赖jQuery倒计时插件完结团购秒杀效果,希望对大家有着协助!

您恐怕感兴趣的稿子:

  • php结合redis完毕高并发下的抢购、秒杀成效的实例
  • Docker Nodejs 卡夫卡 Redis MySQL搭建简易秒杀情形
  • Javascript兑现商品秒杀倒计时(时间与服务器时间一同)
  • java完结京东秒杀功效分享京东秒杀软件
  • PHP 类商品秒杀计时落到实处代码
  • 限制时间抢购秒杀系统架构分析与实战
  • jquery 倒计时作用落到实处秒杀思路
  • Android开采必备:秒杀真机超快模拟器Genymotion介绍
  • PHP JS达成的商品秒杀倒计时用法示例
  • Redis瞬时高并发秒杀方案总计

本文由新浦京娱乐场官网-301net-新浦京娱乐www.301net发布于www.301net,转载请注明出处:    这样的倒计时在购物网站中会经常使用

您可能还会对下面的文章感兴趣: