首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onDecember 08, 2019

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

实现思路

每一个数字由七个元素构成，即每一个segment元素。0~9 的数字都有自己的构成方式，用数组表示，即digitSegments数组。例如：

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

数字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 实现LED数字时钟效果（开箱即用）

- Author -

ItBear

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
用javascript编写的第一人称射击游戏
Feb 25 Javascript
javascript中获取选中对象的类型
Apr 02 Javascript
jquery 1.4.2发布！主要是性能与API
Feb 25 Javascript
添加JavaScript重载函数的辅助方法2
Jul 04 Javascript
jQuery实现的原图对比窗帘效果
Jun 15 Javascript
深入理解JavaScript系列（46）：代码复用模式（推荐篇）详解
Mar 04 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 Javascript
jQuery+pjax简单示例汇总
Apr 21 jQuery
深入理解Vue.js源码之事件机制
Sep 27 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
Nov 09 Javascript
解析Json字符串的三种方法日常常用
May 02 Javascript
vue实现滑动超出指定距离回顶部功能
Jul 31 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 #Javascript
Vue+Node实现商品列表的分页、排序、筛选，添加购物车功能详解
Dec 07 #Javascript
JQuery样式与属性设置方法分析
Dec 07 #jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 #jQuery
json解析大全 双引号、键值对不在一起的情况
Dec 06 #Javascript
js实现图片粘贴到网页
Dec 06 #Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 #Javascript
申请书(21) Docker(14) 城市猎人(1) AngularJS(2) 文书(291) 帝国时代(1) explain(2) HAM-2000(1) 西索(1) 波段(1)
You might like
php缓存技术详细总结
2013/08/07 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
js类的静态属性和实例属性的理解
2009/10/01 Javascript
IE、FF浏览器下修改标签透明度
2014/01/28 Javascript
浅析js中substring和substr的方法
2015/11/09 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
Angular 4依赖注入学习教程之Injectable装饰器（六）
2017/06/04 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
python tkinter组件摆放方式详解
2019/09/16 Python
python常用排序算法的实现代码
2019/11/08 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
路易威登和香奈儿手袋：LuxeDH
2017/01/12 全球购物
size?瑞典：英国伦敦的球鞋精品店
2018/03/01 全球购物
婚礼证婚人证婚词
2014/01/08 职场文书
优秀团支部事迹材料
2014/02/08 职场文书
外国人聘用意向书
2014/04/01 职场文书
建筑工程专业大学生求职信
2014/04/23 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
学校施工安全责任书
2015/01/29 职场文书
让世界充满爱观后感
2015/06/10 职场文书
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫
Python利用capstone实现反汇编
2022/04/06 Python