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

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. videojs文档翻译-api

    直播流地址 rtmp://live.hkstv.hk.lxdns.com/live/hks API 接口 (一)   Modules  模块 1)         browser :浏览器 2)    ...

  2. ssrf解题记录

    ssrf解题记录 最近工作需要做一些Web的代码审计,而我Web方面还比较薄弱,决定通过一些ctf的题目打打审计基础,练练思维,在博客上准备开几个专题专门记录刷题的过程. pwn题最近做的也很少,也要 ...

  3. linux笔记1(不全,无图版)随笔

    1.ls 查看当前目录下的所有内容 黑色的是文件,蓝色的是文件夹,也就是目录 2.rm -f anaconda-ks. cfg 彻底删除文件(如不确定,则需要先保存备份,也就是快照) 3.ifconf ...

  4. vulnhub-靶机Lampiao

    目标信息:攻击机IP地址:192.1681.10 Lampiao靶机IP地址:192.168.1.12 DC-1靶机IP地址:192.168.1.7 目的:获取靶机root权限和靶机设置的所有flag ...

  5. Tomcat服务器种的HttpServletRequest类

    HttpServletRequest 类有什么作用:             每次只要有请求进入 Tomcat 服务器,Tomcat 服务器就会把请求过来的 HTTP 协议信息解析好封装到 Reque ...

  6. 🏆【Java技术专区】「开发实战专题」Lombok插件开发实践必知必会操作!

    前言 在目前众多编程语言中,Java 语言的表现还是抢眼,不论是企业级服务端开发,还是 Andorid 客户端开发,都是作为开发语言的首选,甚至在大数据开发领域,Java 语言也能占有一席之地,如Ha ...

  7. 更好地使用Atom支持基于Jupyter的Python开发

    有关于使用Atom进行Python开发的网上资料比较少,最近发现使用Atom结合Hydrogen插件进行Python开发,尤其是数据挖掘相关的工作,整体体验要好于Vscode,Vscode虽然说也有连 ...

  8. xv6学习笔记(3):中断处理和系统调用

    xv6学习笔记(3):中断处理和系统调用 1. tvinit函数 这个函数位于main函数内 表明了就是设置idt表 void tvinit(void) { int i; for(i = 0; i & ...

  9. Avro使用手册

    1. Overview Data serialization is a technique of converting data into binary or text format. There a ...

  10. websocket在慕课网中的应用

    网上资料都是介绍概念,我们来看看实际网站怎么使用websocket的吧.限于自身水平解读并不深入,慕课网上的websocket某些字段不知何用. 是什么 是一种应用层协议,有html5而推出,是一种全 ...