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. Python中使用cutecharts实现简单的手绘风格的图表

    场景 效果 cutecharts的Github: https://github.com/chenjiandongx/cutecharts 注: 博客: https://blog.csdn.net/ba ...

  2. 网络协议 15 - P2P 协议

    大家说起种子,应该都知道是用来下载资源的.那么资源下载都有哪些方式?种子下载又有什么优势呢? 下载电影的两种方式     第一种是通过 HTTP 进行下载.这种方式,有过经历的人应该体会到,当下载文件 ...

  3. 【C#】学习笔记 Linq相关

    Language-Integrated Query(语言集成查询) 写了个demo,具体看

  4. JavaScript中的this绑定丢失及解决方法

    经常犯的错误:混淆了this绑定规则. 代码如下: var obj = { id: 'vexekefo', cool() { console.log(this.id); } }; var id = ' ...

  5. web安全知识整理

    常见漏洞 sql注入 原理:SQL注入攻击是通过将恶意的SQL查询语句插入到应用的输入参数中,欺骗数据库服务器执行非授权的任意查询,从而进一步得到相应的数据信息 分类: 注入类型:字符型, 数字型 提 ...

  6. Android 上下文菜单 PopupMenu

    @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); s ...

  7. MySQL基础之常用函数

    数学函数的使用 常用数学函数 函数 作用 函数 作用 ceil() 进一取整 abs() 取绝对值 floor() 舍掉小数部分 power() 幂运算 round() 四舍五入 pi() 圆周率 t ...

  8. Nginx web基础入门

    目录 Nginx web基础入门 如何升级nginx或者添加功能 使用systemd管理nginx nginx相关配置文件 nginx的配置文件详解 日志格式 game日志记录实战 日志切割 手写虚拟 ...

  9. 默认VS 下machine.config的位置

  10. Lniux系统-Ubantu安装搜狗输入法

    1.在官网下载搜狗输入法的安装包-https://pinyin.sogou.com/linux/?r=pinyin 2.终端打开,进行解压安装--sudo dpkg -i sogoupinyin_2. ...