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. SQLServer之GROUP BY语句

    GROUP BY 语句 GROUP BY 语句用于结合合计函数,根据一个或多个列对结果集进行分组. SQL GROUP BY 语法 SELECT column_name, aggregate_func ...

  2. Android获取实时连接热点的设备IP地址

    因为最近玩树莓派,需要手机做热点,目前我发现的有两种办法 得到“已连接手机热点的设备的ip地址,推荐第二个办法,我最开始是第二个办法解决问题的, 第一个办法推测可行,但还未验证, 第一个办法需要手机有 ...

  3. Git操作删除 untracked files

    最近使用git 管理项目的时候,编译过程中出现了很多中间文件,今天发现使用 git clean 命令可以很方便进行清除: # 删除 untracked files git clean -f # 连 u ...

  4. Nginx 配置详细文件

    概述 Nginx 是使用一个 master 进程来管理多个 worker 进程提供服务.master 负责管理 worker 进程,而 worker 进程则提供真正的客户服务,worker 进程的数量 ...

  5. java 通过Qrcode生成二维码添加图片logo和文字描述

    /** * 二维码创建 * @author yhzm * */ public class printServiceImpl extends BaseService { public void barC ...

  6. 算法设计与分析 1.2 不一样的fibonacci数列

    ★题目描述 fibonacci 数列的递推公式是F(n) = F(n-1) + F(n-2)(n >= 2 且 n 为整数). 将这个递推式改为F(n) = aF(n-1) + bF(n-2)( ...

  7. LG4516/LOJ2546 「JSOI2018」潜入行动 树上背包

    问题描述 LG4516 LOJ2546 题解 好一个毒瘤题. hkk:JSOI的签到题 设\(opt[i][j][0/1][0/1]\)代表结点\(i\)的子树,放置\(j\)个,\(i\)放不放,\ ...

  8. CSP-S 2019文澜中学游记(11.15~11.17)

    前言 今年的\(CSP-S\),本以为自己的实力与去年的\(NOIP\)相比,能有较大的提升的. 没想到,菜是原罪,弱就是弱,依然逃脱不了被吊锤的命运. \(Nov\ 15th\):\(Day\ 0\ ...

  9. servlet重点知识总结

    Servlet Java Servlet 是运行在 Web 服务器或应用服务器上的程序,它是作为来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP 服务器上的数据库或应用程序之间的中间层. ...

  10. vue表格合并行的一个实例

        一.element控件实现 在平常的应用中,需要用到合并单元格的操作,在Excel中,这种操作很好实现,但在实际项目中,常常需要借助element控件来实现. 下面是element中的一个实例 ...