小程序（倒计时的制作）

小程序（倒计时的制作）

微信小程序如火如荼，今天我借教程做一篇倒计时效果的小程序页面.

这样的效果是怎样实现的呢

按以下步骤操作

wxml文件放个text:

<view>
  <text>{{second}} 秒:{{micro_second}}</text>
</view>

然后在js文件下编写如下代码：

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

在Page里面加入：

 second: 3,

在onLoad加载函数里面执行倒计时函数：

countdown(this);

最终效果如图：

加入毫秒demo

更改js代码：

function countdown(that) {
  var second = that.data.second 
   if (second == 0) {
    that.setData({
      second: "时间到!",
      micro_second: " " ,
      s:0

    });
    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)
}

在onload函数如加入上述的两个计时函数：

 countdown(this);
  countdown4micro(this);

最终效果：