js秒数倒计时
代码
/**
* 调用回调函数
* @param callback 回调函数体
* @param args 参数
*/
execCallback: function (callback, args) {
if (callback != null
&& typeof (callback) === 'function'
&& callback instanceof Function
&& Object.prototype.toString.call(callback) === '[object Function]'
) {
callback(args)
}
}
/**
* 倒计时
* @param options.time 开始倒计时的时间
* @param options.setup 每次倒计时回调
* @param options.end 结束时回调
*/
countdown: (options) => {
options.time = options.time || 0;
options.setup = options.setup || ((num) => console.info('countdown:setup:' + num));
options.end = options.end || ((num) => console.info('countdown:end:' + num));
if (!config.isEmpty(options.time)) {
// 倒计时
let num = parseInt(options.time);
let tim = setInterval(() => {
if (num <= 0) {
clearInterval(tim);
execCallback(options.end, num);
} else {
num--;
execCallback(options.setup, num);
}
}, 1000);
}
}
实例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>倒计时</title>
</head>
<body>
<h1 id="date"></h1>
<script>
/**
* 调用回调函数
* @param callback 回调函数体
* @param args 参数
*/
function execCallback(callback, args) {
if (callback != null
&& typeof (callback) === 'function'
&& callback instanceof Function
&& Object.prototype.toString.call(callback) === '[object Function]'
) {
callback(args)
}
}
/**
* 倒计时
* @param options.time 开始倒计时的时间
* @param options.setup 每次倒计时回调
* @param options.end 结束时回调
*/
function countdown(options) {
options.time = options.time || 0;
options.setup = options.setup || ((num) => console.info('countdown:setup:' + num));
options.end = options.end || ((num) => console.info('countdown:end:' + num));
// 倒计时
let num = parseInt(options.time);
let tim = setInterval(() => {
if (num <= 0) {
clearInterval(tim);
execCallback(options.end, num);
} else {
num--;
execCallback(options.setup, num);
}
}, 1000);
}
// 使用
countdown({
time: 15,
setup: (num) => {
document.getElementById("date").innerHTML = `时间末日将在 ${num}秒 后来临！！！`;
},
end: (num) => {
document.getElementById("date").innerHTML = "哈哈，骗你的。";
}
});
</script>
</body>
</html>
js秒数倒计时的更多相关文章
- js秒数转换时分秒方法
今天写一个东西的时候 发现给出的是秒数.实在找不到直接的工具去转换. 就去网上找了个转换方法(有现成的就不写了,以后再简化下代码). function formatSeconds(value) { v ...
- js实现页面的秒数倒计时
<button name="vcode_mail" class="btn btn-default" type="button" id= ...
- js 秒数格式化
function formatSeconds(value) { var theTime = parseInt(value);// 秒 var theTime1 = 0;// 分 var theTime ...
- js 秒的倒计时，将秒转换为时分秒显示
在VUE 中的使用 {{moveMin}} // ...methods: { // 补0 formatBit (val) { val = +val ? val : ' + val }, // 秒转时分 ...
- 微信小程序中利用时间选择器和js无计算实现定时器（将字符串或秒数转换成倒计时）
转载注明出处 改成了一个单独的js文件,并修改代码增加了通用性,点击这里查看 今天写小程序,有一个需求就是用户选择时间,然后我这边就要开始倒计时. 因为小程序的限制,所以直接选用时间选择器作为选择定时 ...
- JS定时跳转URL并输出剩余秒数
1. [代码][JavaScript]代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <scrip ...
- js动态增加秒数（自动，手动）
//获取当前的日期及时间Date var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.get ...
- js timestamp 转换 date 和 将秒数整理为时分秒格式
// 获得的后台json 时间格式转化 例如:1520305366000 转化为XXXX-XX-XX类似这种 function timeStamp2String(time){ var datetim ...
- js 时分秒与秒数的转换
1. 时间戳 格式化为 时分秒(00:00:00) /** * 时间秒数格式化 * @param s 时间戳(单位:秒) * @returns {*} 格式化后的时分秒 */ var sec_to_t ...
随机推荐
- 双向绑定Proxy VS Object.defineProperty
Vue3.0的双向绑定将使用Proxy代替Object.defineProperty,据尤大说,速度提升了1倍. 本文我们来探讨一下Proxy对比Object.defineProperty究竟有哪些优 ...
- Java高级项目实战02：客户关系管理系统CRM系统模块分析与介绍
本文承接上一篇:Java高级项目实战之CRM系统01:CRM系统概念和分类.企业项目开发流程 先来CRM系统结构图: 每个模块作用介绍如下: 1.营销管理 营销机会管理:针对企业中客户的质询需求所建立 ...
- Android中使用Canvas和Paint绘制一个安卓机器人
场景 在Android中画笔使用Paint类,画布使用Canvas类来表示. 绘图的基本步骤 首先编写一个继承自View的自定义View类,然后重写其onDraw方法,最后把自定义的view添加到ac ...
- windows快捷键记录
-1: 装完iis, run -> inetmgr 弹出iis管理器 0.按住Shift键右击鼠标打开命令行窗口 1.ODBC数据源管理器run->odbcad32 2.计算机管理(查看设 ...
- opencv —— moments 矩的计算（空间矩/几何矩、中心距、归一化中心距、Hu矩）
计算矩的目的 从一幅图像计算出来的矩集,不仅可以描述图像形状的全局特征,而且可以提供大量关于该图像不同的几何特征信息,如大小,位置.方向和形状等.这种描述能力广泛应用于各种图像处理.计算机视觉和机器人 ...
- clr via c# 泛型
1,类型对象,对于应用程序的各种类型创建的对象叫做类型对象:Type object:对于泛型类型参数的类型,CLR同样也会创建内部类型对象,适用于 引用类型 值类型 接口类型 委托类型 具有泛型类型参 ...
- HTML块级、行级元素，特殊字符，嵌套规则
如果介绍HTML网页基本标签的嵌套规则,首先要说的就是元素的分类.元素可以划分为块级元素和行级元素,块级元素是什么?它可以独占一行,可以设置宽高度,默认是100%:行级元素与之相反,它的内容决定它的宽 ...
- 【redis】基于redis实现分布式并发锁
基于redis实现分布式并发锁(注解实现) 说明 前提, 应用服务是分布式或多服务, 而这些"多"有共同的"redis"; (2017-12-04) 笑哭, 写 ...
- expect: spawn id exp6 not open while executing "expect eof"
1.expect是基于tcl演变而来的,所以很多语法和tcl类似 基本的语法如下所示:1.1 首行加上/usr/bin/expect1.2 spawn: 后面加上需要执行的shell命令,比如说spa ...
- Uva10791 唯一分解定理模板
唯一分解定理: Uva10791 题意: 输入整数n,要求至少两个正整数,使得他们的最小公倍数为n,且这些整数的和最小 解法: 首先假设我们知道了一系列数字a1,a2,a3……an,他们的LCM是n, ...