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

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

浏览量:3313 时间: 来源:新猿意码

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.jsPage({  /**   * 页面的初始数据   */  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)  },})

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

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎