小程序 时钟，变化图片，获取时间，数字变化，对应用图片代替

小程序 时钟，变化图片，获取时间，数字变化，对应用图片代替

除了图片，代码你复制过去，直接可运行，我已测试完毕

上次写了一个随机显示数字对应显示图片的例子，看的人挺多的（其实就30个人），所以再写一个时钟的，类似于倒计时，

效果是这样的

wxml

<view class="page">  时钟</view>
<view class="pagImg">
  <view>
    <image wx:for = "{{yearTime}}" wx:key = "key" src="../../img/{{item}}.png"></image>
    --
    <image wx:for = "{{monthTime}}" wx:key = "key" src="../../img/{{item}}.png"></image>
    --
    <image wx:for = "{{dayTime}}" wx:key = "key" src="../../img/{{item}}.png"></image>
  </view>
  <view class="time">
    <text>{{am}}：</text>
    <image wx:for = "{{hoursTima}}" wx:key = "key" src="../../img/{{item}}.png"></image>
    :
    <image wx:for = "{{minvteTime}}" wx:key = "key" src="../../img/{{item}}.png"></image>
    :
    <image wx:for = "{{secondTime}}" wx:key = "key" src="../../img/{{item}}.png"></image>
  </view>
</view>
<view class="datatime">
  {{nowdatassss}}
</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:20rpx 0;
  background: #fff;
  box-shadow: 2px 0px 10px 4px rgb(66, 66, 66);
  border-radius: 15rpx;
}
.pagImg view{
  vertical-align: middle;
  padding: 20rpx 0;
}
.time text{
  display: inline-block;
  font-size: 52rpx;
  padding-right: 30rpx;
  color: rgb(241, 99, 3);
   vertical-align: middle;
}
view image{
  width: 40rpx;
  height: 60rpx;
  margin: 0 2rpx;
  vertical-align: middle;
}
.datatime{
  margin:50rpx  30rpx;
  background: #fff;
  font-size: 42rpx;
  text-align: center;
  padding: 30rpx;
  box-shadow: 2px 0px 10px 4px rgb(66, 66, 66);
  border-radius: 15rpx;
}

js

Page({
  data: {
  },
  onLoad: function() {
    this.numtap()
  },
  //分割字符方法，
  timestr:function(){
    var that = this;
    var date = new Date();
    var yearTime = date.getFullYear(); //年
    var monthTime = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1); //月  
    var dayTime = date.getDate() < 10 ? '0' + date.getDate() : date.getDate(); //日  
    var hoursTima = date.getHours() < 10 ? '0' + date.getHours() : date.getHours(); //时  
    var minvteTime = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes(); //分  
    var secondTime = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds(); //秒   
    // console.log("当前时间："+ yearTime+'-'+monthTime+'-'+dayTime+'--'+hoursTima+":"+minvteTime+":"+ secondTime); 
    var nowdatassss = yearTime + '-' + monthTime + '-' + dayTime + '--' + hoursTima + ":" + minvteTime + ":" + secondTime;
    if (hoursTima > 12 && hoursTima < 20) {
      that.setData({
        am: "下午"
      })
    } else if (hoursTima > 20 && hoursTima < 24) {
      that.setData({
        am: "晚上"
      })
    } else if (hoursTima > 0 && hoursTima < 6) {
      that.setData({
        am: "半夜"
      })
    } else if (hoursTima > 6 && hoursTima < 12) {
      that.setData({
        am: "上午"
      })
    }
    that.setData({
      nowdatassss: nowdatassss,
      // 以下的数字，都要先将他们转化成字符串，不然，for循环的时候，他会按照数字去循环
      // 将时间拆开，这样写的原因是，时分秒之间得有分隔符，这样写的话好处理
      yearTime: yearTime.toString(), //年 
      monthTime: monthTime.toString(), 
      dayTime: dayTime.toString(),
      hoursTima: hoursTima.toString(),
      minvteTime: minvteTime.toString(),
      secondTime: secondTime.toString()
    })
  },
  // 计时器的方法
  numtap: function() {
    var that = this;
    that.timestr()
    var time = setInterval(function() {
    that.timestr()
    }, 1000)
  },

})

此项目的技术难点，

一、获取到对应的时间数值后，按需求分割或拼接，
二、将其转化成字符串，
三、将转化成字符串的额数值遍历（也叫循环，也叫轮循）；
注意： 在定时器之前要先将，分割字符的方法执行一遍，
why！ 如果你将定时器时间设置到5000，你就会知道了，

倒计时的做法，应该会做了吧，

只不过是吧当前时间换成一个固定的时间，在定时器里面–减减就行了 啊