微信小程序之LED时钟（毫秒级别）

wxml部分

<!--pages/led/index.wxml-->
<view class='body'>
  <view class="clock">
    <view class="digit hours">
      <block wx:for="{{[1, 2, 3, 4, 5, 6, 7]}}" wx:key="*this" wx:if="item<=7">
          <view class="segment {{hours[0][item-1]==1?'on':''}}" data-index='{{item}}'></view>
      </block>
    </view>

    <view class="digit hours">
      <block wx:for="{{[1, 2, 3, 4, 5, 6, 7]}}" wx:key="*this" wx:if="item<=7">
          <view class="segment {{hours[1][item-1]==1?'on':''}}" data-index='{{item}}'></view>
      </block>
    </view>

    <view class="separator">时</view>

    <view class="digit minutes">
      <block wx:for="{{[1, 2, 3, 4, 5, 6, 7]}}" wx:key="*this" wx:if="item<=7">
          <view class="segment {{minutes[0][item-1]==1?'on':''}}" data-index='{{item}}'></view>
      </block>
    </view>

    <view class="digit minutes">
      <block wx:for="{{[1, 2, 3, 4, 5, 6, 7]}}" wx:key="*this" wx:if="item<=7">
          <view class="segment {{minutes[1][item-1]==1?'on':''}}" data-index='{{item}}'></view>
      </block>
    </view>

    <view class="separator">分</view>

    <view class="digit seconds">
      <block wx:for="{{[1, 2, 3, 4, 5, 6, 7]}}" wx:key="*this" wx:if="item<=7">
          <view class="segment {{seconds[0][item-1]==1?'on':''}}" data-index='{{item}}'></view>
      </block>
    </view>

    <view class="digit seconds">
      <block wx:for="{{[1, 2, 3, 4, 5, 6, 7]}}" wx:key="*this" wx:if="item<=7">
          <view class="segment {{seconds[1][item-1]==1?'on':''}}" data-index='{{item}}'></view>
      </block>
    </view>
    <view class="separator">秒</view>
    <view class="digit Millisecond">
      <block wx:for="{{[1, 2, 3, 4, 5, 6, 7]}}" wx:key="*this" wx:if="item<=7">
          <view class="segment {{Millisecond[0][item-1]==1?'on':''}}" data-index='{{item}}'></view>
      </block>
    </view>

    <view class="digit Millisecond">
      <block wx:for="{{[1, 2, 3, 4, 5, 6, 7]}}" wx:key="*this" wx:if="item<=7">
          <view class="segment {{Millisecond[1][item-1]==1?'on':''}}" data-index='{{item}}'></view>
      </block>
    </view>
  </view>
</view>

---

wxss部分

/* pages/led/index.wxss */
page,.body {
  margin:0;
  padding:0;
  background:#000;
  width:100%;
  height:100%;
  position:absolute;
  min-width:300rpx;
}

.clock {
  height:100rpx;
  position:absolute;
  top:50%;
  left:50%;
  width:100%;
  transform: translate(-50%,-50%);
  text-align:center;
}

.digit {
  width:60rpx;
  height:100rpx;
  margin:0 2.5rpx;
  position:relative;
  display:inline-block;
}

.digit .segment {
  background:#c00;
  border-radius:5rpx;
  position:absolute;
  opacity:0.15;
  transition:opacity 0s;
  -webkit-transition:opacity 0s;
  -ms-transition:opacity 0s;
  -moz-transition:opacity 0s;
  -o-transition:opacity 0s;
}

.digit .segment.on, .separator {
  opacity:1;
  box-shadow:0 0 50rpx rgba(255,0,0,0.7);
  transition:opacity 0s;
  -webkit-transition:opacity 0s;
  -ms-transition:opacity 0s;
  -moz-transition:opacity 0s;
  -o-transition:opacity 0s;
}

.separator {
  width:10rpx;
  height:10rpx;
  background:#c00;
  border-radius:50%;
  display:inline-block;
  position:absolute;
  top:50%;
  transform: translate(-50%,-50%);
}

.digit .segment:nth-child(1) {
  top:10rpx;
  left:16rpx;
  right:16rpx;
  height:5rpx;
}

.digit .segment:nth-child(2) {
  top:20rpx;
  right:10rpx;
  width:5rpx;
  height:75rpx;
  height:calc(50% - 25rpx);
}

.digit .segment:nth-child(3) {
  bottom:20rpx;
  right:10rpx;
  width:5rpx;
  height:75rpx;
  height:calc(50% - 25rpx);
}

.digit .segment:nth-child(4) {
  bottom:10rpx;
  right:16rpx;
  height:5rpx;
  left:16rpx;
}

.digit .segment:nth-child(5) {
  bottom:20rpx;
  left:10rpx;
  width:5rpx;
  height:75rpx;
  height:calc(50% - 25rpx);
}

.digit .segment:nth-child(6) {
  top:20rpx;
  left:10rpx;
  width:5rpx;
  height:75rpx;
  height:calc(50% - 25rpx);
}

.digit .segment:nth-child(7) {
  bottom:95rpx;
  bottom:calc(50% - 2.5rpx);
  right:16rpx;
  left:16rpx;
  height:5rpx;
}

---

js部分

// pages/led/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    days: [
      [0, 1, 1, 0, 0, 0, 0],
      [1, 1, 0, 1, 1, 0, 1]
    ],
    hours: [
      [0, 1, 1, 0, 0, 0, 0],
      [1, 1, 0, 1, 1, 0, 1]
    ],
    minutes: [
      [0, 1, 1, 0, 0, 0, 0],
      [1, 1, 0, 1, 1, 0, 1]
    ],
    seconds: [
      [0, 1, 1, 0, 0, 0, 0],
      [1, 1, 0, 1, 1, 0, 1]
    ],
    Millisecond: [
      [0, 1, 1, 0, 0, 0, 0],
      [1, 1, 0, 1, 1, 0, 1]
    ],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    var that = this;
    var digitSegments = [
      [1, 1, 1, 1, 1, 1, 0],
      [0, 1, 1, 0, 0, 0, 0],
      [1, 1, 0, 1, 1, 0, 1],
      [1, 1, 1, 1, 0, 0, 1],
      [0, 1, 1, 0, 0, 1, 1],
      [1, 0, 1, 1, 0, 1, 1],
      [1, 0, 1, 1, 1, 1, 1],
      [1, 1, 1, 0, 0, 0, 0],
      [1, 1, 1, 1, 1, 1, 1],
      [1, 1, 1, 1, 0, 1, 1],
    ];
    setInterval(function() {
      // 时钟效果开始
      var date = new Date();
      var days = date.getDate(),
        hours = date.getHours(),
        minutes = date.getMinutes(),
        seconds = date.getSeconds(),
        Millisecond = Math.floor(date.getMilliseconds() / 10);
      // 时钟效果结束
      let _days = [];
      let _hours = [];
      let _minutes = [];
      let _seconds = [];
      let _Millisecond = [];
      _days[0] = digitSegments[(Math.floor(days / 10))];
      _days[1] = digitSegments[(days % 10)];
      _hours[0] = digitSegments[(Math.floor(hours / 10))];
      _hours[1] = digitSegments[(hours % 10)];
      _minutes[0] = digitSegments[(Math.floor(minutes / 10))];
      _minutes[1] = digitSegments[(minutes % 10)];
      _seconds[0] = digitSegments[(Math.floor(seconds / 10))];
      _seconds[1] = digitSegments[(seconds % 10)];
      _Millisecond[0] = digitSegments[(Math.floor(Millisecond / 100))];
      _Millisecond[1] = digitSegments[(Millisecond % 10)];
      // console.log(days, _days);
      // console.log(seconds, _seconds);
      that.setData({
        days: _days,
        hours: _hours,
        minutes: _minutes,
        seconds: _seconds,
        Millisecond: _Millisecond
      });
    }, 10)
  },
})

---

以上为全部代码，欢迎交流与指教：）