微信小程序之LED倒计时(毫秒级别)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_41320944/article/details/84661489

wxml

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

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

    <view class="separator">天</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[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_start = new Date();
      var date_end = new Date('2019-02-01 00:00:00:00');
      var time_end = date_end.getTime();
      var time_start = date_start.getTime();
      var time = time_end - time_start;
      var Millisecond = Math.floor(time % 1000);
      var seconds = Math.floor(time / 1000 % 60);
      var minutes = Math.floor(time / 1000 / 60 % 60);
      var hours = Math.floor(time / 1000 / 60 / 60 % 24);
      var days = Math.floor(time / 1000 / 60 / 60 / 24);
    /*倒计时结束*/
      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)];
      that.setData({
        days: _days,
        hours: _hours,
        minutes: _minutes,
        seconds: _seconds,
        Millisecond: _Millisecond
      });
    }, 10)
  },
})

以上为全部代码,欢迎交流与指教:)

展开阅读全文

没有更多推荐了,返回首页