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.rhkb.cn/news/205073.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JAVA小游戏简易版王者荣耀

第一步是创建项目 项目名自拟 第二部创建个包名 来规范class 然后是创建类 GameFrame 运行类 package com.sxt; import java.awt.Graphics; import java.awt.Image; import java.awt.Toolkit; import java.awt.event.ActionEvent; import java.awt.event.ActionListener;…

【企业微信连接问题】

1、个人可以创建企业微信的企业账号么&#xff1f; 答&#xff1a;可以的&#xff0c;只是没法认证。不过基础的功能还是有的。 注册步骤&#xff1a;企业微信注册步骤 2、集简云链接企业微信&#xff0c;在授权之后&#xff0c;找不到集简云怎么办&#xff1f; 答&#xff1a…

CSS特效021:蛇形左右扭动的效果

CSS常用示例100专栏目录 本专栏记录的是经常使用的CSS示例与技巧&#xff0c;主要包含CSS布局&#xff0c;CSS特效&#xff0c;CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点&#xff0c;CSS特效主要是一些动画示例&#xff0c;CSS花边是描述了一些CSS…

vue中下载文件后无法打开的坑

今天在项目开发的时候临时要添加个导出功能我就写了一份请求加导出得代码&#xff0c; 代码&#xff1a; //导出按钮放开exportDutySummarizing (dataRangeInfo) {const params {departmentName: dataRangeInfo.name,departmentQode: dataRangeInfo.qode}//拼接所需得urlcons…

策略算法与Actor-Critic网络

策略算法 教程链接 DataWhale强化学习课程JoyRL https://johnjim0816.com/joyrl-book/#/ch7/main 策略梯度 与前面的基于价值的算法不同&#xff0c;这类算法直接对策略本身进行近似优化。 在这种情况下&#xff0c;我们可以将策略描述成一个带有参数 θ θ θ的连续函数…

与 PCIe 相比,CXL为何低延迟高带宽?

文章目录 前言1. LatencyPCIE 生产者消费则模型结论Flit 包PCIE/CXL.ioCXL.cace & .mem总结 2. BandWidth常见开销CXL.IO Link efficiencyPCIe Link efficiencyCXL.IO bandwidthCXL.mem/.cache bandwidth 参考 前言 CXL 规范里没有具体描述与PCIe 相比低延时高带宽的原因&…

Java基于springoot开发的企业招聘求职网站

演示视频&#xff1a; https://www.bilibili.com/video/BV1xw411n7Tu/?share_sourcecopy_web&vd_source11344bb73ef9b33550b8202d07ae139b 技术&#xff1a;springootmysqlvuejsbootstrappoi制作word模板 主要功能&#xff1a;求职者可以注册发布简历&#xff0c;选择简…

Echarts+vue+java+mysql实现数据可视化

一、折线图&#xff0c;柱状图 https://echarts.apache.org/zh/index.html echarts 官网 更多配置项可以去官网查看 在开始项目之前&#xff0c;确保您已经安装了以下工具和技术&#xff1a; MySQL 数据库&#xff1a;用于存储和管理数据。Java 后端&#xff1a;用于创建后端应…

解决api-ms-win-crt-runtime-l1-1-0.dll丢失的问题,全是干货分享

今天我的电脑中突然出现关于“api-ms-win-crt-runtime-l1-1-0.dll”的错误提示&#xff0c;关闭提示后再次打开程序依然不能正常打开&#xff0c;出现这样的问题突然不知道是因为什么&#xff0c;于是就去了解了关于出现api-ms-win-crt-runtime-l1-1-0.dll错误的问题&#xff0…

elFinder ZIP 参数注入导致命令注入 (CVE-2021-32682)

漏洞描述 elFinder 是一个用于 Web 的开源文件管理器&#xff0c;使用 jQuery UI 用 JavaScript 编写。 在 elFinder 2.1.48 及更早版本中发现一个参数注入漏洞。此漏洞可能允许攻击者在托管 elFinder PHP 连接器的服务器上执行任意命令&#xff0c;即使配置最少也是如此。这…

matlab画双坐标图的样式

matlab画双坐标图的样式 %% clc,clear,close all; t0:0.1:9*pi; figure; [AX,Ha,Hb]plotyy(t,sin(t),t,exp(t)); % 绘图并创建句柄 % ----------------- 设置刻度 set(AX(1),yTick,[-1.250:0.25:1.25]) % 设置左边Y轴的刻度 set(AX(2),yTick,[0:50:350]) …

Alivia 1.0 正式版来了,打造更懂企业的营销「工具箱」

上周&#xff0c;「Whale 帷幄」2023 秋季发布会圆满落下帷幕。发布会上&#xff0c;帷幄创始人 & CEO 叶生晅重磅发布了专为营销和销售设计的企业级 AGI 工具——Alivia 1.0 正式版&#xff0c;获得了广泛的反响和好评。 在这一年里&#xff0c;帷幄在 AGI 产品创新及落地…

Redis 命令处理过程

我们知道 Redis 是一个基于内存的高性能键值数据库, 它支持多种数据结构, 提供了丰富的命令, 可以用来实现缓存、消息队列、分布式锁等功能。 而在享受 Redis 带来的种种好处时, 是否曾好奇过 Redis 是如何处理我们发往它的命令的呢&#xff1f; 本文将以伪代码的形式简单分析…

基于SSM的高校学生实习管理系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

Unity之ARFoundation如何实现BodyTracking人体跟踪

前言 ARBodyTracking,就是指通过手机AR扫描并精确的捕获人物的肢体部位的技术。如下图所示 这项技术目前是有苹果的ARKit提供,苹果的body tracking 功能需要使用配备 TrueDepth 摄像头的设备,配备 A12 仿生芯片、运行 iOS 13 或更高版本的设备,比如 iPhone X 及更新机型。…

可以在电脑桌面展示工作计划表的软件

很多上班族都表示自己在工作时&#xff0c;会面临大量且复杂的工作任务&#xff0c;这时候就会拖延工作&#xff0c;或者感觉时间不够用&#xff0c;所以需要有明确的工作计划来指导自己如何分类时间和精力&#xff0c;确保每项工作任务都能够按时完成。如果需要制定每天的工作…

YashanDB入选2023年世界互联网大会领先科技奖成果集《科技之魅》

近日&#xff0c;由深圳计算科学研究院自主研发的“崖山数据库系统YashanDB”入编2023年世界互联网大会领先科技奖成果集《科技之魅》。此次入选&#xff0c;充分彰显了YashanDB在数据库技术领域的突破性创新成果。 《科技之魅》是世界互联网大会领先科技奖的重要成果&#xff…

万字解析设计模式之桥接模式、外观模式

一、桥接模式 1.1概述 桥接模式是一种结构型设计模式&#xff0c;它的作用是将抽象部分和实现部分分离开来&#xff0c;使它们能够独立地变化。这样&#xff0c;抽象部分和实现部分可以分别进行扩展&#xff0c;而不会相互影响。它是用组合关系代替继承关系来实现&#xff0c;…

双指针算法(题目与答案讲解)

文章目录 题目移动零复写零两数之和N数之和(>2个数) 答案讲解移动零复写零两数之和N数之和 题目 力扣 移动零 1、移动零:题目链接 复写零 2、复写零:题目链接 两数之和 3、两数之和题目链接 N数之和(>2个数) 4、N数之和(三个数、四个数) 三个数:题目链接 四个数题目链接…

Windows10免安装PostgreSQL

1. PostgreSQL简介2. 下载3. 安装环境4. 安装 4.1. 初始化数据库4.2. 启动数据库4.3. 注册服务4.3. 卸载服务 1. PostgreSQL简介 PostgreSQL 是一种特性非常齐全的自由软件的对象-关系型数据库管理系统&#xff0c;是以加州大学计算机系开发的 POSTGRES 4.2版本为基础的对象关…