vue 实现LED数字时钟效果（开箱即用）
更新时间：2019年12月08日 07:57:15 作者：ItBear
这篇文章主要介绍了vue 实现LED数字时钟效果（开箱即用）,每一个数字由七个元素构成，即每一个segment元素，本文给大家分享实现实例，感兴趣的朋友一起看看吧
实现思路
每一个数字由七个元素构成，即每一个segment元素。0~9 的数字都有自己的构成方式，用数组表示，即digitSegments数组。例如：
数字0用数组表示就是[1,2,3,4,5,6]，定时器每隔一秒获取最新时间，然后通过改变透明度将之前的数字消失，显示最新的数字。通过transition展示动态效果。
代码细节
setNumber 方法用来设置数字 ，方法中第一个判断用于清除之前显示的数字，第二个判断用于显示最新的数字，当初始化时间时，会进第二个判断。样式有些丑，可以自己修改，年月日 的显示也可使用 正常的数字显示。
实现代码
<!--
* @Author: mat
* @Date: 2019-12-04 14:56:07
* @LastEditTime: 2019-12-05 17:27:36
* @LastEditors: Please set LastEditors
* @Description: 实现LED数字时钟
-->
<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">系统时间</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 : [
[1,2,3,4,5,6],
[2,3],
[1,2,7,5,4],
[1,2,7,3,4],
[6,7,2,3],
[1,6,7,3,4],
[1,6,5,4,3,7],
[1,2,3],
[1,2,3,4,5,6,7],
[1,2,7,3,6]
]
};
},
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: {
//digit 所在元素、number 需要设置的数字
setNumber(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;
transition:opacity 0.2s;
-webkit-transition:opacity 0.2s;
-ms-transition:opacity 0.2s;
-moz-transition:opacity 0.2s;
-o-transition:opacity 0.2s;
}
.segment.on, .separator {
opacity:1;
box-shadow:0 0 50px 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;
transition:opacity 0.2s;
-webkit-transition:opacity 0.2s;
-ms-transition:opacity 0.2s;
-moz-transition:opacity 0.2s;
-o-transition:opacity 0.2s;
}
.segment.on, .separator {
opacity:1;
box-shadow:0 0 50px 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>
总结
以上所述是小编给大家介绍的vue 实现LED数字时钟效果（开箱即用），希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
这篇文章主要介绍了vue.js实现的幻灯片功能,结合实例形式分析了vue.js实现幻灯片的相关样式、配置、功能等操作技巧,需要的朋友可以参考下2019-01-01
解决vue-router进行build无法正常显示路由页面的问题
下面小编就为大家分享一篇解决vue-router进行build无法正常显示路由页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家详细介绍了vue动态组件实现选项卡切换效果的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了vue点击标签切换选中及互相排斥操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了在Vue中使用Select选择器拼接label的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
本文主要介绍了基于element-ui表格的二次封装实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
这篇文章主要为大家介绍了使用github部署前端vue项目过程示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
Vue.js是一种流行的JavaScript框架,用于构建交互式的Web应用程序,这篇文章主要给大家介绍了关于在原生HTML中使用VUE的保姆级教学,需要的朋友可以参考下2023-10-10
本文将探讨 props 验证失败的常见原因,并提供解决方法,帮助开发者在 Vue 组件开发中避免这些问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-03-03
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。本文介绍下Vue Router的安装与使用2021-06-06
最新评论