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 ...
随机推荐
- Rip 动态路由协议
路由信息协议(RIP) 是内部网关协议IGP中最先得到广泛使用的协议. Routing Information Protocol) RIP是一种分布式的基于距离矢量的路由 ...
- mqttnet3.0用法
.net常用的mqtt类库有2个,m2mqtt和mqttnet两个类库 当然了,这两个库的教程网上一搜一大把 但mqttnet搜到的教程全是2.7及以下版本的,但3.0版语法却不再兼容,升级版本会导致 ...
- a标签没有闭合引起自动插入很多a标签的问题
a标签中间没有内容的情况下,很容易忽略闭合 a标签一定要闭合,否则会在后面每个div后面插入同一个a标签 要以如下形式闭合: <div class="v5-index-containe ...
- typeof和类型转换
编程形式 ① 面向过程 ② 面向对象 ③ Js既面向过程又面向对象 typeof(数据) 1)typeof(数据)返回该数据是什么类型的 2)写法: ① typeof(数据) ② typeof 数据 ...
- 基于Travis CI实现 Gitbook在 Github 和 Coding 的同步部署
前言 最近发现自己的博客在使用vpn的情况下打开很慢,百度站点也抓取失败,于是将自己的博客借助hexo-deploy 插件很容易同步部署到了coding上.只需要在你的hexo配置文件_config. ...
- 实验一 GIT 代码版本管理
实验一 GIT 代码版本管理 实验目的: 1)了解分布式分布式版本控制系统的核心机理: 2)熟练掌握git的基本指令和分支管理指令: 实验内容: 1)安装git 2)初始配置git ,git ini ...
- flex布局小结
2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持. Flex 是 Flexible Box 的缩写,意为&qu ...
- SVN状态图标不显示的解决办法
第一步:检查设置 右键->TortoiseSVN->setting->Icon Overlays->Status cache->default/Shell.或者 右键-& ...
- [MySQL] mysql索引的长度计算和联合索引
1.所有的索引字段,如果没有设置not null,则需要加一个字节.2.定长字段,int占4个字节.date占3个字节.char(n)占n个字符.3.变长字段,varchar(n),则有n个字符+两个 ...
- 论AMD内核如何使用Android Studio虚拟机
其实之前和老师求证过AMD内核要用虚拟机的话应求助第三方模拟器(不然速度太慢)或直接使用真机测试,当时拿着虚拟机的报错简单搜索了下只翻到了一个用谷歌第三方工具的(检索时关键词不对的锅),觉得麻烦就没去 ...