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

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. 第十八篇 -- GPIO学习

    先学习一下GPIO,网上各种找资料,拼凑,所以就不一一贴网址了. 一.GPIO GPIO的英文全称General-Purpose Input /Output Ports,中文意思是通用I/O端口 一个 ...

  2. Python脚本:删除文件夹下的重复图片,实现图片去重

    近期在整理相册的时候,发现相册中有许多重复图片,人工一张张筛查删除太枯燥,便写下这个脚本,用于删除文件夹下重复的图片. 第一部分:判断两张图片是否相同 要查找重复的图片,必然绕不开判断两张图片是否相同 ...

  3. Java 异步编程的几种方式

    前言 异步编程是让程序并发运行的一种手段.它允许多个事情同时发生,当程序调用需要长时间运行的方法时,它不会阻塞当前的执行流程,程序可以继续运行,当方法执行完成时通知给主线程根据需要获取其执行结果或者失 ...

  4. videojs文档翻译-SeekBar

    SeekBar 拖动条和进度条的容器. 使用PlayProgressBar作为其栏. 构造函数 new SeekBar(player, optionsopt) 创造此类的实例 Parameters: ...

  5. mongodb使用场景及与mysql区别

    MySQL是关系型数据库. 优势: 在不同的引擎上有不同 的存储方式. 查询语句是使用传统的sql语句,拥有较为成熟的体系,成熟度很高. 开源数据库的份额在不断增加,mysql的份额页在持续增长. 缺 ...

  6. Gitea 1.4.0 目录穿越导致命令执行漏洞

    复现 POST /vulhub/repo.git/info/lfs/objects HTTP/1.1 Host: 192.168.49.2:3000 Accept-Encoding: gzip, de ...

  7. Spring Boot实现数据访问计数器

    1.数据访问计数器   在Spring Boot项目中,有时需要数据访问计数器.大致有下列三种情形: 1)纯计数:如登录的密码错误计数,超过门限N次,则表示计数器满,此时可进行下一步处理,如锁定该账户 ...

  8. 什么是CIDR?

    英文缩写: CIDR (Classless InterDomain Routing) 中文译名: 无类别域间路由选择 IP地址有"类"的概念,/8掩码是A类,/16掩码是B类,/2 ...

  9. C++ //运算符重载 +号

    1 #include <iostream> 2 #include <string> 3 using namespace std; 4 5 //1.成员函数重载 +号 6 cla ...

  10. 只要套路对,薪资直接翻一倍!保姆级Android面试葵花宝典,肝完面试犹如开挂

    跳槽,这在 IT 互联网圈是非常普遍的,也是让自己升职加薪,走上人生巅峰的重要方式.那么作为一个普通的Android程序猿,我们如何才能斩获大厂offer 呢? 疫情向好.面试在即,还在迷茫踌躇中的后 ...