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 ...
随机推荐
- light oj1170 - Counting Perfect BST卡特兰数
1170 - Counting Perfect BST BST is the acronym for Binary Search Tree. A BST is a tree data structur ...
- 一文彻底搞懂 TCP三次握手、四次挥手过程及原理
原创文章出自公众号:「码农富哥」,欢迎收藏和关注,如转载请注明出处! TCP 协议简述 TCP 提供面向有连接的通信传输,面向有连接是指在传送数据之前必须先建立连接,数据传送完成后要释放连接. 无论哪 ...
- 【题解】 2月19日 厦门双十中学NOIP2014模拟D2 T2 采药人接水果
[问题描述] 采药人虽然 AFO(SU),但他在闲暇的时候还是可以玩一玩接水果(cat)的.但他渐渐发现 cat 好像有点太弱智.于是他不想浪费他的智商,于是决定写一个程序帮他玩. cat 是这样玩的 ...
- Linux 网络客户端工具
ping命令 发送ICMP协议的echo request给目标主机 常用选项: 从指定的本机接口发送ICMP:-I INTERFACE 本机有多个接口(网卡),可以选择从哪个接口发:-I(大写i) 接 ...
- export和export default的区别
export和export default的区别一.export的使用1.直接输出export let words = ‘hello world!!!’export function output() ...
- Vue中使用NProgress实现进度条
简介 NProgress是页面跳转或者发生异步请求是浏览器顶部的进度条 GitHub地址:https://github.com/rstacruz/nprogress 在线演示地址:http://ric ...
- C# WPF可拖拽的TabControl
微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. C# WPF可拖拽的TabControl 阅读导航 本文背景 代码实现 本文参考 源码 1. ...
- SQL中的real、float、decimal、numeric数据类型区别
概述: 浮点数据类型包括real型.float型.decimal型和numeric型.浮点数据类型用于存储十进制小数. 在SQL Server 中浮点数值的数据采用上舍入(Round up)的方式进行 ...
- 笔记本磁盘中OEM分区的使用
(1).开机进入系统前,按F8,进入Windows 10的高级启动选项,选择“修复计算机”. (2).选择键盘输入方法. (3).如果有管理员密码,需要输入:如果没有设置密码,直接“确定”即可. (4 ...
- P1967 货车运输【LCA】【生成树】
题目描述 A 国有 nn 座城市,编号从 11 到 nn,城市之间有 mm 条双向道路.每一条道路对车辆都有重量限制,简称限重. 现在有 qq 辆货车在运输货物, 司机们想知道每辆车在不超过车辆限重的 ...