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

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. 冒泡排序(bubble_sort)——Python实现

      # 冒泡排序 # 作用:对给出的n个顺序不定的数进行排序 # 输入:任意数组A # 输出:按顺序排列的数组A   # 冒泡排序过程 # 第一趟:以第一个数为基准,从最后一位数开始,依次与它比较, ...

  2. Redis.conf分析

    Redis.conf 单位 配置文件对大小写不敏感 # 1k => 1000 bytes # 1kb => 1024 bytes # 1m => 1000000 bytes # 1m ...

  3. tp3 联表查询

    联表查询D("column") ->field("{$DbPrefix}column.pid,{$DbPrefix}news.*") ->where ...

  4. K-Fold 交叉验证

    转载--原文地址 www.likecs.com 1.K-Fold 交叉验证概念 在机器学习建模过程中,通行的做法通常是将数据分为训练集和测试集.测试集是与训练独立的数据,完全不参与训练,用于最终模型的 ...

  5. 零基础涂鸦智能面板SDK开发记录(一)

    前言 本人基础背景:在学校学了点JS,在blbl上看过几节node.js视频,现在是一名Android开发工程师,因公司需要学习涂鸦面板SDK开发.说真的除了官方的一些文档外,我真的找不到其他的资料. ...

  6. C++ //虚析构和纯虚析构

    1 //虚析构和纯虚析构 2 3 #include <iostream> 4 #include <string> 5 using namespace std; 6 7 clas ...

  7. 阿里内部资料:Android开发核心知识笔记共2100页,58万字,完整版开放下载

    作为一个3-5年的Android工程师,我们经常会遇到这些瓶颈: 1.技术视野窄长期在小型软件公司,外包公司工作,技术视野被限制的太厉害 2.薪资提升难初中级Android岗位薪资上升空间有限,基本上 ...

  8. Java-SpringBoot注解方式实现AOP

    AOP基本总结 连接点(JoinPoint): 连接点是程序运行的某个阶段点,如方法调用.异常抛出等 切入点(Pointcut): 切入点是JoinPoint的集合 是程序中需要注入Advice的位置 ...

  9. JAVA集合体系之-开篇

    JAVA的集合体系是个庞大的知识体系,里面涵盖了,如数组结构,链表,红黑树,排序算法,线程安全等等知识点,接下来将会使用一系列的分享文章整理自己的学习心得,留的温故而知新.下图是整理出来的JAVA集合 ...

  10. 终极蛇皮上帝视角之铁头娃之鲁迅之暑假闲的慌之bilibili看尚学堂网课的非洲酋长java小复习

    转自https://www.sxt.cn/Java_jQuery_in_action/eight-cache-problem.html 第一个点 自动装箱与拆箱的功能是所谓的"编译器蜜糖(C ...