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 ...
随机推荐
- Linux文本界面字体颜色修改
环境 基于centos 6.5 在文本界面 系统目录的字体颜色是 黑底蓝字 严重看不清楚,对此作出修改 使用 vi 编辑 进入 /etc/DIR_COLORS 找到“DIR 01;34 # ...
- Vue 路由&组件懒加载（按需加载）
当打包构建应用时,Javascript 包会变得非常大,影响页面加载速度.使用Vue路由懒加载和组件懒加载可以提升页面加载速度,减少白屏时间,提升用户体验. 用法有如下三种:(路由懒加载与组件懒加载用 ...
- Apache Solr JMX服务远程代码执行漏洞复现
0x00 漏洞介绍 该漏洞源于默认配置文件solr.in.sh中的ENABLE_REMOTE_JMX_OPTS配置选项存在安全风险. Apache Solr的8.1.1和8.2.0版本的自带配置文件s ...
- mysql 报错：Error Code: 1175. You are using safe update mode and you tried to update a table without a WHERE that uses a KEY column. To disable safe mode, toggle the option in Preferences
目录 #事故现场 #解决方法 #事故现场 mysql执行update操作报错: sql如下: update psmp.Users set name='Jack' where name='Lily'; ...
- java自学：从零基础到入门系列--java环境变量的配置JDK的下载安装图解
一.首先去官网下载 Java 语言的软件开发工具包–JDK,下载JDK8即可,下载地址为:https://www.oracle.com/technetwork/java/javase/download ...
- centos7下NAT模式下设置静态ip
1.在虚拟网络编辑器下查看子网IP.子网掩码以及网关 2.在Linux系统中进入 /etc/sysconfig/network-scripts目录下,编辑ifcfg-ens33文件,改成下面的内容: ...
- IBM x3250m5安装redhat 6.5 加载raid卡驱动
原文地址:http://www.i5i6.net/post/118.html 1. 下载对应raid卡驱动 for redhat6.5 x64(如本次x3250 m5 c100阵列卡驱动 lsi_dd ...
- BUUCTF 部分wp
目录 Buuctf crypto 0x01传感器 提示是曼联,猜测为曼彻斯特密码 wp:https://www.xmsec.cc/manchester-encode/ cipher: 55555555 ...
- cf1041E
题意:要求你构造一棵树,树中每一个节点都有一个编号(互不相同),告诉你删除掉每一条边之后的两个联通分量中节点标号的最大值,要求你输出这颗树,不存在就输出NO 题解:可以发现这颗树实际上是一个序列,我们 ...
- SpringBoot从1.5.1→2.2.4项目加包扫雷三：org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter已过时
@Configuration@Slf4j@PropertySource({"classpath:/config.properties"})public class MyWebApp ...