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