广州凡科互联网科技有限公司

营业时间
MON-SAT 9:00-18:00

全国服务热线
18720358503

公司门店地址
广州市海珠区工业大道北67号凤凰创意园

根据jQuery倒数计时软件完成团购价限时秒杀实际

日期:2021-03-22 浏览:

倒数计时在WEB上运用十分普遍,如考試系统软件倒数计时,团购价网站内的特惠主题活动倒数计时这些。今日,大家来应用jQuery倒数计时非常完成团购价限时秒杀实际效果,很感兴趣的朋友一起学习培训吧

倒数计时通常为用于表明将来某一時刻距如今時刻还剩是多少時间。倒数计时在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 i++) {
//计数减一
timers[i].tms -= 1000;
//(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);
//(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" "TR/xhtml1/DTD/xhtml1-transitional.dtd" 
 html xmlns="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 
 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倒数计时软件完成团购价限时秒杀实际效果,期待对大伙儿有一定的协助!



新闻资讯

联系方式丨CONTACT

  • 全国热线:18720358503
  • 传真热线:18720358503
  • Q Q咨询:2639601583
  • 企业邮箱:2639601583@qq.com

首页
电话
短信
联系