首页
所有分类
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 相关文章推荐
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
javascript 实现动态侧边栏实例详解
Nov 11 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
JS实现按钮添加背景音乐示例代码
Oct 17 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
基于vue-cli 路由 实现类似tab切换效果（vue 2.0）
May 08 Javascript
更强大的vue ssr实现预取数据的方式
Jul 19 Javascript
微信小程序网络请求实现过程解析
Nov 06 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
Nov 14 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
props(1) 游标(1) GTID(1) 表变量(1) ECharts(3) 临时表(1) ip连接(1) mixin(1) 排序失效(1) timestamp(1)
You might like
无刷新动态加载数据 滚动条加载适合评论等页面
2013/10/16 PHP
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
JSON 编辑器实现代码
2009/12/06 Javascript
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
jQuery取得select选择的文本与值的示例
2013/12/09 Javascript
For循环中分号隔开的3部分的执行顺序探讨
2014/05/27 Javascript
JavaScript极简入门教程（一）：基础篇
2014/10/25 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
网页中的图片查看器viewjs使用方法
2017/07/11 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
vue 授权获取微信openId操作
2020/11/13 Javascript
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
python爬取本站电子书信息并入库的实现代码
2020/01/20 Python
Python-jenkins模块获取jobs的执行状态操作
2020/05/12 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
三年大学生活自我鉴定
2014/01/21 职场文书
法律七进实施方案
2014/03/15 职场文书
苏州园林导游词
2015/02/03 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
如何制定销售人员薪酬制度？
2019/07/09 职场文书
Nginx下配置Https证书详细过程
2021/04/01 Servers
简单谈谈Python面向对象的相关知识
2021/06/28 Python
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技