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

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. CMS垃圾收集器——重新标记和浮动垃圾的思考

    <深入理解java虚拟机 第二版 JVM高级特性与最佳实践>里面提到 CMS 垃圾收集器. CMS 垃圾收集器的垃圾回收分4个步骤: 初始标记(initial mark) 有 STW 并发 ...

  2. js学习笔记之this指向及形参实参

    var length = 10 function fn () { console.log(this.length) } var obj = { length: 5, method (fn) { fn( ...

  3. leetcode 有效三角形的个数

    题目描述: 平明伞兵解法: 既然要求满足三角形要求的三边,简单来说,就是最短两边之和大于第三边,所以,第一步Arrays.sort().先排序,然后直接伞兵暴力法,三重循环.当然最后肯定是能跑出来的, ...

  4. Mac搭建Vue开发环境

    1.安装Homebrew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/ ...

  5. UI_UE在线就业-笔记

    UI设计 一.字体设计的应用范围 Logo设计.平面海报.包装设计.banner设计.APP引导页.UI图标.UI界面.影视设计 二.字体的分类 衬线字体和非衬线字体之分 区别在于笔画开始与结尾地方有 ...

  6. 工具idea 基于maven 创建springMVC项目

    SpringMVC Spring MVC是Spring提供的一个强大而灵活的web框架.借助于注解,Spring MVC提供了几乎是POJO的开发模式,使得控制器的开发和测试更加简单.这些控制器一般不 ...

  7. git的基本操作命令与基础

    本文针对window用户进行git操作 1.git是分布式版本控制系统,需要用户名和邮箱作为一个标识.在任何文件夹中点击右键,选择Git Bash Here ,配置全局用户名和邮件或者局部用户名和邮件 ...

  8. SortCompare.time的反射版本

    "Algorithms" by Robert Sedgewick, p256, SortCompare.time(): public static double time(Stri ...

  9. Solution of Cobertura Exception "touchJump" when Unit Test

    During unit test I encounter a "java.lang.NoSuchMethodError: net.sourceforge.cobertura.coverage ...

  10. 2021 年 iOS 应用程序开发七种最佳语言

    移动应用程序现在几乎是每个在线业务的必备品.最新的 StatCounter 数据显示,多达56% 的在线连接是通过移动设备建立的,这使它们高于平板电脑和计算机.更重要的是,同一个消息来源说,其中27% ...