首页
所有分类
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表格翻页效果实现思路及代码
Aug 23 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
js处理php输出时间戳对不上号的解决方法
Jun 20 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
iScroll.js 使用方法参考
May 16 Javascript
深入理解JavaScript中的对象复制(Object Clone)
May 18 Javascript
用图片替换checkbox原始样式并实现同样的功能
Nov 15 Javascript
javascript系统时间设置操作示例
Jun 17 Javascript
vue-resourc发起异步请求的方法
Feb 11 Javascript
使用Vue 自定义文件选择器组件的实例代码
Mar 04 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 Javascript
微信小程序canvas动态时钟
Oct 22 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
增删改查(2) binlog(2) 优化(1) MIME(1) redo log(1) 爬虫(2) LOGO(1) 写入策略(1) 存储过程(3) 抖音(1)
You might like
PHP session会话的安全性分析
2011/09/08 PHP
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
PHP 计算两个时间段之间交集的天数示例
2019/10/24 PHP
用js脚本控制asp.net下treeview的NodeCheck的实现代码
2010/03/02 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
Ionic实现页面下拉刷新(ion-refresher）功能代码
2016/06/03 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
详解Nodejs之静态资源处理
2017/06/05 NodeJs
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
使用Python的Twisted框架构建非阻塞下载程序的实例教程
2016/05/25 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
Timex手表官网：美国运动休闲手表品牌
2017/01/28 全球购物
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
心得体会范文
2014/01/04 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
民事赔偿协议书
2014/11/02 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python