JS 倒计时方法(可改造)

news2024/11/26 23:23:46

起因: 写好备用。

代码:

// 直接把方法写在了原型上,通过原型调用
/**
 * 倒计时
 * 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.coloradmin.cn/o/1267240.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2021年2月24日 Go生态洞察:Contexts和Structs的深度解析

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

数字图像处理(实践篇)十三 数据增强之给图像添加噪声!

目录 一 涉及的函数 二 实践 一 涉及的函数 skimage.util.random_noise( ) skimage.util.random_noise(image, modegaussian, seedNone, clipTrue, **kwargs) 函数的功能&#xff1a;为浮点型图片添加各种随机噪声。 输入&#xff1a; ①image&#xff1a;输入图像&…

数据结构第五课 -----二叉树的代码实现

作者前言 &#x1f382; ✨✨✨✨✨✨&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f382; ​&#x1f382; 作者介绍&#xff1a; &#x1f382;&#x1f382; &#x1f382; &#x1f389;&#x1f389;&#x1f389…

代码混淆的原理和方法详解

代码混淆的原理和方法详解摘要移动App的广泛使用带来了安全隐患&#xff0c;为了保护个人信息和数据安全&#xff0c;开发人员通常会采用代码混淆技术。本文将详细介绍代码混淆的原理和方法&#xff0c;并探讨其在移动应用开发中的重要性。 引言随着移动应用的普及&#xff0c;…

卷轴模式:金融领域的新趋势

卷轴模式在金融领域逐渐崭露头角&#xff0c;成为一种新型的投资策略。这种模式基于完成任务或达成特定目标来获取积分&#xff0c;利用这些积分进行投资或获取现实物品。它不同于传统的资金盘&#xff0c;而是以一种更稳健的方式运作&#xff0c;避免了资金盘的风险。 一、卷轴…

用BootLoader更新S32K144的固件

1、工具&#xff1a;MDK及S32K144的支持包 创芯科技的USB转CAN 及 驱动 Jlink烧写器及驱动 链接&#xff1a;https://pan.baidu.com/s/1jGRdGVEzrO86CpP5UQ2fYQ 提取码&#xff1a;nihd IAP固件升级上位机 2、BootLoader底层文件 a、用MDK打开BootLoader工程 b、更改配置…

《golang设计模式》第三部分·行为型模式-09-策略模式(Strategy)

文章目录 1. 概述1.1 作用1.1 角色1.2 类图 2. 代码示例2.1 设计2.2 代码2.3 类图 1. 概述 1.1 作用 策略&#xff08;Strategy&#xff09;是用于封装一组算法中单个算法的对象&#xff0c;这些策略可以相互替换&#xff0c;使得单个算法的变化不影响使用它的客户端。 1.1 …

C# API 文档自动生成器

文章目录 前言SandcastleDocFX 前言 最近要和别人交际&#xff0c;就要给API文档&#xff0c;但是感觉API文件手动写有点麻烦&#xff0c;想着怎么弄一个自动API文档生成 Sandcastle 折腾了两小时&#xff0c;好像不太好用 微软开源全新的文档生成工具DocFX DocFX 既然不好…

私域流量灵魂三问

私域流量灵魂三问: 1、是什么&#xff1f; 2、为什么做&#xff1f; 3、怎么做&#xff1f;

嵌入式LCD软件驱动流程与调试

前言 LCD屏在嵌入式中是应用比较广泛的&#xff0c;很多电子产品都是需要用到它来进行人机交互&#xff0c;那么工作中我们就少不了要对lcd进行软件驱动和调试。调试LCD需要掌握的学问有很多&#xff0c;没有一定的调试经验就很难对问题进行分析并解决。 博文推荐 LCD屏接口与…

网络协议系列:TCP三次握手,四次挥手的全过程,为什么需要三次握手,四次挥手

TCP三次握手&#xff0c;四次挥手的全过程&#xff0c;为什么需要三次握手&#xff0c;四次挥手 一. TCP三次握手&#xff0c;四次挥手的全过程&#xff0c;为什么需要三次握手&#xff0c;四次挥手前言TCP协议的介绍三次握手三次握手流程&#xff1a;1. A 的 TCP 向 B 发送 连…

LVS-NAT实验

实验前准备&#xff1a; LVS负载调度器&#xff1a;ens33&#xff1a;192.168.20.11 ens34&#xff1a;192.168.188.3 Web1节点服务器1&#xff1a;192.168.20.12 Web2节点服务器2&#xff1a;192.168.20.13 NFS服务器&#xff1a;192.168.20.14 客户端&#xff08;win11…

速速报名!请查收 2023 龙蜥操作系统大会超全指南

亲爱的小伙伴们&#xff0c;大家好&#xff01;我是大家的老朋友小龙&#xff01;自 2023 龙蜥操作系统大会宣布启动以来&#xff0c;小龙收到了来自四面八方的诸多期待和小心心。首届龙蜥大会正如火如荼地进行中&#xff0c;为表示对关注社区的每一位小伙伴由衷的感谢&#xf…

排序算法基本原理及实现1

&#x1f4d1;打牌 &#xff1a; da pai ge的个人主页 &#x1f324;️个人专栏 &#xff1a; da pai ge的博客专栏 ☁️宝剑锋从磨砺出&#xff0c;梅花香自苦寒来 &#x1f4d1;插入排序 &#x1f4…

人工智能即将彻底改变你使用计算机的方式

文章目录 每个人的私人助理“Clippy 是一个机器人&#xff0c;而不是特工。”卫生保健“一半需要心理健康护理的美国退伍军人没有得到治疗。”教育生产率娱乐和购物科技行业的冲击波技术挑战隐私和其他重大问题 今天我仍然像保罗艾伦和我创办微软时一样热爱软件。但是&#xff…

Linux系统之一次性计划任务at命令的基本使用

Linux系统之一次性计划任务at命令的基本使用 一、at命令介绍二、at命令的使用帮助2.1 at命令的help帮助信息2.2 at命令的语法解释 三、at命令的日常使用3.1 立即执行一次性任务3.2 指定时间执行一次性任务3.3 查询计划任务3.4 其他指定时间用法3.5 删除已经设置的计划任务3.6 显…

C语言——计算Fibonacci数列

方式一 for循环 (20位) #define _CRT_SECURE_NO_WARNINGS 1#include<stdio.h> int main() {int n;int a[20]{1,1};for ( n 1; n <20; n){a[n]a[n-2]a[n-1];}for ( n 0; n < 20; n){if(n%50)printf("\n");printf("%12d ",a[n]);}return 0; …

【每日一题】无限集中的最小数字

文章目录 Tag题目来源题目解读解题思路方法一&#xff1a;有限集合方法二&#xff1a;有序集合 写在最后 Tag 【有序集合】【2023-11-29】 题目来源 2336. 无限集中的最小数字 题目解读 设计一个类实现移除无限集中的最小整数以及向该无限集中增加一个原集合中不存在的整数。…

【JavaEE初阶】 HTTP响应报文

文章目录 &#x1f332;序言&#x1f38d;200 OK&#x1f340;404 Not Found&#x1f384;403 Forbidden&#x1f334;405 Method Not Allowed&#x1f38b;500 Internal Server Error&#x1f333;504 Gateway Timeout&#x1f332;302 Move temporarily&#x1f38d;301 Move…

vs2012切换版本后WebUI项目加载失败,右键重新加载提示已经在解决方案中打开了具有该名称的项目

问题描述 vs2012切换版本后&#xff0c;回到主版本web项目加载失败&#xff0c;右键重新加载提示已经在解决方案中打开了具有该名称的项目 解决办法 打开根目录.csproj文件&#xff0c;找到第一个ProectTypeGuides节点&#xff0c;删除掉。然后关闭vs,重新打开此项目即可。这…