/**
* 倒计时函数
* @param {String}} endTime 终止时间戳
*/
const countDown = (endTime, callback) => {
const end = endTime,
now = new Date().getTime();
let differ = end - now,
hours, minutes, seconds;
if (differ >= 0) {
hours = Math.floor(differ / 1000 / 60 / 60 % 24);
minutes = Math.floor(differ / 1000 / 60 % 60);
seconds = Math.floor(differ / 1000 % 60);
}
callback({
h: check(hours),
m: check(minutes),
s: check(seconds)
});
setTimeout(() => {
countDown(end, callback);
}, 1000);
}; /**
* 时间前加零
* @param {Number} time
*/
const check = time => {
if (time < 10) {
time = '0' + time;
}
return time.toString();
}; export default countDown;
 countDown(new Date('2018/9/5 10:00:00'), function(timeObj) { // 调用
console.log(timeObj.h, timeObj.m, timeObj.s)
});

JavaScript倒计时实现的更多相关文章

  1. 比较全的JavaScript倒计时脚本

    JavaScript倒计时在Web中用得非常广泛,比如常见的团购啊.还有什么值得期待的事情,都可以用到倒计时.现在举了四个例子,比如时间长的倒计时,小时倒计时,最简的倒计时,还有秒表等等,应该可以满足 ...

  2. JavaScript倒计时脚本

    JavaScript倒计时在Web中用得非常广泛,比如常见的团购啊.还有什么值得期待的事情,都可以用到倒计时.现在举了四个例子,比如时间长的倒计时,小时倒计时,最简的倒计时,还有秒表等等,应该可以满足 ...

  3. 比较全的JavaScript倒计时脚本[xyytit]

    需要做一个功能,给特定的活动或者商品添加一个倒计时提示,在网上找了好些方法,总结了比较好的一些方法,以备后用: 1. 比较长时间的倒计时(如:距离2014年还有0年, 0月, 30天, 9小时, 41 ...

  4. JavaScript - 倒计时

    http://www.helloweba.com/demo/loading/ WEB开发中经常会用到倒计时来限制用户对表单的操作,比如希望用户在一定时间内看完相关协议信息才允许用户继续下一步操作,又比 ...

  5. Javascript倒计时页面跳转

    在js中实现页面定时跳转我们要使用setInterval或setTimeOut函数,还可以使用页面的meta实现. 例1: <script type="text/javascript& ...

  6. javascript 倒计时代码

    <script language="javascript" type="text/javascript"> var interval = 1000; ...

  7. javascript 倒计时跳转.

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

  8. javascript倒计时代码及倒计时弹窗

    在前端开发中,难免会用到倒计时.如做的双十一活动,在距活动开始的半个月前需要做些宣传工作,需要告知用户优惠活动什么时候开始.这个时候就要用到倒计时,如在整站的某个页面提醒用户活动什么时候开始等.而在活 ...

  9. JavaScript倒计时

    倒计时: 1.设置一个有效的结束日期 2.计算剩余时间 3.将时间转换成可用的格式 4.输出时钟数据作为一个可重用的对象 5.在页面上显示时钟,并在它到达0时停止 <div id="c ...

  10. [转载]在线考试javaScript倒计时

    <script type="text/javascript"> /* ================== hi.baidu.com/coolinc === */ va ...

随机推荐

  1. oracle 修改进程

    SQL> show parameter session NAME TYPE VALUE------------------------------------ ----------- ----- ...

  2. lvs三种模式的优缺点对比

    电面只回答上来少部分,所以......恶补.总结

  3. thinkPHP 分页样式增加下拉列表

    $linkPage="  <select name='sldd' style='width:40px;height:30px;border:1px red block;' onchan ...

  4. seajs引入jquery框架问题

    seajs引入jquery框架时出现的问题 原因:由于seajs是遵循cmd规范,而jquery是遵循amd规范,所以在seajs调用jquery框架时,需要将amd转换为cmd 转换方法:jquer ...

  5. mysql在查询中常见问题汇总

    1.从主从表中查询外键内容(常见问题) 从主从表中查询对应的外键,需要指定外键的表,即sno=> student.sno或者score.sno 错误:select sno,sname,degre ...

  6. PHP涉及的所有英文单词

    PHP涉及的所有英文单词拦路虎 PHP再火,也会让一部同学心生畏惧,因为看到编辑器中那一串串英文单词,担心自己英文不好,从而对能学会PHP的决心产生动摇.其实大可不必,英文在学习PHP过程中真的连级别 ...

  7. U-Boot shell脚本语法

    /********************************************************************** * U-Boot shell脚本语法 * 说明: * 之 ...

  8. libnids-1.24 使用源码问题

    从网上下载libnids-1.24源码包,解压后./configure安装. 会出现提示 checking for GLIB... configure: error: Package requirem ...

  9. CSS精简工具——除去多余的css样式

    有时候开发网页中在改版之后,存在很多无意义的样式,对于后期的管理和维护很不友好. 如果手动去删除,很可能会导致出现更混乱的问题. 最近找到一个Chrome插件,CSS remove and combi ...

  10. easyui datagrid去掉全选按钮

    第一步: F12查看元素,选中全选按钮,把全选按钮的class里边加上display:none属性.找到对应的class,即.datagrid-header-check. 第二步: 在加载 表格的时候 ...