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) },})
以上为全部代码,欢迎交流与指教:)