vue实现LED数字时钟效果（开箱即用）_vue前端好看的时钟 - CSDN文库

57 浏览量更新于2023-05-11 收藏 52KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

vue 实现实现LED数字时钟效果（开箱即用）数字时钟效果（开箱即用）

主要介绍了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>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余5页未读，立即下载

weixin_38631282

粉丝: 5
资源: 923

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈