小程序模板網(wǎng)

微信小程序電商常用倒計(jì)時(shí)

發(fā)布時(shí)間:2018-04-20 10:55 所屬欄目:小程序開(kāi)發(fā)教程

wxml文件放個(gè)text

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

在js文件中調(diào)用

 

				
  1. function countdown(that) {
  2. var second = that.data.second
  3. if (second == 0) {
  4. // console.log("Time Out...");
  5. that.setData({
  6. second: "Time Out..."
  7. });
  8. return ;
  9. }
  10. var time = setTimeout(function(){
  11. that.setData({
  12. second: second - 1
  13. });
  14. countdown(that);
  15. }
  16. ,1000)
  17. }
  18.  
  19. Page({
  20. data: {
  21. second: 3
  22. },
  23. onLoad: function() {
  24. countdown(this);
  25. }
  26. });

運(yùn)行驗(yàn)證下,從10走到1s,然后顯示時(shí)間到。

于是繼續(xù)將毫秒完善,注意毫秒的步長(zhǎng)受限于系統(tǒng)的時(shí)間頻率,于是我們精確到0.01s即10ms

js

 

				
  1. /* 秒級(jí)倒計(jì)時(shí) */
  2. function countdown(that) {
  3. var second = that.data.second
  4. if (second == 0) {
  5. that.setData({
  6. second: "Time out!",
  7. micro_second: "micro_second too."
  8. });
  9. clearTimeout(micro_timer);
  10. return ;
  11. }
  12. var timer = setTimeout(function(){
  13. that.setData({
  14. second: second - 1
  15. });
  16. countdown(that);
  17. }
  18. ,1000)
  19. }
  20.  
  21. /* 毫秒級(jí)倒計(jì)時(shí) */
  22. // 初始毫秒數(shù),同時(shí)用作歸零
  23. var micro_second_init = 100;
  24. // 當(dāng)前毫秒數(shù)
  25. var micro_second_current = micro_second_init;
  26. // 毫秒計(jì)時(shí)器
  27. var micro_timer;
  28.  
  29. function countdown4micro(that) {
  30. if (micro_second_current <= 0) {
  31. micro_second_current = micro_second_init;
  32. }
  33. micro_timer = setTimeout(function(){
  34. that.setData({
  35. micro_second: micro_second_current - 1
  36. });
  37. micro_second_current--;
  38. countdown4micro(that);


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/23770.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún):800182392 點(diǎn)擊咨詢(xún)
QQ在線(xiàn)咨詢(xún)