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

JS第九天

news 2026/2/10 19:25:16

今天是第九天，学习了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

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

编程新知 2025/12/5 2:40:04

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2026/2/5 17:51:52

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2026/1/26 13:21:10

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

编程新知 2025/10/17 21:16:57

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

编程新知 2025/11/22 12:02:51

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

编程新知 2026/2/1 7:05:07

高防服务器能够抵御哪些网络攻击呢？

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

编程新知 2025/9/3 19:14:38

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

编程新知 2025/8/25 19:12:45

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

编程新知 2026/1/31 13:13:32

【前端异常】JavaScript错误处理：分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...

编程新知 2026/1/1 23:11:45