JavaScript倒计时实现
/**
* 倒计时函数
* @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倒计时实现的更多相关文章
- 比较全的JavaScript倒计时脚本
JavaScript倒计时在Web中用得非常广泛,比如常见的团购啊.还有什么值得期待的事情,都可以用到倒计时.现在举了四个例子,比如时间长的倒计时,小时倒计时,最简的倒计时,还有秒表等等,应该可以满足 ...
- JavaScript倒计时脚本
JavaScript倒计时在Web中用得非常广泛,比如常见的团购啊.还有什么值得期待的事情,都可以用到倒计时.现在举了四个例子,比如时间长的倒计时,小时倒计时,最简的倒计时,还有秒表等等,应该可以满足 ...
- 比较全的JavaScript倒计时脚本[xyytit]
需要做一个功能,给特定的活动或者商品添加一个倒计时提示,在网上找了好些方法,总结了比较好的一些方法,以备后用: 1. 比较长时间的倒计时(如:距离2014年还有0年, 0月, 30天, 9小时, 41 ...
- JavaScript - 倒计时
http://www.helloweba.com/demo/loading/ WEB开发中经常会用到倒计时来限制用户对表单的操作,比如希望用户在一定时间内看完相关协议信息才允许用户继续下一步操作,又比 ...
- Javascript倒计时页面跳转
在js中实现页面定时跳转我们要使用setInterval或setTimeOut函数,还可以使用页面的meta实现. 例1: <script type="text/javascript& ...
- javascript 倒计时代码
<script language="javascript" type="text/javascript"> var interval = 1000; ...
- javascript 倒计时跳转.
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- javascript倒计时代码及倒计时弹窗
在前端开发中,难免会用到倒计时.如做的双十一活动,在距活动开始的半个月前需要做些宣传工作,需要告知用户优惠活动什么时候开始.这个时候就要用到倒计时,如在整站的某个页面提醒用户活动什么时候开始等.而在活 ...
- JavaScript倒计时
倒计时: 1.设置一个有效的结束日期 2.计算剩余时间 3.将时间转换成可用的格式 4.输出时钟数据作为一个可重用的对象 5.在页面上显示时钟,并在它到达0时停止 <div id="c ...
- [转载]在线考试javaScript倒计时
<script type="text/javascript"> /* ================== hi.baidu.com/coolinc === */ va ...
随机推荐
- python 环境下 安装 gdal
起因:需要做一个城市扩张的东西,然后再GitHub上下载了一段代码,不过作者没怎么说清楚要怎么用,早上琢磨半天,归结到我需要先下载python的gdal模块. 关于:搜索下来,发现gdal(Geosp ...
- 百战程序员9- IO流
1.IO是什么意思? data source是什么意思? IO:输入输出 data source:数据源 2.字节流和字符流有什么区别?输入流和输出流有什么区别? 分类 3.节点流和处理流有什么区别? ...
- Selenium 基础知识
被测产品是B/S 结构,那么推荐selenium selenium 并不是单纯的一个工具,他是一组工具的集合 1. selenium IDE 是嵌入到Firefox浏览器中的一个插件,实现简单的浏览器 ...
- js中this是什么?
this是js的一个关键字 指定一个对象然后去替代他 分两种情况函数内的this和函数外的this 函数内的this指向行为发生的主体 函数外的this都指向window函数内的this跟函数在哪定义 ...
- 2018.4.27 python使用过的第三方库
Flask flask-login flask-sqlalchemy flask-mail psutil lvm2py oss2 python-ldap pyudev pyOpenSSL urllib ...
- 19/03/13python学习笔记
1.变量命名 name1 = 1 name2 = "sunj" 2.命名变量的规则 (1.变量是字母.数字.下划线的组合(2.不能以数字开头(3.不能用关键词命名变量(4.变量中间 ...
- JavaScript 堆排序详解
堆通常实现为全完二叉树,二叉堆一般分为两种:最大堆和最小堆.堆排序就是通过将数组转换成最大堆结构再进行排序. // 原理:把数组转换成最大堆来排序.把堆顶的最大数取出,将剩余的堆继续调整为最大堆,再次 ...
- Oracle Sql Loader的学习使用
最近由于遇到oracle控制文件的使用,虽然不是很复杂,但是从来没有用过,专门花点时间看看.点击 这里 查看详细 1,概述: Sql Loader: 一个批量工具,将文件数据导入到数据库.可以导入一个 ...
- CentOS6.8 配置LVM
LVM是逻辑盘卷管理(Logical Volume Manager)的简称,Linux环境下对磁盘分区进行管理的一种机制,LVM是建立在硬盘和分区之上的一个逻辑层,来提高磁盘分区管理的灵活性. LVM ...
- Spring IOC(四)总结升华篇
本系列目录 Spring IOC(一)概览 Spring IOC(二)容器初始化 Spring IOC(三)依赖注入 Spring IOC(四)总结升华 =============正文分割线===== ...