js倒计时案例

article/2025/11/4 16:07:26

核心思想:用输入时间的时间戳减去现在时间的时间戳即为倒计时的时间总毫秒数,实现js的倒计时效果

 注:+new Date()

js在某个数据类型前使用"+",是为了将该数据类型转化为Number型;

 new Date()返回的是标准时间:

 +new Date()返回的是时间的总的秒数

 代码实现:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">div {margin: 100px;}span {display: inline-block;height: 30px;width: 30px;background-color: #000000;color: #FFFFFF;line-height: 30px;text-align: center;}</style></head><body><div><span class="hour"></span><span class="minute"></span><span class="second"></span></div><script type="text/javascript">//1、获取元素var hour = document.querySelector('.hour');var minute = document.querySelector('.minute');var second = document.querySelector('.second');var inputTime = +new Date('2022-8-6 01:00:00');//设定时间countDown(); //先调用一次,防止第一次刷新出现空白//2、开启定时器setInterval(countDown, 1000); //每隔1s调用这个函数//方法计算剩余时间function countDown() {var nowTime = +new Date(); //返回当前时间的总毫秒数console.log(nowTime)var times = (inputTime - nowTime) / 1000; //剩余时间的秒数var h = parseInt(times / 60 / 60 % 24); //小时h = h < 10 ? '0' + h : h;hour.innerHTML = h; var m = parseInt(times / 60 % 60); //分m = m < 10 ? '0' + m : m;minute.innerHTML = m;var s = parseInt(times % 60);//秒s = s < 10 ? '0' + s : s;second.innerHTML = s;}</script></body>
</html>

实现效果:

 


http://chatgpt.dhexx.cn/article/cgTuf9I2.shtml

相关文章

JS倒计时按钮

利用定时器 &#xff0c;制作按钮在有效时间内失效的效果 可用作于接收验证码 避免了用户多次连续点击 【效果如下】 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title></head><body></body…

JavaScript倒计时案例

在模仿京东倒计时案例时&#xff0c;遇到了两个小问题&#xff1a; 1&#xff1a;开启循环定时器之前&#xff0c;内容有空档期无显示 2&#xff1a;时间不会动态显示 1、setInterval定时器在开启前会有设置毫秒数的空档期&#xff0c;该期间不会执行回调函数&#xff0c;所以…

JS倒计时效果实现

今天简单练习以下倒计时效果的实现&#xff0c;主要用到window对象的定时器和Date对象。首先我们先建立一个简单的布局。 <div class"time"><div class"left_text">当前场次</div><span class"hours">00</span>&…

js倒计时读秒

1.需求及分析 最近,接到一个接收手机验证码的功能&#xff0c;大体就是设置一个定时器&#xff0c;在每次执行的时候将秒数&#xff0c;逐个减去1&#xff0c;小于0的时候&#xff0c;清除定时器&#xff0c;然后完善一下功能&#xff0c;例如&#xff0c;加上一下状态的变化&…

js倒计时

详细代码及注释如下 // 转换公式 // d parseInt(总秒数 / 60 / 60 / 24); //计算天数 // h parseInt(总秒数 / 60 / 60 % 24); //计算小时 // m parseInt(总秒数 / 60 % 60); //计算分数 // s parseInt(总秒数 % 60); //计算当前秒数 function countDown(time) {var nowTi…

js倒计时效果

倒计时效果&#xff0c;如下图&#xff1a; 知识储备 new Date() 获取时间戳的方法setInterval(callback,time) 定时器&#xff0c;两个参数&#xff0c;第一个参数是回调函数&#xff0c;第二个参数是定时器的时间&#xff0c;以毫秒为单位clearInterval 取消定时器 html &…

JS倒计时算法

JS倒计时 1.核心算法: 输入的时间减去现在的时间就是剩余的时间, 即倒计时, 但是不能拿着时分秒相减, 比如03分 - 23分, 结果是个负数. 2.用时间戳来做. 用户输入时间总的毫秒数减去现在时间的总的毫秒数, 得到的就是剩余时间的毫秒数.但是不能拿着时分秒相减 3. 把剩余时间总的…

JS实现倒计时功能

一、前言 网站在做活动时&#xff0c;会出现一个截止时间倒计时的提示。效果如图&#xff1a; 二、分析 ①提示时间是每秒不断变化的&#xff0c;需要用到定时器(setInterval) //1000表示每隔一秒变化一次&#xff0c;单位为毫秒 setInterval(countDown, 1000); ②三个盒子通…

js 简单实现倒计时功能

需求 最近由于页面需要&#xff0c;做一个倒计时的功能&#xff0c;具体意思就是当前时间到指定时间之间的时间段以倒计时的方式展示 展示效果 涉及方法 getTime();innerHTML; Math.floor();setTimeout(函数&#xff0c;time); 代码 <!DOCTYPE html> <html> <h…

JS实现简单的倒计时

1、第一种 <!DOCTYPE html><html><head><meta charset"utf-8"><title>www.jb51.net JS倒计时</title></head><body><div id"div"></div><script type"text/javascript">win…

JS实现倒计时效果

案例分析&#xff1a; 1、倒计时效果是不断变化的&#xff0c;因此我们需要定时器来自动变化(setInterval) 2、三个黑盒子里面分别存放时、分、秒 3、三个黑盒子利用innerHTML放入计算的小时、分钟、秒数 4、(程序读取需要时间)第一次执行也是间隔毫秒数&#xff0c;因此刷新页…

javaScript实现倒计时功能

目录 一、主要思路 二、css样式 三、html代码 四、js内容 五、完整代码展示 六、效果展示 一、主要思路 1.通过内置时间函数实例化日期对象获取当前时间 new Date。 2.因为时间无法减去时间&#xff0c;有可能生成负数&#xff0c;所以采用时间戳的方法得到毫秒数形式的…

虚拟化安全防护系统部署在安全服务器上,虚拟化安全及解决方案

虚拟化技术在系统组织,降低系统操作代价,改进硬件资源的效率、利用率以及灵活性方面扮演着主要的角色。然而,虚拟化技术本身不仅面临着传统网络已有的安全威胁,还面临着自身引入的安全问题。不过,由于虚拟化技术带来的资源分割独立的优势,它也在构建安全策略中扮演着重要…

openstack虚拟化

虚拟化是什么&#xff1f; 虚拟化是一种将计算机资源&#xff08;如处理器、内存、存储等&#xff09;抽象化和隔离的技术&#xff0c;以实现多个虚拟环境共享物理计算机资源的目的。通俗地说&#xff0c;虚拟化就是将一个物理主机分割成多个虚拟的、相互独立的虚拟机&#xf…

服务器虚拟化需要多少钱,蓝盟观察,解析各厂商实施服务器虚拟化所需成本

原标题:蓝盟观察,解析各厂商实施服务器虚拟化所需成本 微软针对WindowsServer2008标准版、企业版与资料中心版,各推出内建Hyper-V,以及不含Hyper-V的版本,而内建Hyper-V的版本则只要再加28美元,等同于只要多花约200元人民币就可以有虚拟化环境。不过,这只是虚拟化软件最…

中小型企业VMware服务器虚拟化实用案例

前  言 VMware的服务器虚拟化解决方案能够帮助用户以服务器虚拟化的方式&#xff0c;对现有IT资源进行服务器虚拟化整合&#xff0c;以提供降低 IT 复杂性的新方法&#xff0c;它将按需提供的自助管理虚拟基础架构汇集成高效池&#xff0c;以服务的形式提供计算。 针对公司现…

联想服务器esxi虚拟化,企业服务器管理必备——VMware ESXI虚拟化服务器搭建

现在企业虚拟化服务器使用越来越多,这是一篇VMware虚拟化服务器搭建教程,让我们开始吧: 制作U盘安装ESXI镜像 1.使用Linux系统制作U盘启动镜像(UltraISO制作的镜像不能用,必须依赖Linux系统) 安装镜像制作工具: yum install syslinux yum install dosfstoos 2.查看U盘是否…

服务器虚拟化优缺点

将服务器物理资源抽象成逻辑资源&#xff0c;让一台服务器变成几台甚至上百台相互隔离的虚拟服务器&#xff0c;我们不再受限于物理上的界限&#xff0c;而是让CPU、内存、磁盘、I/O等硬件变成可以动态管理的“资源池”&#xff0c;从而提高资源的利用率&#xff0c;简化系统管…

服务器集群虚拟化区别,服务器集群与虚拟化

服务器集群与虚拟化 内容精选 换一换 开源KVM虚拟化解决方案应用于线下虚拟化场景,包括单机、双机HA和多机集群,通过虚拟机迁移和HA确保业务可靠性,典型应用包括数据库、WEB和缓存服务器等。单机场景分析单机场景是指在单台服务器上使用QEMU-KVM开源软件,虚拟机带外管理使用…

华为的服务器虚拟化软件,服务器虚拟化软件

服务器虚拟化软件 内容精选 换一换 为了解决Windows系统的源端服务器与目的端弹性云服务器的兼容性问题&#xff0c;您需要手动给目的端服务器安装相关驱动进行优化。登录管理控制台。选择“计算 > 弹性云服务器”。在弹性云服务器列表中&#xff0c;查看目的端服务器的规格…