js 简单实现倒计时功能

article/2025/11/4 18:53:44

需求

最近由于页面需要,做一个倒计时的功能,具体意思就是当前时间到指定时间之间的时间段以倒计时的方式展示

展示效果

效果图

涉及方法

  1.  getTime();
  2. innerHTML;
  3.  Math.floor();
  4. setTimeout(函数,time);

代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>JS倒计时</title>
</head>
<body><div id="remainDays"></div><script type="text/javascript" >
window.onload=countdown;
function countdown(){//获取客户端时间var today=new Date();//获取服务器当前时间 var today=new Date($.ajax({type:"HEAD",async:false,cache:false}).getResponseHeader("Date"));//当前距离1970年的毫秒数var oldTime = today.getTime();//设置截止时间,比如此时设置的是2099/1/1/00:00:00,此处可做修改var newDate = new Date(2099,0,1,0,0,0); //截止时间距离1970年的毫秒数var newTime = newDate.getTime();//截止时间距离现在的秒数var second = Math.floor((newTime - oldTime) / 1000);//设置remainSecond的目的是:如果倒计时结束该执行的方法或事件var remainSecond = second;//86400代表的是天;一天有24*60*60=86400秒 ;var day = Math.floor(second / 86400);second %= 86400;//余数代表剩下的秒数;var hour = Math.floor(second / 3600);//3600代表小时;second %= 3600; //余数代表 剩下的秒数;var minute = Math.floor(second / 60);second %= 60;var str = formatType(day) + '<span class="time">天</span>'+ formatType(hour) + '<span class="time">小时</span>'+ formatType(minute) + '<span class="time">分钟</span>'+ formatType(second) + '<span class="time">秒</span>';if(remainSecond >0){document.getElementById("remainDays").innerHTML=("倒计时:<font color=red>"+str+"</font>");}else{//设置你的事件或者函数}//500的目的是防止漏掉执行setTimeout(countdown,500);}
//设置显示格式,小于10的填0
function formatType(n) {return n >= 0 && n < 10 ? '0' + n : '' + n;}
</script>
</body>
</html>

在线运行效果请点此处


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

相关文章

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;查看目的端服务器的规格…

服务器三种虚拟化技术

服务器虚拟化技术大致分三种&#xff1a;完全虚拟化、准虚拟化、操作系统层虚拟化。 虚拟化技术&#xff0c;用户可以动态启用虚拟服务器又叫虚拟机&#xff0c;每个服务器实际上可以让操作系统以及在上面运行的任何应用程序误以为虚拟机就是实际硬件。运行多个虚拟机还可以充…

谈谈服务器虚拟化解决方案

谈谈服务器虚拟化解决方案 现如今的 x86 服务器的设计存在局限性&#xff0c;每次只能运行一个操作系统和应用&#xff0c;这为 IT 部门带来了挑战。因此&#xff0c;即使是小型数据中心也必须部署大量服务器&#xff0c;而每台服务器的容量利用率只有 5% 到 15%&#xff0c;无…

ajax data.state,ajax 中readystate一直为1

初学ajax,不明白为什么我在浏览器调试的过程中readystate一直没有变化过&#xff0c;一直都是1. 这里是前端代码&#xff1a; function getMoreContent(){ var xmlHttp; var contentdocument.getElementById("keyword"); if(content.value"") { return; } …

Ajax异步请求--readyState

概述 XMLHttpRequest.readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态。一个 XHR 代理总是处于下列状态中的一个&#xff1a; readyState状态描述状态描述0UNSEND代理对象已经被创建&#xff0c;但尚未调用open()方法1OPENEDopen()方法已经调用&#xff0c;建立与服…

ajax返回状态码为零,ajax返回readyState为0?

请求aj页求是解这如前总回随4泉标使幻近面的是,ax报错, XMLHttpRequest对象返回readyState:0, sta朋不功事做时次功好来多这开制的请一例农在个屏器随的会满和满时波实的于设幻近友支能前的我基能自又&#xff0c;些发tus:0 相关代码 function login(){ var phone 18600000000…

Document.readyState 如何使用和侦听

Document.readyState 如何使用和侦听 Document. readyState 有三种状态 loading&#xff1a; 文档还在加载中interactive&#xff1a; 文档主体内容已加载完成&#xff0c;但附属的图片、js、css 什么的还在载入中complete&#xff1a; 加载完成 侦听使用 document.onready…

php readystate,php – 当readyState为4时,为什么我在脚本中调用的Ajax函数连续运行两次?...

所有, 我正在使用Head First Ajax书来学习Ajax.在第一章中,他们给出了一些我简化了一些代码示例.我添加了一堆警报,以了解发生了什么.这是代码&#xff1a; HTML Ajax(index.php)&#xff1a; /p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">…

readyState与status的几种状态

什么是readyState readyState是XMLHttpRequest对象的一个属性&#xff0c;用来标识当前XMLHttpRequest对象处于什么状态。 readyState总共有5个状态值&#xff0c;分别为0~4&#xff0c;每个值代表了不同的含义&#xff0c;如下表所示&#xff1a;    0 未初始化状态&#…

等宽编程字体Consoles YaHei

英文字体是Consolas&#xff0c; 中文字体是微软雅黑。 已经进行了修改与合并&#xff0c;1个中文宽度2个英文宽度 中英文完全等宽&#xff0c;适合编程使用。 注意&#xff1a;xp系统没有ClearType功能&#xff0c;使用该字体效果不加&#xff0c;可以使用第三方字体渲染软…