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

JavaScript-API（倒计时的实现）

news 2025/9/15 22:16:48

基础知识

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

网络编程（Modbus进阶）

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

编程新知 2025/9/14 20:56:27

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

编程新知 2025/9/15 0:18:51

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2025/9/15 11:03:08

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

编程新知 2025/8/21 16:44:19

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2025/9/7 8:50:41

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分，它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构： use strict;/…...

编程新知 2025/8/28 16:54:43

全面解析数据库：从基础概念到前沿应用​

在数字化时代&#xff0c;数据已成为企业和社会发展的核心资产&#xff0c;而数据库作为存储、管理和处理数据的关键工具&#xff0c;在各个领域发挥着举足轻重的作用。从电商平台的商品信息管理&#xff0c;到社交网络的用户数据存储&#xff0c;再到金融行业的交易记录处理&a…...

编程新知 2025/7/29 3:05:57

【FTP】ftp文件传输会丢包吗？批量几百个文件传输，有一些文件没有传输完整，如何解决？

FTP&#xff08;File Transfer Protocol&#xff09;本身是一个基于 TCP 的协议&#xff0c;理论上不会丢包。但 FTP 文件传输过程中仍可能出现文件不完整、丢失或损坏的情况&#xff0c;主要原因包括&#xff1a; ✅ 一、FTP传输可能“丢包”或文件不完整的原因 原因描述网络…...

编程新知 2025/8/17 3:31:21

负载均衡器》》LVS、Nginx、HAproxy 区别

虚拟主机 先4&#xff0c;后7...

编程新知 2025/9/13 17:33:04

云原生时代的系统设计：架构转型的战略支点

&#x1f4dd;个人主页&#x1f339;&#xff1a;一ge科研小菜鸡-CSDN博客 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 一、云原生的崛起&#xff1a;技术趋势与现实需求的交汇 随着企业业务的互联网化、全球化、智能化持续加深&#xff0c;传统的 I…...

编程新知 2025/9/2 16:44:08