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. Ling to sql 多表查询,多个条件进行关联

    使用多表查询进行关联时,提示 join子句中其中一个表达式的类型不正确,注意字段类型和名称要一致,否则join时提示语法错误,错误截图如下 var incomeDetails = from a in ...

  2. 一种简单的REST API接口加密实现,只允许自己的产品调用后台,防止接口被刷

    在项目上线后,后台接口很容易通过抓包工具看到, 难免被人为构造恶意请求攻击我们的系统,相信大家都或多或少都遇到过短信验证码被刷.疯狂留言灌水.数据被恶意爬取等问题,这种直接抓接口然后写个循环调用的行为 ...

  3. 如何制作gif图片?教你把gif图片缩小100倍大小的妙招!

    移动互联网是短视频的时代,5G的到来更是让短视频蓬勃发展,视频的发展让人们看到了动态的机会,图片也需要动起来,图片动起来应该是比较早的,gif图片很早就有,我们常见的动态表情,现在用的比较多的是视频的 ...

  4. Django—开发具体流程

    1.创建Django项目 [root@localhost ~]# django-admin startproject 项目名 [root@localhost ~]# django-admin star ...

  5. echarts自定义颜色主题

    1. 进入地址:  https://echarts.baidu.com/theme-builder/ 2. 配置主题 2.1. 可以选择挑选默认方案 2.2 可以进行一些样式配置 2.3 配置背景颜色 ...

  6. 定义私有指令 v-fontweight

    // 这是一个私有的指令 他是在vm这个实例对象里里面的 所以说是私有的 directives 多一个s // 在css中是font-Weight.在第二个字母的大写该为小写,去掉横线. // 这中写 ...

  7. 在 VS 中查看所有线程

    查看当前所有线程 在程序中打断点,然后启动调试(注意:线程窗口需要启动调试才可以看得到)点击 Debug > Windows > Threads 线程窗口如下:

  8. Python连载50-贪婪匹配、XPath介绍

    一.贪婪和非贪婪 1.贪婪:尽可能多的匹配,(*)表示贪婪匹配 2.非贪婪:找到符合条件的最小内容即可,(?)表示非贪婪 3.正则默认使用贪婪匹配 import re title = u"& ...

  9. ImportError: unable to find Qt5Core.dll on PATH

    一.实验环境 1.Windows7x32_SP1 2.python3.7.4 3.pyinstaller3.5 二.问题描述 1.一直都是在Windows10x64上使用pyinstaller打包ex ...

  10. 重载&重写的区别

    重载(Overload) 1.重载(Overload)是让类以统一的方式处理不同类型数据的一种手段.多个同名函数同时存在,具有不同的参数个数/类型. 2.重载(Overload)是一个类中多态性的一种 ...