当前位置： 首页 > news >正文

JavaScript-API（倒计时的实现）

news 2025/12/19 20:43:00

基础知识

1.时间对象的使用

1.1 实例化

要获取一个时间首先需要一个关键词new了实例化

const time = new Date（）

如果是获取具体的具体的时间

const time = new Date('2024-6-1 16:06:44')
1.2 日期对象方法
方法作用说明
getFullYear()获得年份获得4位年份
getMonth()获得月份取值为0-11
getDate()获得月份的每一天不同月份的值也不相同
getDay()获得星期取值为0-6
getHours()获得小时取值为0-23
getMinutes()获得分钟取值为0-59
getSeconds()获得秒取值为0-59

使用如下：

 <script>const div = document.querySelector('div')function getmytime() {const date = new Date()let year = date.getFullYear() let month = date.getMonth()+1let day = date.getDay()return `今天是${year}-${month}—${day}`}div.innerHTML = getmytime()</script>

2.时间戳的使用

时间戳的使用分为3种方法

        使用  getTime()方法实现

const date = new Date()
console.log(date.getTime())

        使用   +new Date()

console.log(+new Date())

         Date.now(),但是不可以返回时间戳

console.log(Date.now())

下面是一个简单的案例，实现星期几的表达

// 根据时间Day() 0-6返回天数，设置一个数组，可以返回天数const arr = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六']console.log(arr[new Date().getDay()])

到了重点部分，我们现在来使用时间戳的方法去实现倒计时（重点部分看到js的部分）

思路讲解：

第一步：需要获取当前的时间戳（now）和未来你需要使用的时间戳（last）

第二步：计算出2个时间戳之间的时间间距，由于他是以毫秒计算出来，我们需要去除以1000转化为一秒来显示

第三步：进行事件的转换，计算出天数，小时，分钟，秒

                    d = parseInt(count / 60 / 60 / 24)      //计算天数

                    h = parseInt(总秒数 / 60 / 60 % 24)   //   计算小时

                    m = parseInt(总秒数 / 60 % 60);     //   计算分数

                     s = parseInt(总秒数 % 60);    //计算秒数

第四步：获取对应的元素，然后将第三步里面计算出来的东西写入到获取到的元素里面

第五步：将去上面几个步骤全部封装到一个函数里面

第六步：首先先调用一次函数，这样在我们打开html的时候就会首先更新到当前的内容

第七步：使用时间定时器，买1秒更新一次，这样就实现了自动记时

代码如下（请去实践，不要直接使用，需要有自己的思维）：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.countdown {margin: auto;width: 400px;height: 305px;text-align: center;line-height: 1;color: #fff;background-color: brown;/* background-size: 240px; *//* float: left; */overflow: hidden;}.countdown .next {font-size: 16px;margin: 25px 0 14px;}.countdown .title {font-size: 33px;}.countdown .tips {margin-top: 80px;font-size: 23px;}.countdown small {font-size: 17px;}.countdown .clock {width: 300px;margin: 18px auto 0;overflow: hidden;}.countdown .clock span,.countdown .clock i {display: block;text-align: center;line-height: 34px;font-size: 23px;float: left;}.countdown .clock span {width: 60px;height: 34px;border-radius: 2px;background-color: #303430;}.countdown .clock i {width: 20px;font-style: normal;}</style>
</head><body><div class="countdown"><p class="next">今天是2222年2月22日</p><p class="title">毕业倒计时</p><p class="clock"><span id="day">00</span><i>:</i><span id="hour">00</span><i>:</i><span id="minutes">25</span><i>:</i><span id="scond">20</span></p><p class="tips">2027-7-1 00:00:00你就毕业了</p></div><script>//函数封装function getCountTime() {//1. 获得当前时间const now = +new Date()//2. 获得未来时间const last = +new Date('2027-9-1 00:00:00')//3.计算之间的时间距离const count = (last - now) / 1000console.log(count)// 4.时间转换// h = parseInt(总秒数 / 60 / 60 % 24)   //   计算小时//   // m = parseInt(总秒数 / 60 % 60);     //   计算分数//   // s = parseInt(总秒数 % 60);   let d = parseInt(count / 60 / 60 / 24)  //天数d = d < 10 ? '0' + d : dlet h = parseInt(count / 60 / 60 % 24) //小时h = h < 10 ? '0' + h : hlet m = parseInt(count / 60 % 60)      //分钟m = m < 10 ? '0' + m : mlet s = parseInt(count % 60)            //秒s = s < 10 ? '0' + s : sconsole.log(d,h,m,s)//5.获取对应的标签const day = document.querySelector('#day')const hour = document.querySelector('#hour')const minutes = document.querySelector('#minutes')const scond = document.querySelector('#scond')day.innerHTML = dhour.innerHTML = hminutes.innerHTML = mscond.innerHTML = s//获取元素const nows = document.querySelector('.next')const date = new Datelet hh = date.getFullYear()let mm = date.getMonth()let dd = date.getDay()nows.innerHTML = `今天是${hh}年${mm}月${dd}日`}//先调用一次getCountTime()//使用时间定时器setInterval(getCountTime, 1000)</script>
</body></html>

我们的倒计时小案例完成，如有其它更好的方法评论区留言交流！！！

相关文章：

JavaScript-API（倒计时的实现）

基础知识 1.时间对象的使用 1.1 实例化 要获取一个时间首先需要一个关键词new了实例化 const time new Date&#xff08;&#xff09; 如果是获取具体的具体的时间 const time new Date(2024-6-1 16:06:44) 1.2 日期对象方法 方法作用说明getFullYear()获得年份获得4…...

编程日记 2024/10/10 9:07:59

【C++】——继承【上】

P. S.&#xff1a;以下代码均在VS2019环境下测试&#xff0c;不代表所有编译器均可通过。 P. S.&#xff1a;测试代码均未展示头文件stdio.h的声明&#xff0c;使用时请自行添加。 博主主页&#xff1a;Yan. yan.                        …...

编程日记 2024/10/10 9:05:57

SpringBoot 整合 阿里云 OSS图片上传

一、OOS 简介 ‌阿里云OSS&#xff08;Object Storage Service&#xff09;是一种基于云存储的产品&#xff0c;适用于存储和管理各种类型的文件&#xff0c;包括图片、视频、文档等。‌ 阿里云OSS具有高可靠性、高可用性和低成本等优点&#xff0c;因此被广泛应用于各种场景&…...

编程日记 2024/10/10 9:04:54

内核编译 设备驱动 驱动程序

内核编译 一、内核编译的步骤 编译步骤&#xff1a; (linux 内核源码的顶层目录下操作 ) 1. 拷贝默认配置到 .config cp config_mini2440_td35 .config 2. make menuconfig 内核配置 make menuconfig 3. make uImage make u…...

编程日记 2024/10/10 9:03:53

自由学习记录

约束的泛型通配符? Java中的泛型 xiaomi和byd都继承了car&#xff0c;但是只是这两个类是car的子类而已&#xff0c;而arraylist<xiaomi> ,arraylist<byd> 两个没有半毛钱继承关系 所以传入的参数整体&#xff0c;是car的list变形&#xff0c;里面的确都能存car…...

编程日记 2024/10/10 9:00:49

在 C# 中使用 LINQ 查询文件列表并找出最大文件

文章目录 1. 环境准备2. 创建项目3. 引入命名空间4. 示例代码5. 运行代码6. 进阶&#xff1a;异常处理7. 总结 在现代 C# 开发中&#xff0c;LINQ (Language Integrated Query) 提供了一种强大而优雅的方式来处理集合数据。本文将详细介绍如何使用 LINQ 查询文件系统中的文件&a…...

编程日记 2024/10/10 8:58:45

数学建模算法与应用 第6章 微分方程建模及其求解方法

目录 6.1 微分方程建模概述 6.2 发射卫星与三阶火箭建模 Matlab代码示例&#xff1a;火箭发射模拟 6.3 微分方程数值解法 Matlab代码示例&#xff1a;欧拉法与龙格-库塔法 6.4 放射性废料的处理 Matlab代码示例&#xff1a;放射性衰变 6.5 初值问题的Matlab数值求解 习…...

编程日记 2024/10/10 8:56:42

数据库的相关知识

数据库的相关知识 1.数据库能够做什么&#xff1f; 存储大量数据&#xff0c;方便检索和访问保持数据信息的一致、完整共享和安全通过组合分析&#xff0c;产生新的有用信息 2.数据库作用&#xff1f; 存储数据、检索数据、生成新的数据 3.数据库要求&#xff1f; 统一、…...

编程日记 2024/10/10 8:55:41

Python cachetools常用缓存算法汇总

文章目录 cachetools介绍缓存操作设置数据生存时间&#xff08;TTL&#xff09;自定义缓存策略缓存装饰器缓存清理cachetools 超过缓存数量maxsize cachetools 使用示例 cachetools介绍 cachetools : 是一个Python第三方库&#xff0c;提供了多种缓存算法的实现。缓存是一种用于…...

编程日记 2024/10/10 8:54:38

java类和对象_成员变量方法修饰符局部变量this关键字-cnblog

java类和对象 成员变量 权限修饰符 变量类型 变量名; 成员变量可以是任意类型,整个类是成员变量的作用范围 成员变量 成员方法 权限修饰符 返回值类型 方法名() 成员方法可以有参数&#xff0c;也可以有返回值&#xff0c;用return声明 权限修饰符 private 只能在本类…...

编程日记 2024/10/10 8:53:37

海信和TCL雷鸟及各大品牌智能电视测评

买了型号为32E2F(9008)的海信智能的电视有一段时间了&#xff0c;要使用这个智能电视还真能考验你的智商。海信电视有很多优点&#xff0c;它的屏幕比较靓丽&#xff0c;色彩好看&#xff0c;遥控器不用对着屏幕就能操作。但也有不少缺点。 1. 海信智能电视会强迫自动更新操作…...

编程日记 2024/10/10 8:52:36

Linux 基本系统命令及其使用详解手册（六）

指令&#xff1a;mesg 　　使用权限:所有使用者 　　使用方式:mesg [y|n] 　　说明 &#xff1a; 决定是否允许其他人传讯息到自己的终端机介面 　　把计 : 　　y:允许讯息传到终端机介面上。 　　n:不允许讯息传到终端机介面上 。 　　如果没有设定,则讯息传递与否则由终端机界…...

编程日记 2024/10/10 8:50:33

Oracle架构之段管理和区管理

文章目录 1 段1.1 简介1.1.1 定义1.1.2 分类 1.2 段空间的管理模式1.2.1 手工段空间管理&#xff08;Manual Segment Space Management&#xff09;1.2.2 自动段空间管理&#xff08;Auto Segment Space Management&#xff09; 1.3 段空间的手工管理&#xff08;Manual Segmen…...

编程日记 2024/10/10 8:48:30

mybatis-plus转换数据库json类型数据为java对象

JacksonTypeHandler JacksonTypeHandler 可以实现把json字符串转换为java对象。同一类型的handler有: Fastjson2TypeHandlerFastjsonTypeHandlerGsonTypeHandlerJacksonTypeHandler 至于需要哪一个选一个用就好了 使用方式 在实体类中加入注解 TableName(value "table_…...

编程日记 2024/10/10 8:47:29

Java | Leetcode Java题解之第467题环绕字符串中唯一的子字符串

题目&#xff1a; 题解&#xff1a; class Solution {public int findSubstringInWraproundString(String p) {int[] dp new int[26];int k 0;for (int i 0; i < p.length(); i) {if (i > 0 && (p.charAt(i) - p.charAt(i - 1) 26) % 26 1) { // 字符之差为…...

编程日记 2024/10/10 8:46:28

诺贝尔物理奖与化学奖彰显AI力量，探索智能新边界

在今年的诺贝尔物理学奖和化学奖的颁奖典礼上&#xff0c;人工智能&#xff08;AI&#xff09;再次成为耀眼的明星。两位物理学奖得主约翰J霍普菲尔德和杰弗里E辛顿因在人工神经网络和机器学习领域的开创性工作而获奖&#xff0c;而化学奖则颁给了在蛋白质结构设计和预测方面做…...

编程日记 2024/10/10 8:44:26

基于京东:HotKey实现自动缓存热点Key！！！

一.引言 某些热点数据&#xff0c;我们提前如果能够预判到的话&#xff0c;可以提前人工给数据加缓存&#xff0c;也就是缓存预热&#xff0c;将其缓存在本地或者Redis中&#xff0c;提高访问性能同时&#xff0c;减低数据库压力&#xff0c;也减轻后端服务的压力。但是&#…...

编程日记 2024/10/10 8:40:23

★ 算法OJ题 ★ 二分查找算法

Ciallo&#xff5e;(∠・ω< )⌒☆ ~ 今天&#xff0c;塞尔达将和大家一起做几道二分查找算法算法题 ~ ❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️ 澄岚主页&#xff1a;椎名澄嵐-CSDN博客 算法专栏&#xff1a;★ 优选算法100天 ★_椎名澄嵐的博客-CSDN博客…...

编程日记 2024/10/10 8:38:20

RTSP RTP RTCP SDP基础知识

理论 流&#xff08;Streaming &#xff09; 是近年在 Internet 上出现的新概念&#xff0c;其定义非常广泛&#xff0c;主要是指通过网络传输多媒体数据的技术总称。 流式传输分为两种 顺序流式传输 (Progressive Streaming) 实时流式传输 (Real time Streaming) ​​​​​…...

编程日记 2024/10/10 8:34:15

静态变量、变量作用域、命名空间

静态变量 静态变量一般位于程序全局data区&#xff0c;只是编程语言根据它所在的scope做语言级别访问限制。 静态变量和全局变量 可以在C语言一个函数中定义static变量&#xff0c;并比较和全局变量的地址差异。 C系语言使用static关键字标示静态变量。 PHP使用大写的STATIC关键…...

编程日记 2024/10/10 8:33:14

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2025/12/19 5:38:38

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/12/9 21:15:58

Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

编程新知 2025/12/19 8:13:44

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2025/11/30 16:55:15

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

编程新知 2025/12/9 4:10:18

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

编程新知 2025/9/22 21:37:01

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

编程新知 2025/12/15 13:27:34

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

编程新知 2025/10/31 5:18:02

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2025/12/4 3:48:38

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

编程新知 2025/10/26 5:04:25