小程序 ，倒数，从800倒数到0，自定义显示数字样式图片显示数字

小程序 ，倒数，从800倒数到0，自定义显示数字样式图片显示数字

我写的代码，你直接复制过去就可以显示，我已测试过了；

上次写的是随机数显示一个区间的数字用图片代指数字，
我暗暗自喜，不是倒计时，
可是，可是。。。。
就在昨天，要写倒计时，没办法，又得写了，随便记录一下，
项目文件是这样的

wxml文件

<view class="page">倒数名额</view>
<view class="pagImg">
    <image src="../../img/{{qian}}.png"></image>
    <image src="../../img/{{hund}}.png"></image>
    <image src="../../img/{{ten}}.png"></image>
    <image src="../../img/{{one}}.png"></image>
</view>

wxss文件，
样式写的有点多，其实你不写也是一样的，但是我不喜欢拿丑的东西分享，所以写的有点多

page{
  background: #ccc;
}
.page{
  background: rgb(66, 66, 66);
  color: #fff;
  font-size: 52rpx;
  margin: 0 30rpx;
  margin-top: 100rpx;
  text-align: center;
  height: 120rpx;
  line-height:120rpx;
  margin-bottom: 40rpx;
}
.pagImg{
  text-align: center;
  margin: 0 30rpx;
  border: 1px solid rgb(66, 66, 66);
  padding:60rpx;
  background: #fff;
  box-shadow: 2px 0px 10px 4px rgb(66, 66, 66);
  border-radius: 15rpx;
}
view image{
  width: 120rpx;
  height: 160rpx;
  margin: 0 10rpx;
}

js代码

Page({
  data: {
    qian: 0,
    hund: 0,
    ten: 0,
    one: 0
  },
  onLoad: function () {
    this.numtap()
  },
  // 将数字转化成字符串，并判断千位，百位，十位，个位，为0的情况，处理的方法
  randomNUm: function(num) {
    var that = this;
    var strNum = num.toString()
    var tt1 = strNum.substring(0, 1)
    var tt2 = strNum.substring(1, 2)
    var tt3 = strNum.substring(2, 3)
    var tt4 = strNum.substring(3, 4)
    if (num < 1000) {
      return that.setData({
        qian: '0',
        hund: tt1,
        ten: tt2,
        one: tt3
      })
    } else if (num < 100) {
      return that.setData({
        qian: '0',
        hund: '0',
        ten: tt1,
        one: tt2
      })
    } else if (num < 10) {
      return that.setData({
        qian: '0',
        hund: '0',
        ten: tt1,
        one: tt2
      })
    } else if (num < 0) {
      return that.setData({
        qian: '0',
        hund: '0',
        ten: '0',
        one: '0'
      })
      clearInterval(time)
    } else {
      return that.setData({
        qian: tt1,
        hund: tt2,
        ten: tt3,
        one: tt4
      })
    }
  },
  // 计时器的方法
  numtap: function() {
    var that = this;
    //  800 -- 600之间的随机数，可以根据自己需求写
    var num = Math.floor(Math.random() * 200 + 600);
    // 在这纠结了很久，如果时间短，还凑合，
    // 当时间是5秒的时候 ,你打开页面后，这个定时器要五秒后才运行
    that.randomNUm(num)  // 在开始定时器之前，将获取到的数字解析，在页面渲染一遍，
    var time = setInterval(function() {
      num--
      that.randomNUm(num)
    }, 5000)
  },
})

写的有点繁琐，如果用到的地方比较多，可以将一些常用的方法，封装一下，放到app.js里面
直接调用，这样会好点，

时间的倒计时，项目里暂时没有，所以没有写，过几天了写，其实和这个差不多，获取到数值以后，判断临界值，再解析成字符串，再this.setdata({})出去，
希望点个赞，谢谢