rendering
Implementation approach
Each number is made up of seven elements, namely each segment element. The digits from 0 to 9 have their own composition, represented by an array, that is, digitSegments array. Such as:
Details of the code
The setNumber method is used to set the number. The first judgment is used to clear the previously displayed number, the second judgment is used to display the latest number, and the second judgment is used when initializing the time. Some ugly style, you can modify, year month day display can also use the normal number display.
The implementation code
<! -- * @Author: mat * @Date: 2019-12-04 14:56:07 * @LastEditTime: 2019-12-05 17:27:36 * @LastEditors: PleasesetLastEditors * @description: Implementation of LED digital clock --> <template> <div class="clock">
<div class="digit hours">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div class="digit hours">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div class="intervalPoint">
<div class="separator"></div>
<div class="separator"></div>
</div>
<div class="digit minutes">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div class="digit minutes">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div class="intervalPoint">
<div class="separator"></div>
<div class="separator"></div>
</div>
<div class="digit seconds">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div class="digit seconds">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div class="systemTime-main">
<p class="systemTime-title"> System time </p> <! -- <p style="color: #00DCFF; font-size: 30px; line-height: 40px; font-family: fantasy;">2019/12/05</p> -->
<div class="systemTime-date">
<div class="date-numble year">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div class="date-numble year">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div class="date-numble year">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div class="date-numble year">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div class="date-numble month">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div class="date-numble month">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div class="date-numble day">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div class="date-numble day">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name:' ',
props:[' '].data () {
return{ digitSegments : [[6], [2, 3], [1,2,7,5,4],,2,7,3,4 [1], [6,7,2,3],,6,7,3,4 [1],,6,5,4,3,7 [1], [1, 2, 3],,2,3,4,5,6,7 [1]. ,2,7,3,6 [1]]}; },mounted() {
var _that = this
var _hours = document.querySelectorAll('.hours');
var _minutes = document.querySelectorAll('.minutes');
var _seconds = document.querySelectorAll('.seconds');
var _year = document.querySelectorAll('.year');
var _month = document.querySelectorAll('.month');
var _day = document.querySelectorAll('.day');
var date = new Date();
var years = date.getFullYear(), months = date.getMonth()+1, days = date.getDate();
_that.setNumber(_year[0], Math.floor(years/1000));
_that.setNumber(_year[1], Math.floor(years/100)%10);
_that.setNumber(_year[2], Math.floor(years/10)%10);
_that.setNumber(_year[3], years%10);
_that.setNumber(_month[0], Math.floor(months/10));
_that.setNumber(_month[1], months%10);
_that.setNumber(_day[0], Math.floor(days/10));
_that.setNumber(_day[1], days%10);
setInterval(function() { var date = new Date(); var hours = date.getHours(), minutes = date.getMinutes(), seconds = date.getSeconds(); _that.setNumber(_hours[0], Math.floor(hours/10)); _that.setNumber(_hours[1], hours%10); _that.setNumber(_minutes[0], Math.floor(minutes/10)); _that.setNumber(_minutes[1], minutes%10); _that.setNumber(_seconds[0], Math.floor(seconds/10)); _that.setNumber(_seconds[1], seconds%10); }, 1000); }, methods: {//digitsetNumber(digit, number) {
var _that = this
var segments = digit.querySelectorAll('.segment');
var current = parseInt(digit.getAttribute('data-value'));
// only switch if number has changed or wasn t set
if(! isNaN(current) && current ! = number) { //unset previous number
_that.digitSegments[current].forEach(function(digitSegment, index) {
setTimeout(function() {
segments[digitSegment-1].classList.remove('on');
}, index*45)
});
}
if(isNaN(current) || current ! = number) { //set new number after
setTimeout(function() {
_that.digitSegments[number].forEach(function(digitSegment, index) {
setTimeout(function() {
segments[digitSegment-1].classList.add('on');
}, index*45)
});
}, 250);
digit.setAttribute('data-value', number);
}
}
},
watch: {}
}
</script>
<style lang='scss' scoped>
.clock {
height:140px;
background:# 000;
position:absolute;
top:50%;
left:50%;
// width:900px;
margin-left:-450px;
margin-top:-100px;
text-align:center;
.intervalPoint{
display: inline-block;
height: 100px;
.separator {
width:20px;
height:20px;
background:#00DCFF;
border-radius:50%;
display:block;
position:relative;
margin-bottom: 20px;
}
}
.digit {
width:80px;
height:140px;
margin:0 0px;
position:relative;
display:inline-block;
.segment {
background:#00DCFF;border-radius:5px; position:absolute; Opacity: 0.15; The transition: opacity 0.2 s; 0.2 s - its - the transition: opacity; 0.2 s - ms - the transition: opacity; 0.2 s - moz - the transition: opacity; 0.2 s - o - the transition: opacity; } .segment.on, .separator { opacity:1; Box - shadow: 0 0 px 50 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; } .segment:nth-child(1) { top:10px; left:16px; right:16px; height:10px; } .segment:nth-child(2) { top:20px; right:10px; width:10px; height:75px; height:calc(50% - 20px); } .segment:nth-child(3) { bottom:20px; right:10px; width:10px; height:75px; height:calc(50% - 20px); } .segment:nth-child(4) { bottom:10px; right:16px; height:10px; left:16px; } .segment:nth-child(5) { bottom:20px; left:10px; width:10px; height:75px; height:calc(50% - 20px); } .segment:nth-child(6) { top:20px; left:10px; width:10px; height:75px; height:calc(50% - 20px); } .segment:nth-child(7) { bottom:95px; bottom:calc(50% - 5px); right:19px; left:19px; height:10px; } } .systemTime-main{ display: inline-block; .systemTime-title{ background-color: rgb(255, 166, 75); font-size: 30px; width: 200px; text-align: center; margin-left: calc(50% - 100px); } .systemTime-date{ .date-numble{ width: 60px; height: 100px; margin-right: -10px; display: inline-block; position: relative; .segment { background:#00DCFF;border-radius:5px; position:absolute; Opacity: 0.15; The transition: opacity 0.2 s; 0.2 s - its - the transition: opacity; 0.2 s - ms - the transition: opacity; 0.2 s - moz - the transition: opacity; 0.2 s - o - the transition: opacity; } .segment.on, .separator { opacity:1; Box - shadow: 0 0 px 50 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; } .segment:nth-child(1) { top:10px; left:16px; right:16px; height:10px; } .segment:nth-child(2) { top:20px; right:10px; width:10px; height:75px; height:calc(50% - 20px); } .segment:nth-child(3) { bottom:20px; right:10px; width:10px; height:75px; height:calc(50% - 20px); } .segment:nth-child(4) { bottom:10px; right:16px; height:10px; left:16px; } .segment:nth-child(5) { bottom:20px; left:10px; width:10px; height:75px; height:calc(50% - 20px); } .segment:nth-child(6) { top:20px; left:10px; width:10px; height:75px; height:calc(50% - 20px); } .segment:nth-child(7) { bottom:95px; bottom:calc(50% - 5px); right:19px; left:19px; height:10px; } } } } } </style>Copy the code