JS 倒计时方法(可改造)

起因: 写好备用。

代码:

// 直接把方法写在了原型上,通过原型调用
/**
 * 倒计时
 * time_str String  到期时间('2023-11-28 16:50:00')
 * dom_obj  Object  需要显示的倒计时的dom对象
 */
Date.prototype.countdown = function (time_str, dom_obj) {
    let timer = setInterval(function () {
        let remaining = new Date(time_str).getTime() - new Date().getTime();
        if (remaining > 0) {
            // 计算
            let day = Math.floor(remaining / 1000 / 60 / 60 / 24);
            let hour = Math.floor((remaining / 1000 / 60 / 60) % 24);
            let min = Math.floor((remaining / 1000 / 60) % 60);
            let sec = Math.floor((remaining / 1000) % 60);

            // 不需要补零的话,这部分就可以不用了
            day = day < 10 ? "0" + day : day;
            hour = hour < 10 ? "0" + hour : hour;
            min = min < 10 ? "0" + min : min;
            sec = sec < 10 ? "0" + sec : sec;

            dom_obj.innerHTML = `剩余:${day}${hour}小时 ${min}分钟 ${sec}`;
        } else {
            dom_obj.innerHTML = `剩余:0天 0小时 0分钟 0秒`;
            // 关闭计时器
            clearInterval(timer);
        }
    }, 1000);
}

// 获取dom对象,传递到方法中
var div = document.getElementsByTagName('div')[0];
new Date().countdown('2023-11-28 16:50:00', div);

调用方法:

// 获取dom对象
var div = document.getElementsByTagName('div')[0];
// 从原型上调用方法
new Date().countdown('2023-11-28 16:50:00', div);

效果:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/200377.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【古月居《ros入门21讲》学习笔记】13_服务数据的定义与使用

目录 说明&#xff1a; 1. 服务模型 2. 实现过程&#xff08;C&#xff09; 自定义服务数据 Person.srv文件内容 Person.srv文件内容说明 编译配置 在package.xml文件中添加功能包依赖 在CMakeLists.txt中添加编译选项 编译生成语言相关文件 创建服务器代码&#xf…

python获取系统当前进程数和最大进程数

参考&#xff1a; https://blog.51cto.com/u_16213345/7115864 https://www.baidu.com/s?wdpython%20%E8%8E%B7%E5%8F%96%E7%B3%BB%E7%BB%9F%E5%BD%93%E5%89%8D%E8%BF%9B%E7%A8%8B%E6%95%B0%E5%92%8C%E6%9C%80%E5%A4%A7%E8%BF%9B%E7%A8%8B%E6%95%B0&rsv_spt1&rsv_iqid…

2023年国内主流的低代码平台

低代码开发平台&#xff08;Low-Code Development Platform, LCDS&#xff09;为企业和开发者提供了高效的应用开发方式。这些平台使得开发者可以通过简化的设计界面快速创建和部署应用&#xff0c;大大提高了开发效率并降低了开发成本。 伴随数字化转型推进&#xff0c;选购低…

外汇天眼:外汇市场中的“双向交易”是什么意思?

说到外汇市场&#xff0c;总免不了提到它双向交易的优势&#xff0c;很多新手会对这一点有所疑问&#xff0c;今天我们就帮大家解决这一个疑问。 何谓双向交易&#xff1f; 金融市场上&#xff0c;交易者最常接触到的股票&#xff0c;多属于单向交易。 单向交易的模式便是「先…

1688 API接口的介绍丨商品详情页接口丨搜索商品列表接口

1688&#xff0c;作为中国领先的B2B电子商务平台&#xff0c;为全球的买家和卖家提供了一站式的采购和销售服务。而它的API接口&#xff0c;更是开放了1688平台的核心功能&#xff0c;让开发者能够根据自己的需求来定制和扩展商业应用。 1688 API接口的介绍 1688 API接口提供…

初刷leetcode题目(11)——数据结构与算法

&#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️Take your time ! &#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️…

ntopng如何将漏洞扫描与流量监控相结合,以提高网络安全性

来源&#xff1a;艾特保IT 虹科干货 | ntopng如何将漏洞扫描与流量监控相结合&#xff0c;以提高网络安全性 欢迎关注虹科&#xff0c;为您提供最新资讯&#xff01; ntopng为人所知的“身份”是被动流量监控。然而&#xff0c;如今的ntopng6.0也进化出主动监控功能来&#xf…

正则表达式及文本三剑客grep,awk,sed

目录 正则表达式 前瞻 代表字符 表示次数 位置锚定 分组或其他 grep 选项 范例 awk 前瞻 awk常见的内置变量 范例 sed 前瞻 sed格式 范例 搜索替代 格式 范例 分组后项引用 格式 范例 正则表达式 前瞻 通配符&#xff1a;匹配的是文件名 正则表达式&a…

【带头学C++】----- 八、C++面向对象编程 ---- 8.8 内联函数 inline

目录 8.8 内联函数 inline 8.8.1 声明内联函数 8.8.2 宏函数与内联函数的区别 8.8.3 使用内联函数需注意 8.9 函数重载 8.9.1 什么是函数重载 8.9.2 函数重载的条件 8.9.3 函数重载底层原理是如何实现的&#xff1f; 8.8 内联函数 inline 在C中&#xff0c;inline是一个…

docker镜像管理命令

镜像管理命令 docker build : 命令用于使用 Dockerfile 创建镜像 docker build [OPTIONS] PATH | URL | - OPTIONS说明&#xff1a; --add-host :向hosts文件中添加自定义 host:ip 映射 --build-arg[] :设置镜像创建时的变量&#xff1b; --cache-from :指定镜像用作当前构建…

今日份推荐、无广告、超实用的5款软件

​ 大家好&#xff0c;我又来啦&#xff0c;今天给大家带来的几款软件&#xff0c;共同特点都是无广告、超实用&#xff0c;大家观看完可以自行搜索下载哦。 1.键盘锁定工具——Iwck ​ Iwck是一款简单实用的键盘锁定工具&#xff0c;可以让你在需要的时候暂时停止键盘的所有…

P27 C++this 关键字

目录 前言 01 this关键字的引入 02 this关键字 前言 本章的主题是 C 中的 this 关键字。 以前第一次学qt的时候就遇到了this关键字&#xff0c;那时候还不是很会C&#xff0c;所以有点懵&#xff0c;现在我们就来讲解以下C中的this关键字 C 中有一个关键字 this&#xff0…

dockerfile文件:copy和add 异同

相同点&#xff1a; 复制文件或目录&#xff1a; 无论是 COPY 还是 ADD 都可以将文件或目录从构建上下文复制到容器中。支持源路径和目标路径&#xff1a; 两者都需要指定源路径和目标路径&#xff0c;用于指定要复制的文件或目录在主机上的位置以及在容器中的目标路径。 不同…

新生儿脐带护理的全面指南

引言&#xff1a; 新生儿脐带护理是父母在宝宝刚刚来到这个世界时面临的一项重要任务。正确的护理有助于预防感染&#xff0c;促进脐带迅速脱落&#xff0c;确保宝宝的健康。本文将深入探讨新生儿脐带护理的注意事项&#xff0c;为父母提供详尽的指南&#xff0c;以确保这个过…

10年码农经验分享:程序员接外包私活的6大平台和网站

关于程序员接私活&#xff0c;社会各界说法不一&#xff0c;如果你确实急用钱&#xff0c;价格又合适&#xff0c;那就去做。 程序员接私活已经是很平常的事情了&#xff0c;很多程序员&#xff0c;通过做私活承接项目&#xff0c;将自己的程序能力转化为收入。 不过&#xf…

【工具使用】Keil常用的调试操作整理介绍

目录 一、软件调试使用 1.1 基本调试操作 1.2 调试窗口 二、注意事项 一、软件调试使用 1.1 基本调试操作 上文已经说过在线调试和模拟调试的配置过程&#xff0c;但无论是在线还是模拟调试&#xff0c;调试技巧工具的使用都是一样的。 点击红色d&#xff0c;进入调试 可…

AtCoder Beginner Contest 330 A~F

A.Counting Passes(暴力) 题意&#xff1a; 给定 n n n个学生的分数&#xff0c;以及及格分 x x x &#xff0c;问多少人及格了。 分析&#xff1a; 暴力枚举&#xff0c;依次判断每个学生的分数即可。 代码&#xff1a; #include <bits/stdc.h> using namespace s…

Wordpress自动定时发布怎么开通-Wordpress怎么自动发布原创文章

在当今数字化时代&#xff0c;博客已经成为许多人分享观点、经验和知识的重要平台。然而&#xff0c;对于博主们来说&#xff0c;每天按时发布一篇又一篇的文章可能是一项具有挑战性的任务。为了解决这个问题&#xff0c;一些创新的工具应运而生&#xff0c;其中包括WordPress的…

Doris_Doris导入常见问题

Doris数据导入错误 &#xff1a;the length of input is too larger than schema 可能原因&#xff1a;varchar长度设置过短 Doris表字段乱序 导入palo表中的csv本身无schema信息&#xff0c;csv与palo表字段顺序必须一致&#xff0c;否则会错乱 Doris数据文件中字段比表字段…

每日一练:约瑟夫生者死者小游戏

1. 问题描述 约瑟夫问题&#xff08;Josephus problem&#xff09;是一个经典的数学和计算机科学问题&#xff0c;源于犹太历史学家弗拉维奥约瑟夫斯&#xff08;Flavius Josephus&#xff09;的著作《犹太战记》。问题的描述如下&#xff1a;   在这个问题中&#xff0c;有n…
最新文章