由于花费了我不少时间才找到的组件,所以记录一下,后面方便自己好找一些,也算是分享出来给各位前端一起用。

npm 下载
npm install vue2-flip-countdown --save

template 部分

<div style="margin-top:20px;">

<flip-countdown :deadline="fileTime"></flip-countdown>
</div>

<script>
import FlipCountdown from 'vue2-flip-countdown' export default {
components: {
FlipCountdown
},
data :{
  
//倒计时时间
      fileTime :'',  
endTime : '',


}
},
methods:{

  // 传分钟,将分钟转换成 天 小时 分,根据需求可用可不用, 这个组件要求的样式为: 202-05-17 14:30:20
getTime1(time){
      this.endTime = ''
      //将分钟转换成 天 - 小时 - 分 
      var day1 = parseInt(time/60/24);
      var hour1 = parseInt(time/60%24);
      var min1 = parseInt(time % 60)
      var date = new Date()
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      day = day + day1
      hour = hour + hour1
      
      minute = minute + min1
      if(minute > 60 ){
        hour = hour + 1
        minute = minute - 60
      }
      if(hour > 24){
        day = day + 1
        hour = hour - 24
      }
      this.fileTime = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;      
    },


}

</script>

//找个地方 调用一下这个方法
this.getTime1( 传分钟 ) // 这个方法是我自写的,传进去分钟 转换成时间

deadline="2021-05-17 00:00:00" 是对比本地的时间,所以抄我代码可以,记得看一下自己本地的时间。 把时间替换成自己的时间上去。时间是重点。

  这个是基于本地时间去对比的,所以不太适合用于 活动倒计时 几分钟几秒钟

vue 嵌入倒计时组件( 亲测可用 )的更多相关文章

  1. 阿里云服务器centos7,docker部署mysql+Redis+vue+springboot+Nginx+fastdfs,亲测可用

    一.购买云服务器 我是今年双十一期间在阿里云购买的服务器, 简单配置2核_4G_40G_3M,三年用了不到800块,不过当时我记得腾讯云更便宜,个人感觉,阿里的云服务器更加的稳定, 毕竟身经百战, 经 ...

  2. C#读取Excel设置(亲测可用)

    OpenFileDialog openFD = new OpenFileDialog(); openFD.FileName = ""; openFD.Filter = " ...

  3. IntelliJ13+tomcat+jrebel实现热部署(亲测可用)

       网上有很多介绍intellij idea整合jrebel插件实现热部署的文章,但是有的比较复杂,有的不能成功,最后经过各种尝试,实现了整合,亲测可用!步骤说明如下:   一.先下载jrebel安 ...

  4. Linux下通过crontab及expect实现自动化处理 --亲测可用

    #!/usr/bin/expect -fspawn /home/scripts/bckup.shexpect "Enter password: "  send "WWQQ ...

  5. 亲测可用!!!golang如何在idea中保存时自动进行代码格式化

    亲测可用,golang在idea中的代码自动格式化 1.ctrl+alt+s打开设置界面,选择[Plugins] -> [Install JetBrains plugin...] -> 搜 ...

  6. Spring4.0.1+Quartz2.2.1实现定时任务调度[亲测可用]

    Spring4.0.1+Quartz2.2.1实现定时任务调度[亲测可用] tip:只需要配置xml文件即可 1.第三方依赖包的引入 <properties> <project.bu ...

  7. Sublime Text3注册码,亲测可用

    将以下复制在输入框即可 ,亲测可用 . 不过还是希望大家多多支持正版 . -– BEGIN LICENSE -– TwitterInc 200 User License EA7E-890007 1D7 ...

  8. IDEA 使用Mybatis效率飞起来的必备工具:MybatisCodeHelperPro 最新破解版,亲测可用!

    IDEA 2018.3.5 最新版本亲测可用. Git地址:https://github.com/pengzhile/MyBatisCodeHelper-Pro-Crack/releases 下载最新 ...

  9. jetbrains的JetBrains PyCharm 2018.3.1破解激活到2100年(最新亲测可用)

    破解补丁激活 之前看了好多的其它的方法感觉都不是很靠谱还是这个本人亲试可以长期有效不仅能激活pycharm.jetbrains的JetBrains PyCharm 2018.3.1破解激活到2100年 ...

随机推荐

  1. 自制车速记录仪「GitHub 热点速览 v.21.31」

    作者:HelloGitHub-小鱼干 如果你有一辆普通的自行车,那么就可以使用下 X-TRACK 这个项目制作一个自己的测速器,记录你的行驶轨迹还有车速,体验一把硬件发烧友的乐趣.如果你有一个非 ma ...

  2. C#曲线分析平台的制作(六,Sqldependency+Signalr+windows 服务)

    在经过五天的学习和资料收集后,终于初步实现了利用sqldependency进行数据库变化监控,signalr进行前后台交互,数据实时更新.下面将源代码贴出进行初步分析: 1.系统整体框架构成: 2.具 ...

  3. 过渡——transition

    ① 设置参与过渡的属性 transition-property:  ;      all / transform / 参与过渡的属性 ② 设置过渡的时长 transition-duration:  s ...

  4. ORACLE ORA-00933: SQL 命令未正确结束,

    这个错误害我花了一天时间排查,最后原来是因为结束符,这种语句不能是分号,将分号即可执行成功. MERGE INTO MO_TRADE_COUNT_DAY A USING ( SELECT MAX(fl ...

  5. 单片机学习(二)开发板LED灯的控制

    目录 开发板上LED灯相关的电路图 点灯 LED闪烁 LED流水灯 其他效果 灯光二进制计数器 进阶版流水灯 开发板上LED灯相关的电路图 这是P2相关7个引脚的电路图,在默认情况下它是直接接着VCC ...

  6. vue 快速入门 系列 —— vue-cli 上

    其他章节请看: vue 快速入门 系列 Vue CLI 4.x 上 在 vue loader 一文中我们已经学会从零搭建一个简单的,用于单文件组件开发的脚手架:本篇,我们将全面学习 vue-cli 这 ...

  7. Bugku-web-字符?正则?

    题目意思很明显,根据给出的规则构造出合理的正则表达式然后通过get方式提交弹出Flag. i:字体大小 /..../表示开始和结束. .号表示匹配0-9任一数字 *号表示重复前一个字符多次 {4,7} ...

  8. Kafka原理笔记

    1.什么是kafka? Kafka是一种分布式的,基于发布/订阅的消息系统(消息队列). 2.为什么要用kafka? 当业务逻辑变得复杂,数据量也会越来越多.此时可能需要增加多条数据线,每条数据线将收 ...

  9. 30K入职腾讯,全靠这份606页的Android面试指南

    前言 光阴似箭,日月如梭,时间真的过得飞快. 加上实习,从事 Android 开发,差不多有 5 年了.在上家公司职务.薪酬感觉已经到达了天花板,没有上升的余地.而且在这家公司过于安逸了,想换个有挑战 ...

  10. HDFS总结

    hadoop分布式文件存储系统,用来解决海量数据的存储问题 HDFS的组成------核心配置文件:hdfs-site.xml.core-site.xml NameNode:负责整个HDFS集群的管理 ...