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. Java的三种代理模式&完整源码分析

    Java的三种代理模式&完整源码分析 参考资料: 博客园-Java的三种代理模式 简书-JDK动态代理-超详细源码分析 [博客园-WeakCache缓存的实现机制](https://www.c ...

  2. 需要知道的jQuery对象和DOM对象之间的转换

    jQuery对象和DOM对象之间的转换 jQuery对象就是通过jQuery包装DOM对象后产生的对象. jQuery对象和DOM对象不能互相调用对方的方法或属性,但它们之间可以进行转换. 两者都无法 ...

  3. 数据处理之以OLEDB方式读取Excel数据丢失的原因及解决方法

    1.引言 在应用程序的设计中,经常需要读取Excel数据或将Excel数据导入转换到其他数据载体中,C#读取Excel的方式有两种,一种是通过OLEDB方式读取,另一种为通过COM组件方式读取.近段时 ...

  4. JS 验证

    JS 验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML ...

  5. ORACLE EXPIRED(GRACE)

    查询用户状态col username for a20col account_status for a20select username,account_status,LOCK_DATE,EXPIRY_ ...

  6. WD HC510 不能被识别

    折腾半天,终于记得去查官方文档

  7. mssql 系统函数 字符串函数 space 功能简介

    转自: http://www.maomao365.com/?p=4672  一.space 函数功能简介 space功能:返回指定数量的空格参数简介: 参数1: 指定数量,参数需为int类型 注意事项 ...

  8. Git 在小团队中的管理流程

    目标读者:了解 Git 的基本概念,能够使用 Git 进行基本的本地和远程操作. 有关 Git 的基础知识可以参见 知乎回答-怎样使用 GitHub?,天猪(刘勇)给出了一些很好的学习资料. 本文介绍 ...

  9. CodeForces 862B(思维+二分图染色)

    题意 https://vjudge.net/problem/CodeForces-862B 给出n个点,n-1条边,求再最多再添加多少边使得二分图的性质成立 思路 因为题目是求的最多添加多少边,所以可 ...

  10. Pymysql的常见使用方法

    cursor.fetchone()与cursor.fetchall()的区别: cursor.fetchone():只能显示一个数据 cursor.fetchall():才能显示查出来的所有数据  P ...