倒计时组件达成代码,详细步骤教您构建微信小程序倒计时组件

微信小程序 倒计时组件达成代码,小程序倒计时

功用: 适用于电商利用的有效期团购、商品秒杀等

先来看下最终效果:

澳门葡京 1

git源:

分步骤-特性急的意中人,能够一直看最后这段代码。

wxml文件放个text

<text>second: {{second}} micro
second:{{micro_second}}</text>

在js文件中调用

function countdown(that) {
 var second = that.data.second
 if (second == 0) {
  // console.log("Time Out...");
  that.setData({
   second: "Time Out..."
  });
  return ;
 }
 var time = setTimeout(function(){
  that.setData({
   second: second - 1
  });
  countdown(that);
 }
 ,1000)
}

Page({
  data: {
    second: 3
  },
  onLoad: function() {
    countdown(this);
  }
});

运转验证下,从10走到1s,然后呈现时间到。

于是乎接二连三将皮秒完善,注意纳秒的增加率受限于系统的流年频率,于是我们可靠到0.01s即10ms

js

/* 秒级倒计时 */
function countdown(that) {
 var second = that.data.second
 if (second == 0) {
  that.setData({
   second: "Time out!",
   micro_second: "micro_second too."
  });
  clearTimeout(micro_timer);
  return ;
 }
 var timer = setTimeout(function(){
  that.setData({
   second: second - 1
  });
  countdown(that);
 }
 ,1000)
}

/* 毫秒级倒计时 */
// 初始毫秒数,同时用作归零
var micro_second_init = 100;
// 当前毫秒数
var micro_second_current = micro_second_init;
// 毫秒计时器
var micro_timer;

function countdown4micro(that) {
 if (micro_second_current <= 0) {
  micro_second_current = micro_second_init;
 }
 micro_timer = setTimeout(function(){
  that.setData({
   micro_second: micro_second_current - 1
  });
  micro_second_current--;
  countdown4micro(that);
 }
 ,10)
}

Page({
  data: {
    second: 2,
    micro_second: micro_second_init
  },
  onLoad: function() {
    countdown(this);
    countdown4micro(this);
  }
});

wxml文件

<text style="display: block;">second: {{second}}s</text>

<text>{{micro_second}}</text>

如此那般,当秒级运转完结时,纳秒级timer即clearTimeout,并将字本显示为’micro_second
too’

再加多二个countdown4micro方法,使得呈现剩余 0:3:19 89如此情势的尾数

function dateformat(second) {
  var dateStr = "";
  var hr = Math.floor(second / 3600);
  var min = Math.floor((second - hr * 3600) / 60);
  var sec = (second - hr * 3600 - min * 60);// equal to => var sec = second % 60;
  dateStr = hr + ":" + min + ":" + sec;
  return dateStr;
}
目前有2个时钟,影响性能,合并下去掉countdown,于是countdown4micro变成以下的样子:

function countdown4micro(that) {

  var loop_second = Math.floor(loop_index / 100);
  // 得知经历了1s
  if (cost_micro_second != loop_second) {
    // 赋予新值
    cost_micro_second = loop_second;
    // 总秒数减1
    total_second--;

  }
   // 每隔一秒,显示值减1; 渲染倒计时时钟
  that.setData({
   clock:dateformat(total_second - 1)
  });

   if (total_second == 0) {
    that.setData({
     // micro_second: "",
     clock:"时间到"
    });
    clearTimeout(micro_timer);
    return ;
   }  

 if (micro_second_current <= 0) {
  micro_second_current = micro_second_init;
 }
 micro_timer = setTimeout(function(){
  that.setData({
   micro_second: micro_second_current - 1
  });
  micro_second_current--;
  // 放在最后++,不然时钟停止时还有10毫秒剩余
  loop_index ++;
  countdown4micro(that);
 }
 ,10)
}

这样,阿秒与时分秒是独家运维渲染的,再一次改变,程序可读性更加好。dateformat针对于阿秒操作,而不接受秒为数。同有时间还节约了总结玖拾捌次为1s的运算

/** 
 * 需要一个目标日期,初始化时,先得出到当前时间还有剩余多少秒
 * 1.将秒数换成格式化输出为XX天XX小时XX分钟XX秒 XX
 * 2.提供一个时钟,每10ms运行一次,渲染时钟,再总ms数自减10
 * 3.剩余的秒次为零时,return,给出tips提示说,已经截止
 */

// 定义一个总毫秒数,以一分钟为例。TODO,传入一个时间点,转换成总毫秒数
var total_micro_second = 2 * 1000;

/* 毫秒级倒计时 */
function countdown(that) {
   // 渲染倒计时时钟
   that.setData({
     clock:dateformat(total_micro_second)
   });

   if (total_micro_second <= 0) {
     that.setData({
       clock:"已经截止"
     });
     // timeout则跳出递归
     return ;
   }  
   setTimeout(function(){
    // 放在最后--
    total_micro_second -= 10;
    countdown(that);
  }
  ,10)
}

// 时间格式化输出,如3:25:19 86。每10ms都会调用一次
function dateformat(micro_second) {
   // 秒数
   var second = Math.floor(micro_second / 1000);
   // 小时位
   var hr = Math.floor(second / 3600);
   // 分钟位
   var min = Math.floor((second - hr * 3600) / 60);
   // 秒位
  var sec = (second - hr * 3600 - min * 60);// equal to => var sec = second % 60;
  // 毫秒位,保留2位
  var micro_sec = Math.floor((micro_second % 1000) / 10);
  return hr + ":" + min + ":" + sec + " " + micro_sec;
}

Page({
  data: {
    clock: ''
  },
  onLoad: function() {
    countdown(this);
  }
});

通过如上优化,代码量收缩四分之二,运维功效也高了。

多谢阅读,希望能辅助到我们,谢谢大家对本站的接济!

倒计时组件完毕代码,小程序倒计时 成效:
适用于电商应用的限期团购、商品秒杀等 先来看下最终效果:
git源:…

作用: 适用于电商应用的有效期团购、商品秒杀等

先来看下最终效果:

今日给咱们带来微信小程序倒计时组件具体成本步骤:

先来看下最后效果:

澳门葡京 2

先来看下最后效果:

澳门葡京 3

倒计时组件达成代码,详细步骤教您构建微信小程序倒计时组件。git源:http://git.oschina.net/dotton/CountDown
分步骤-特性急的爱人,能够直接看最后这段代码。
wxml文件放个text
<text>second: {{second}} micro
second:{{micro_second}}</text>

澳门葡京 4

git源:

在js文件中调用
function countdown(that) { var second = that.data.second if (second ==
0) { // console.log(“Time Out…”); that.setData({ second: “Time Out…”
}); return ; } var time = setTimeout(function(){ that.setData({ second:
second – 1 }); countdown(that); } ,1000)}Page({ data: { second: 3 },
onLoad: function() { countdown(this); }});

源码:

分步骤-性情急的仇敌,能够一直看最后这段代码。

运营验证下,从10走到1s,然后显示时间到。
于是乎再三再四将阿秒完善,注意纳秒的宽度受限于系统的日子频率,于是我们标准到0.01s即10ms
js
/* 秒级倒计时 /function countdown(that) { var second =
that.data.second if (second == 0) { that.setData({ second: “Time out!”,
micro_second: “micro_second too.” }); clearTimeout(micro_timer);
return ; } var timer = setTimeout(function(){ that.setData({ second:
second – 1 }); countdown(that); } ,1000)}/
皮秒级倒计时 *///
开始纳秒数,相同的时间作为归零var micro_second_init = 100;// 当前纳秒数var
micro_second_current = micro_second_init;// 阿秒电火花计时器var
micro_timer;function countdown4micro(that) { if (micro_second_current
<= 0) { micro_second_current = micro_second_init; } micro_timer
= setTimeout(function(){ that.setData({ micro_second:
micro_second_current – 1 }); micro_second_current–;
countdown4micro(that); } ,10)}Page({ data: { second: 2, micro_second:
micro_second_init }, onLoad: function() { countdown(this);
countdown4micro(this); }});

分步骤-性情急的对象,可以一向看最后这段代码。

wxml文件放个text

wxml文件
<text style=”display: block;”>second:
{{second}}s</text><text>{{micro_second}}</text>

wxml文件放个text

<text>second: {{second}} micro
second:{{micro_second}}</text>

如此那般,当秒级运营实现时,微秒级timer即clearTimeout,并将字本显示为’micro_second
too’
再增加三个countdown4micro方法,使得彰显剩余 0:3:19 89如此格局的倒数
function dateformat(second) { var dateStr = “”; var hr =
Math.floor(second / 3600); var min = Math.floor((second – hr * 3600) /
60); var sec = (second – hr * 3600 – min * 60);// equal to => var
sec = second % 60; dateStr = hr + “:” + min + “:” + sec; return
dateStr;}

second: {{second}} micro second:{{micro_second}}

在js文件中调用

近期有2个石英钟,影响属性,合併下去掉countdown,于是countdown4micro形成以下的样板:
function countdown4micro(that) { var loop_second =
Math.floor(loop_index / 100); // 得知经历了1s if (cost_micro_second
!= loop_second) { // 赋予新值 cost_micro_second = loop_second; //
总秒数减1 total_second–; } // 每隔一秒,展现值减1; 渲染倒计时石英钟that.setData({ clock:dateformat(total_second – 1) }); if (total_second
== 0) { that.setData({ // micro_second: “”, clock:”时间到” });
clearTimeout(micro_timer); return ; } if (micro_second_current <=
0) { micro_second_current = micro_second_init; } micro_timer =
setTimeout(function(){ that.setData({ micro_second:
micro_second_current – 1 }); micro_second_current–; //
放在最终++,不然闹钟终止时还会有10纳秒剩余 loop_index ++;
countdown4micro(that); } ,10)}

在js文件中调用

function countdown(that) {
 var second = that.data.second
 if (second == 0) {
  // console.log("Time Out...");
  that.setData({
   second: "Time Out..."
  });
  return ;
 }
 var time = setTimeout(function(){
  that.setData({
   second: second - 1
  });
  countdown(that);
 }
 ,1000)
}

Page({
  data: {
    second: 3
  },
  onLoad: function() {
    countdown(this);
  }
});

那般,皮秒与时分秒是独家运营渲染的,再度更动,程序可读性更加好。dateformat针对于微秒操作,而不收受秒为数。同期还节省了总结玖十九回为1s的运算
/** * 必要三个指标日期,开头化时,先得出到当前时间还大概有剩余多少秒 *
1.将秒数换到格式化输出为XX天XX小时XX分钟XX秒 XX *
2.提供贰个时钟,每10ms运转二遍,渲染石英钟,再总ms数自减10 *
3.剩余的秒次为零时,return,给出tips提示说,已经甘休 ///
定义一个总微秒数,以一分钟为例。TODO,传入叁个时间点,转变到总微秒数var
total_micro_second = 2 \
1000;/ 飞秒级倒计时 \/function
countdown(that) { // 渲染倒计时石英钟 that.setData({
clock:dateformat(total_micro_second) }); if (total_micro_second
<= 0) { that.setData({ clock:”已经甘休” }); // timeout则跳出递归
return ; } setTimeout(function(){ // 放在最终– total_micro_second -=
10; countdown(that); } ,10)}// 时间格式化输出,如3:25:1987。每10ms都会调用一回function dateformat(micro_second) { // 秒数 var
second = Math.floor(micro_second / 1000); // 小时位 var hr =
Math.floor(second / 3600); // 分钟位 var min = Math.floor((second – hr
* 3600) / 60); // 秒位 var sec = (second – hr * 3600 – min * 60);//
equal to => var sec = second % 60; // 毫秒位,保留2位 var micro_sec
= Math.floor((micro_second % 1000) / 10); return hr + “:” + min + “:” +
sec + ” ” + micro_sec;}Page({ data: { clock: ” }, onLoad: function() {
countdown(this); }});

function countdown(that) {  var second = that.data.second  if (second ==
0) {    // console.log(“Time Out…”);

运营验证下,从10走到1s,然后显示时间到。

因而如上优化,代码量缩短五成,运营功能也高了。
Hello小程序将与您一同成长。微复信号:130870319
QQ群:40726600

that.setData({

于是继续将阿秒完善,注意阿秒的肥瘦受限于系统的年月频率,于是我们正确到0.01s即10ms

second: “Time Out…”

js

});    return ;

/* 秒级倒计时 */
function countdown(that) {
 var second = that.data.second
 if (second == 0) {
  that.setData({
   second: "Time out!",
   micro_second: "micro_second too."
  });
  clearTimeout(micro_timer);
  return ;
 }
 var timer = setTimeout(function(){
  that.setData({
   second: second - 1
  });
  countdown(that);
 }
 ,1000)
}

/* 毫秒级倒计时 */
// 初始毫秒数,同时用作归零
var micro_second_init = 100;
// 当前毫秒数
var micro_second_current = micro_second_init;
// 毫秒计时器
var micro_timer;

function countdown4micro(that) {
 if (micro_second_current <= 0) {
  micro_second_current = micro_second_init;
 }
 micro_timer = setTimeout(function(){
  that.setData({
   micro_second: micro_second_current - 1
  });
  micro_second_current--;
  countdown4micro(that);
 }
 ,10)
}

Page({
  data: {
    second: 2,
    micro_second: micro_second_init
  },
  onLoad: function() {
    countdown(this);
    countdown4micro(this);
  }
});

}  var time = setTimeout(function(){

wxml文件

that.setData({

<text style="display: block;">second: {{second}}s</text>

<text>{{micro_second}}</text>

second: second – 1

这么,当秒级运营达成时,飞秒级timer即clearTimeout,并将字本突显为’micro_second
too’

});

再增多二个countdown4micro方法,使得呈现剩余 0:3:19 89那样格局的尾数

countdown(that);

function dateformat(second) {
  var dateStr = "";
  var hr = Math.floor(second / 3600);
  var min = Math.floor((second - hr * 3600) / 60);
  var sec = (second - hr * 3600 - min * 60);// equal to => var sec = second % 60;
  dateStr = hr + ":" + min + ":" + sec;
  return dateStr;
}
目前有2个时钟,影响性能,合并下去掉countdown,于是countdown4micro变成以下的样子:

function countdown4micro(that) {

  var loop_second = Math.floor(loop_index / 100);
  // 得知经历了1s
  if (cost_micro_second != loop_second) {
    // 赋予新值
    cost_micro_second = loop_second;
    // 总秒数减1
    total_second--;

  }
   // 每隔一秒,显示值减1; 渲染倒计时时钟
  that.setData({
   clock:dateformat(total_second - 1)
  });

   if (total_second == 0) {
    that.setData({
     // micro_second: "",
     clock:"时间到"
    });
    clearTimeout(micro_timer);
    return ;
   }  

 if (micro_second_current <= 0) {
  micro_second_current = micro_second_init;
 }
 micro_timer = setTimeout(function(){
  that.setData({
   micro_second: micro_second_current - 1
  });
  micro_second_current--;
  // 放在最后++,不然时钟停止时还有10毫秒剩余
  loop_index ++;
  countdown4micro(that);
 }
 ,10)
}

}

与上述同类,微秒与时分秒是分别运营渲染的,再一次改动,程序可读性更加好。dateformat针对于皮秒操作,而不接受秒为数。同不常候还节约了总计玖19次为1s的演算

,1000)

/** 
 * 需要一个目标日期,初始化时,先得出到当前时间还有剩余多少秒
 * 1.将秒数换成格式化输出为XX天XX小时XX分钟XX秒 XX
 * 2.提供一个时钟,每10ms运行一次,渲染时钟,再总ms数自减10
 * 3.剩余的秒次为零时,return,给出tips提示说,已经截止
 */

// 定义一个总毫秒数,以一分钟为例。TODO,传入一个时间点,转换成总毫秒数
var total_micro_second = 2 * 1000;

/* 毫秒级倒计时 */
function countdown(that) {
   // 渲染倒计时时钟
   that.setData({
     clock:dateformat(total_micro_second)
   });

   if (total_micro_second <= 0) {
     that.setData({
       clock:"已经截止"
     });
     // timeout则跳出递归
     return ;
   }  
   setTimeout(function(){
    // 放在最后--
    total_micro_second -= 10;
    countdown(that);
  }
  ,10)
}

// 时间格式化输出,如3:25:19 86。每10ms都会调用一次
function dateformat(micro_second) {
   // 秒数
   var second = Math.floor(micro_second / 1000);
   // 小时位
   var hr = Math.floor(second / 3600);
   // 分钟位
   var min = Math.floor((second - hr * 3600) / 60);
   // 秒位
  var sec = (second - hr * 3600 - min * 60);// equal to => var sec = second % 60;
  // 毫秒位,保留2位
  var micro_sec = Math.floor((micro_second % 1000) / 10);
  return hr + ":" + min + ":" + sec + " " + micro_sec;
}

Page({
  data: {
    clock: ''
  },
  onLoad: function() {
    countdown(this);
  }
});

}

透过如上优化,代码量裁减一半,运维效用也高了。

Page({

谢谢阅读,希望能扶助到大家,多谢大家对本站的支撑!

data: {

您恐怕感兴趣的稿子:

  • 微信小程序完毕倒计时调用相机自动拍照功效
  • 微信小程序达成验证码获取倒计时效果
  • 微信小程序倒计时作用落成代码
  • 微信小程序之发送短信倒计时成效
  • 微信小程序注册60s倒计时功用使用JS达成挂号60s倒计时作用
  • 微信小程序完成倒计时60s获取验证码
  • 微信小程序动态展现项目倒计时效果
  • 微信小程序电商常用倒计时达成实例
  • Android中微信小程序支付倒计时成效
  • 微信小程序达成倒计时补零成效

second: 3

},

onLoad: function() {

countdown(this);

}

});

运维验证下,从10走到1s,然后展现时间到。

于是继续将皮秒完善,注意微秒的宽窄受限于系统的时间频率,于是大家纯粹到0.01s即10ms

js

/* 秒级倒计时 */function countdown(that) {  var second =
that.data.second  if (second == 0) {

that.setData({

second: “Time out!”,

micro_second: “micro_second too.”

});

clearTimeout(micro_timer);    return ;

}  var timer = setTimeout(function(){

that.setData({

second: second – 1

});

countdown(that);

}

,1000)

}/*

皮秒级倒计时 */// 初步纳秒数,同有的时候间作为归零var micro_second_init =
100;// 当前纳秒数var

澳门葡京 ,micro_second_current = micro_second_init;// 飞秒测量时间的装置var

micro_timer;function countdown4micro(that) {  if
(micro_second_current

<= 0) {

micro_second_current = micro_second_init;

}

micro_timer = setTimeout(function(){

that.setData({

micro_second: micro_second_current – 1

});

micro_second_current–;

countdown4micro(that);

}

,10)

}

Page({

data: {

second: 2,

micro_second: micro_second_init

},

onLoad: function() {

countdown(this);

countdown4micro(this);

}

});

wxml文件

second: {{second}}s{{micro_second}}

如此,当秒级运维达成时,飞秒级timer即clearTimeout,并将字本突显为’micro_second
too’

再增添二个countdown4micro方法,使得彰显剩余 0:3:19 89这么格局的尾数

function

dateformat(second) {    var dateStr = “”;    var hr = Math.floor(second

/ 3600);    var min = Math.floor((second – hr * 3600) / 60);    var sec

= (second – hr * 3600 – min * 60);// equal to => var sec = second %

60;

dateStr = hr + “:” + min + “:” + sec;    return dateStr;

}

眼下有2个石英钟,影响属性,合併下去掉countdown,于是countdown4micro形成以下的旗帜:

function countdown4micro(that) {    var loop_second =
Math.floor(loop_index / 100);    // 得知经历了1s

if (cost_micro_second != loop_second) {        // 赋予新值

cost_micro_second = loop_second;        // 总秒数减1

total_second–;

}      // 每隔一秒,展现值减1; 渲染倒计时机械钟

that.setData({

clock:dateformat(total_second – 1)

});      if (total_second == 0) {

that.setData({          // micro_second: “”,

clock:”时间到”

});

clearTimeout(micro_timer);        return ;

}

if (micro_second_current <= 0) {

micro_second_current = micro_second_init;

}

micro_timer = setTimeout(function(){

that.setData({

micro_second: micro_second_current – 1

});

micro_second_current–;    // 放在最终++,不然石英钟终止时还会有10微秒剩余

loop_index ++;

countdown4micro(that);

}

,10)

}

那般,微秒与时分秒是个别运维渲染的,再度更动,程序可读性越来越好。dateformat针对于微秒操作,而不收受秒为数。同期还节省了总括九十二遍为1s的运算

/**

* 须要二个目的日期,初阶化时,先得出到当前时间还也许有剩余多少秒

* 1.将秒数换到格式化输出为XX天XX小时XX分钟XX秒 XX

* 2.提供一个石英钟,每10ms运营壹回,渲染石英钟,再总ms数自减10

* 3.剩余的秒次为零时,return,给出tips提醒说,已经完工

*///
定义一个总皮秒数,以一分钟为例。TODO,传入多个时间点,转变来总微秒数var
total_micro_second = 2 *

1000;/* 飞秒级倒计时 */function countdown(that) {      //
渲染倒计时时钟

that.setData({

clock:dateformat(total_micro_second)

});      if (total_micro_second <= 0) {

that.setData({

clock:”已经甘休”

});          // timeout则跳出递归

return ;

}

setTimeout(function(){        // 放在最终–

total_micro_second -= 10;

countdown(that);

}

,10)

}// 时间格式化输出,如3:25:19 86。每10ms都会调用三遍function
dateformat(micro_second) {      // 秒数

var second = Math.floor(micro_second / 1000);      // 小时位

var hr = Math.floor(second / 3600);      // 分钟位

var min = Math.floor((second – hr * 3600) / 60);      // 秒位

var sec = (second – hr * 3600 – min * 60);// equal to => var sec =
second % 60;

// 毫秒位,保留2位

var micro_sec = Math.floor((micro_second % 1000) / 10);    return hr +
“:” + min + “:” + sec + ” ” + micro_sec;

}

Page({

data: {

clock: ”

},

onLoad: function() {

countdown(this);

}

});

通过如上优化,代码量减弱二分一,运转效能也高了。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website