js代码
import moment from 'moment';
const jsCountDown = document.getElementById('js-countdown');
const targetTime = new Date('2018-10-4');
const countdownFn = () =>{
const now = moment();
const end = moment(targetTime);
const diffDay = now.diff(end,'days');
const diffH = now.diff(end,'hours') % 24;
const diffM = now.diff(end,'minutes') % 60;
const diff = now.diff(end, 'seconds') % 60;
// console.log(diffDay,diffH,diffM);
// console.log(diffDay);
jsCountDown.querySelector('.day').innerHTML = - diffDay;
jsCountDown.querySelector('.hours').innerHTML = - diffH;
jsCountDown.querySelector('.minutes').innerHTML = - diffM;
jsCountDown.querySelector('.second').innerHTML = - diff;
// if (diff >= 0) {
// return;
// }
setTimeout(() => {
countdownFn();
}, 10);
}
countdownFn();
 
html代码
<div class="inner" id="js-countdown">
<i class="icon-time"></i>
<span class="day">1</span>
天
<span class="hours">1</span>
时
<span class="minutes">1</span>
分
<span class="second">1</span>
秒
</div>

momentjs在vue中的用法的更多相关文章

  1. checkbox在vue中的用法小结

    关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue插 ...

  2. checkbox在vue中的用法总结

    前言 关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样, 之前对于 ...

  3. 【vue】vue中ref用法

    1.获取当前元素: 例子: <div class="pop pos-a" :style="{ left: pop_x + 'px' ,top: pop_y + 'p ...

  4. swiper在vue中的用法

    首先通过npm i vue-awesome-swiper --save 来在vue中下载插件 然后再main.js中引入 require('swiper/dist/css/swiper.css')im ...

  5. Vue中import用法

    1. 引入第三方插件 第三方常用插件参考https://blog.csdn.net/vbirdbest/article/details/86527886 2. 导入 css 文件 import 'iv ...

  6. Vue中computed用法

    computed是什么?对于任何复杂逻辑,你都应当使用计算属性.computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义.然后就可以在页面上进行双向数据绑定展 ...

  7. 分享vue中 slot用法

    //slot默认用法 //slot带参数name用法

  8. vue中class用法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. vue中keep-alive的用法

    1.keep-alive的作用以及好处 在做电商有关的项目中,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-al ...

随机推荐

  1. git如何合并远程2个分支

    1,先检出项目到一个文件夹git clone 2,你检出的项目默认是master,所以现在要查看远程全部分支git branch -a * master remotes/origin/HEAD -&g ...

  2. WordPress疑难问题以及解决方案汇总

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/101 WordPress疑难问题以及解决方案汇总: 最近这 ...

  3. Consul作为配置中心,配置Asp.Net Core应用程序

    前言 最近项目逐步转向基于.Net Core,目前dotnet core 虽然已出3.0了但还没有特别成熟的框架,要实现微服务,必须要解决配置中心的问题 .不管是不是微服务,节点多了配置文件一个个更改 ...

  4. [Go] go连接influxdb的库

    开启了influxdb后,会监听8086端口下载客户端代码git clone https://github.com/influxdata/influxdb1-client.git $GOPATH/sr ...

  5. java 反编译工具 jd-gui

    下载地址    http://java-decompiler.github.io/         一般使用windows 版本  看你使用的操作系统了 解压  点击exe 进入 选择你编译后的cla ...

  6. Comet OJ - Contest #8

    Comet OJ - Contest #8 传送门 A.杀手皇后 签到. Code #include <bits/stdc++.h> using namespace std; typede ...

  7. Node.js实现登录注册功能

    使用Node.js + Navicat for mysql实现的登录注册功能 数据库中存在有”user_id,user_name,password,user_img,user_number“字段,其中 ...

  8. autocad2014一直显示正在检查许可

    64位CAD2014安装成功后启动时在检查许可卡住的解决方法,以下方法经本人测试,真实可行.1.下载CCcleaner.2.将CCcleaner设置成中文版,英文好的继续第三步.(设置方法:选项opt ...

  9. 第04组 Alpha冲刺(3/4)

    队名:斗地组 组长博客:地址 作业博客:Alpha冲刺(3/4) 各组员情况 林涛(组长) 过去两天完成了哪些任务: 1.收集各个组员的进度 2.写博客 展示GitHub当日代码/文档签入记录: 接下 ...

  10. js实现addClass方法,classList与className有什么区别?

     壹 ❀ 引 Jquery中addClass与removeClass是两个使用高频的方法,对于为dom元素增删class类非常方便:但如果不用JQ,使用js怎么模拟它们呢?本文主要记录下自己的实现思路 ...