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

JS第九天

news 2025/9/11 5:05:17

今天是第九天，学习了JS中的设置日期和倒计时，计时器以及验证码倒计时，那么话不多说我们开始今天的学习吧

一、日期设置

1.1日期创建

调用 new Date() 来创建一个新的 Date 对象。在调用时可以带有一些参数，创建一个 Date 对象，其时间等于 1970 年 1 月 1 日 UTC+0 之后经过的毫秒数（1/1000 秒）。

传入的整数参数代表的是自 1970-01-01 00:00:00 以来经过的毫秒数，该整数被称为 时间戳。

这是一种日期的轻量级数字表示形式。我们通常使用 new Date(timestamp) 通过时间戳来创建日期，并可以使用 date.getTime() 将现有的 Date 对象转化为时间戳（下文会讲到）。

new Date(datestring)

如果只有一个参数，并且是字符串，那么它会被自动解析。该算法与 Date.parse 所使用的算法相同，将在下文中进行介绍。

new Date(year, month, date, hours, minutes, seconds, ms)

使用当前时区中的给定组件创建日期。只有前两个参数是必须的。

  • year 应该是四位数。为了兼容性，也接受 2 位数，并将其视为 19xx，例如 98 与 1998 相同，但强烈建议始终使用 4 位数。
  • month 计数从 0（一月）开始，到 11（十二月）结束。
  • date 是当月的具体某一天，如果缺失，则为默认值 1。
  • 如果 hours/minutes/seconds/ms 缺失，则均为默认值 0。

1.2

访问日期组件

从 Date 对象中访问年、月等信息有多种方式：

getFullYear()

获取年份（4 位数）

getMonth()

获取月份，从 0 到 11。

getDate()

获取当月的具体日期，从 1 到 31，这个方法名称可能看起来有些令人疑惑。

getHours()，getMinutes()，getSeconds()，getMilliseconds()

获取相应的时间组件。

不是 getYear()，而是 getFullYear()

很多 JavaScript 引擎都实现了一个非标准化的方法 getYear()。不推荐使用这个方法。它有时候可能会返回 2 位的年份信息。永远不要使用它。要获取年份就使用 getFullYear()。

另外，我们还可以获取一周中的第几天：

getDay()

获取一周中的第几天，从 0（星期日）到 6（星期六）。第一天始终是星期日，在某些国家可能不是这样的习惯，但是这不能被改变。

以上的所有方法返回的组件都是基于当地时区的。

当然，也有与当地时区的 UTC 对应项，它们会返回基于 UTC+0 时区的日、月、年等：getUTCFullYear()，getUTCMonth()，getUTCDay()。只需要在 "get" 之后插入 "UTC" 即可。

getTime()

返回日期的时间戳 —— 从 1970-1-1 00:00:00 UTC+0 开始到现在所经过的毫秒数。

getTimezoneOffset()

返回 UTC 与本地时区之间的时差，以分钟为单位。

下列方法可以设置日期/时间组件：

  • setFullYear(year, [month], [date])
  • setMonth(month, [date])
  • setDate(date)
  • setHours(hour, [min], [sec], [ms])
  • setMinutes(min, [sec], [ms])
  • setSeconds(sec, [ms])
  • setMilliseconds(ms)
  • setTime(milliseconds)（使用自 1970-01-01 00:00:00 UTC+0 以来的毫秒数来设置整个日期）

以上方法除了 setTime() 都有 UTC 变体，例如：setUTCHours()。

我们可以看到，有些方法可以一次性设置多个组件，比如 setHours。未提及的组件不会被修改。

二、倒计时

可以使用 JavaScript 的计时器函数 setInterval() 来实现倒数计时器。

<!DOCTYPE html>
<html>
<head><title>倒数计时器</title>
</head>
<body><h1 id="countdown"></h1><script>// 倒数计时器总时间（以秒为单位）var totalSeconds = 60;// 获取显示倒数计时器的元素var countdownElement = document.getElementById("countdown");// 更新倒数计时器函数function updateCountdown() {// 计算剩余时间var minutes = Math.floor(totalSeconds / 60);var seconds = totalSeconds % 60;// 格式化时间字符串var timeString = minutes.toString().padStart(2, '0') + ":" + seconds.toString().padStart(2, '0');// 更新显示倒数计时器的元素countdownElement.innerHTML = "倒数计时器: " + timeString;// 减少剩余时间totalSeconds--;// 如果剩余时间小于等于 0，则停止计时器if (totalSeconds <= 0) {clearInterval(countdownTimer);countdownElement.innerHTML = "倒数计时器: 时间到！";}}// 启动倒数计时器var countdownTimer = setInterval(updateCountdown, 1000);</script>
</body>
</html>

在这个例子中，我们首先设置了倒数计时器总时间（60 秒），然后获取了一个 HTML 元素来显示计时器，并创建了一个函数 updateCountdown() 来更新计时器的显示。

函数 updateCountdown() 首先计算剩余时间（分钟和秒数），然后格式化这些时间为一个字符串，并更新显示计时器的元素。接着，它减少剩余时间，并检查是否需要停止计时器（即剩余时间是否小于等于 0），如果需要停止，就清除计时器并更新显示计时器的元素。

最后，我们使用 setInterval() 函数启动倒数计时器，每秒钟调用一次 updateCountdown() 函数来更新计时器的显示。


三、定时器

<script>// 定时器// 每隔一段时间 重复执行一段代码// 一次性定时器  延时定时器//设置一次性定时器  定时器//setTimeout(function(){执行的代码}，毫秒var n1 = setTimeout(function(){alert(666)},2000)var n2 = setTimeout(function(){alert(777)},3000)var n3 = setTimeout(function(){alert(888)},4000)//关闭一次性定时器  clearTimeout(n2)// 重复性定时器  周期定时器//    var timer =  setInterval(function(){执
//    clearInterval(timer)var i= 1;var timer = setInterval(function(){   i++;console.log(i) },1000)clearInterval(timer);</script>

什么是定时器

JS提供了一些原生方法来实现延时去执行某一段代码

setTimeout：

设置一个定时器，在定时器到期后执行一次函数或代码段

setInterval:

以固定的时间间隔重复调用一个函数或者代码段

四、验证码倒计时

<button id="but" >5秒</button>
<script>var sec =  5;//5秒倒计时var timer = setInterval(function(){//秒数-1sec--;// 设置按钮里的文本内容but.innerHTML = sec+'秒'// 按钮 禁用but.disabled = true;//当秒数小于0，停止定时器if(sec <= 0){//停止定时器clearInterval(timer);//按钮的文字修改成获取验证码but.innerHTML = '获取验证码'//按钮取消禁用but.disabled = false;}},1000)</script>

验证码倒计时也是常用的，一定要牢记哦。

今天的学习到此结束。

相关文章：

JS第九天

今天是第九天&#xff0c;学习了JS中的设置日期和倒计时&#xff0c;计时器以及验证码倒计时&#xff0c;那么话不多说我们开始今天的学习吧 一、日期设置 1.1日期创建 调用 new Date() 来创建一个新的 Date 对象。在调用时可以带有一些参数&#xff0c;创建一个 Date 对象&…...

编程日记 2024/4/7 10:05:50

CSS设置字体样式

目录 前言&#xff1a; 1.font-family&#xff1a; 2.font-style&#xff1a; 3.font-weight&#xff1a; 4.font-size&#xff1a; 5.font-variant&#xff1a; 6.font&#xff1a; 前言&#xff1a; 在网页中字体是重要的组成部分&#xff0c;使用好字体可以让网页更…...

编程日记 2024/4/7 10:03:48

[Java线程池]ExecutorService|CompletionService的区别与选择

这段时间对业务系统做了个性能测试&#xff0c;其中使用了较多线程池的技术&#xff0c;故此做一个技术总结。 这次总结的内容比较多&#xff0c;主要是四个&#xff1a; ExecutorServiceCompletionServiceRunnableCallable 前两个是线程池相关接口&#xff0c;后两个是多线…...

编程日记 2024/4/7 10:02:47

MySQL-SQL编写练习：基本的SELECT语句

基本的SELECT语句 1. SQL的分类 DDL:数据定义语言。CREATE \ ALTER \ DROP \ RENAME \ TRUNCATEDML:数据操作语言。INSERT \ DELETE \ UPDATE \ SELECT &#xff08;重中之重&#xff09;DCL:数据控制语言。COMMIT \ ROLLBACK \ SAVEPOINT \ GRANT \ REVOKE 学习技巧&#xf…...

编程日记 2024/4/7 10:00:44

C++经典面试题目（十九）

1、什么是析构函数&#xff1f;它有什么作用&#xff1f; 析构函数是类的特殊成员函数&#xff0c;用于在对象被销毁时执行清理工作。它的名称与类名相同&#xff0c;前面加上波浪号&#xff08;~&#xff09;。析构函数的作用在于确保在对象被销毁时释放占用的资源&#xff0…...

编程日记 2024/4/7 9:58:42

acwing算法提高之图论--SPFA找负环

目录 1 介绍2 训练 1 介绍 本专题用来记录使用spfa算法来求负环的题目。 2 训练 题目1&#xff1a;904虫洞 C代码如下&#xff0c; #include <cstring> #include <iostream> #include <algorithm> #include <queue>using namespace std;typedef p…...

编程日记 2024/4/7 9:56:40

I2C驱动实验：测试I2C驱动是否与设备匹配

一. 简介 前面一篇文章在设备树中创建 ap3216c设备节点信息。 第二篇文章编写了简单的 I2C设备驱动框架&#xff0c;包括 构造 i2c_driver结构体&#xff0c;i2c_driver的注册与注销等。文章如下&#xff1a; I2C驱动实验&#xff1a;向设备树添加 I2C设备的设备节点信息-C…...

编程日记 2024/4/7 9:53:36

5560.树的直径

蛮不错的一道题目&#xff0c;你要利用树的性质分析出&#xff0c;你只需要维护上一次的树的直径的两个端点就好了 #include<iostream>using namespace std; using ll long long; using pii pair<int,int>; const int N 6e510; const int inf 0x3f3f3f3f; cons…...

编程日记 2024/4/7 9:50:33

Decoupled Multimodal Distilling for Emotion Recognition 论文阅读

Decoupled Multimodal Distilling for Emotion Recognition 论文阅读 Abstract1. Introduction2. Related Works2.1. Multimodal emotion recognition2.2. Knowledge distillation3. The Proposed Method3.1. Multimodal feature decoupling3.2. GD with Decoupled Multimodal …...

编程日记 2024/4/7 9:44:27

【css】使用display:inline-block后，元素间存在4px的间隔

问题&#xff1a;在本地项目中使用【display: inline-block】&#xff0c;元素间存在4px间隔。打包后发布到外网又不存在这个问题了。 归根结底这是一个西文排版的问题&#xff0c;英文有空格作为词分界&#xff0c;而中文则没有。 此时的元素具有文本属性&#xff0c;只要标签…...

编程日记 2024/4/7 9:43:26

代码执行漏洞

原理&#xff1a;没有对接口输入的内容进行严格的判断 造成攻击者精心构造的代码非法执行 当应用在调用一些能将字符转化为代码的函数(如PHP中的eval)时&#xff0c;没有考虑用户是否能控 制这个字符串&#xff0c;这就会造成代码执行漏洞。 相 关 函 数 &#xff1a; PHP&…...

编程日记 2024/4/7 9:40:23

SQLServer2022安装

首先从官网上下载2022版本SQL Server 下载 | Microsoft 选择此把呢不能运行&#xff0c;适合我们在学习阶段使用。 同时网页往下滑动&#xff0c;下载SSMS 下载后的文件 注意&#xff1a;在运行时最好获取管理员权限运行&#xff0c;第一次在安装时未获取管理员权限最终…...

编程日记 2024/4/7 9:39:22

vue2 配置@指向src

使用的是vue cli创建的项目。 1.安装 path 如果在 Node.js 环境中运行代码&#xff0c;path 模块默认是可用的&#xff0c;则不需要单独安装&#xff0c;否则输入下面命令安装path npm i path -S 2.找到vue.config.js文件&#xff1a; const { defineConfig } require(vue/…...

编程日记 2024/4/7 9:36:18

用友U9 存在PatchFile.asmx接口任意文件上传漏洞

声明&#xff1a; 本文仅用于技术交流&#xff0c;请勿用于非法用途 由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任。 简介 用友U9是由中国用友软件股份有限公司开发的一款企业…...

编程日记 2024/4/7 9:34:16

如何卸载干净 IDEA（图文讲解）

更新时间 2022-12-20 11:一则或许对你有用的小广告 星球 内第一个项目&#xff1a;全栈前后端分离博客项目&#xff0c;演示地址&#xff1a;Weblog 前后端分离博客, 1.0 版本已经更新完毕&#xff0c;正在更新 2.0 版本。采用技术栈 Spring Boot Mybatis Plus Vue 3.x Vit…...

编程日记 2024/4/7 9:31:13

自动化运维（十）Ansible 之进程管理模块

Ansible的进程管理模块提供了一种强大而灵活的方式来管理和操作各种进程管理器和服务。无论你使用的是Supervisor、Systemd、传统的init脚本还是Runit,这些模块都可以帮助你轻松地管理服务的生命周期。通过合理地使用这些模块,你可以实现服务的自动化管理,提高系统的可靠性和稳…...

编程日记 2024/4/7 9:30:12

【leetcode279】完全平方数,动态规划解法

原问题&#xff1a;给定一个非负整数n&#xff0c;如果把它视作一些完全平方数的和&#xff0c;那么最少需要多少个完全平方数&#xff1f; 这次学习到一个热心网友的解法&#xff1a;把问题转化兑换零钱问题&#xff0c;然后使用动态规划求解。 比如&#xff0c;给定 n12, 那…...

编程日记 2024/4/7 9:29:10

Java 元素排序（数组、List 集合）

数组元素排序 升序 int[] array {3, 1, 4, 5}; Arrays.sort(array);// 升序排序 System.out.println(Arrays.toString(array)); //输出&#xff1a;[1, 3, 4, 5]降序 可以先将数组元素存入 List 集合&#xff0c;然后集合元素逆序&#xff0c;最后将集合元素写回原数组。&a…...

编程日记 2024/4/7 9:28:08

使用vite创建一个react18项目

一、vite是什么&#xff1f; vite 是一种新型前端构建工具&#xff0c;能够显著提升前端开发体验。它主要由两部分组成&#xff1a; 一个开发服务器&#xff0c;它基于原生 ES 模块提供了丰富的内建功能&#xff0c;如速度快到惊人的模块热更新&#xff08;HMR&#xff09;。 …...

编程日记 2024/4/7 9:23:01

子集(迭代)(leetcode 78)

核心逻辑&#xff1a; 根据子数组包含的元素个数迭代&#xff1a; 现有子集的基础上通过添加这个新元素来翻倍子集的数量 f(n)2f(n−1) vector<vector<int>> subsets(vector<int>& nums) {vector<vector<int>> ans;int i,j,k;ans.p…...

编程日记 2024/4/7 9:19:57

rknn优化教程（二）

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

编程新知 2025/6/11 15:25:30

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2025/9/9 10:12:05

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

编程新知 2025/8/12 18:09:54

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

编程新知 2025/9/6 15:42:34

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

编程新知 2025/8/6 18:56:50

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

编程新知 2025/9/8 19:48:28

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

编程新知 2025/9/10 23:16:27

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

编程新知 2025/8/15 18:53:03

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

编程新知 2025/8/8 11:04:42

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

编程新知 2025/9/9 2:13:15