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

JS第九天

news 文章来源：https://blog.csdn.net/sww1314521/article/details/137439242 2024/10/27 18:30:01

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

汽车疲劳测试试验平台技术要求（北重厂家）

汽车疲劳测试试验平台技术要求通常包括以下几个方面&#xff1a; 车辆加载能力&#xff1a;测试平台需要具备足够的承载能力&#xff0c;能够同时测试多种车型和不同重量的车辆。 动力系统&#xff1a;测试平台需要具备稳定可靠的动力系统&#xff0c;能够提供足够的力和速度来…...

编程日记 2024/4/7 9:11:49

Redis -- 缓存雪崩问题

缓存雪崩是指在同一时段大量的缓存key同时失效或者Redis服务宕机&#xff0c;导致大量请求到达数据库&#xff0c;带来巨大压力。 可能原因 : 同一时间大量的key到期 ; 解决方案&#xff1a; 给不同的Key的TTL添加随机值 利用Redis集群提高服务的可用性 给缓存业务添加降…...

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

【ARM 嵌入式 C 文件操作系列 20 -- 文件删除函数 remove 详细介绍】

请阅读【嵌入式开发学习必备专栏 】 文章目录 文件删除函数 remove 文件删除函数 remove 在 C 语言中&#xff0c; 可以使用 remove 函数来删除一个文件&#xff0c;但在删除之前 可能想确认该文件是否存在。 可以使用 stat 函数来检查文件是否存在。 以下是如何实现这个功能…...

编程日记 2024/4/7 9:09:46

LeetCode刷题之31.下一个排列

文章目录 1. 题目2.分析3.解答3.1 先排序&#xff0c;后交换3.2 先交换&#xff0c;后排序 1. 题目 整数数组的一个 排列 就是将其所有成员以序列或线性顺序排列。 例如&#xff0c;arr [1,2,3] &#xff0c;以下这些都可以视作 arr 的排列&#xff1a;[1,2,3]、[1,3,2]、[3…...

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

【RISC-V 指令集】RISC-V 向量V扩展指令集介绍(九)- 向量定点算术指令

1. 引言 以下是《riscv-v-spec-1.0.pdf》文档的关键内容&#xff1a; 这是一份关于向量扩展的详细技术文档&#xff0c;内容覆盖了向量指令集的多个关键方面&#xff0c;如向量寄存器状态映射、向量指令格式、向量加载和存储操作、向量内存对齐约束、向量内存一致性模型、向量…...

编程日记 2024/4/7 9:05:41

【Java网络编程】IP网络协议与TCP、UDP网络传输层协议

1.1、IP协议 当应用层的数据被封装后&#xff0c;想要将数据在网络上传输&#xff0c;数据究竟要被发往何处&#xff0c;又该如何精准的在网络上定位目标机器&#xff0c;此时起到关键作用的就是“IP协议”。IP协议的作用在于把各种数据包准确无误的传递给目标方&#xff0c;其…...

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

C# 分布式自增ID算法snowflake（雪花算法）

文章目录 1. 概述2. 结构3. 代码3.1 IdWorker.cs3.2 IdWorkerTest.cs (测试) 1. 概述 分布式系统中&#xff0c;有一些需要使用全局唯一ID的场景&#xff0c;这种时候为了防止ID冲突可以使用36位的UUID&#xff0c;但是UUID有一些缺点&#xff0c;首先他相对比较长&#xff0c…...

编程日记 2024/4/7 9:03:38

commonJS和esModule的应用

commonJS commonJS规范的核心变量是&#xff1a;exports&#xff0c;module.exports&#xff0c;require exports 和 module.exports可以负责模块的导出require 负责模块的导入 module.exports 导出方案&#xff1a; const name yx const age 18// 1 导出方案 module.exp…...

编程日记 2024/4/7 9:02:37

（十一）RabbitMQ及SpringAMQP

1.初识MQ 1.1.同步和异步通讯 微服务间通讯有同步和异步两种方式&#xff1a; 同步通讯&#xff1a;就像打电话&#xff0c;需要实时响应。 异步通讯&#xff1a;就像发邮件&#xff0c;不需要马上回复。 两种方式各有优劣&#xff0c;打电话可以立即得到响应&#xff0c;…...

编程日记 2024/4/7 9:00:35

STM32 M3内核寄存器概念

内容主要来自<<M3内核权威指南>> 汇编程序中的最低有效位&#xff08;Least Significant Bit&#xff09;。LSB是二进制数中最右边的位&#xff0c;它代表了数值中的最小单位。在汇编程序中&#xff0c;LSB通常用于表示数据的最小精度或者作为标志位。 ---------…...

编程日记 2024/4/7 8:58:32

如何给公司做网站推广宣传/seo网站优化培训

&#xff08;1&#xff09; 10gen&#xff0c;它既是一个云平台&#xff0c;又是一个可下载的开放源代码包&#xff0c;可用于创建您自己的私有云。10gen 是类似于 App Engine 的一个软件栈&#xff0c;它提供与 App Engine 类似的功能 — 但有一些不同之处。通过 10gen&#x…...

编程日记 2024/10/27 17:40:09

动态网站整站源码下载器/湖南专业的关键词优化

说明 在使用git提交代码的时候总是会遇到对于文件名称修改的情况&#xff0c;其他情况下git还是可以识别出删除和新增的文件的&#xff0c;但是在大小写修改的时候&#xff0c;git默认是不区分大小写的&#xff0c;导致在本地显示是正确的但是在远程仓库出现了一个大写一个小写…...

编程日记 2024/10/27 15:10:19

网站频道运营怎么做/新东方一对一辅导价格

题图&#xff1a;https://unsplash.com/nielsenramon在OO(面向对象)编程中&#xff0c;类中的方法有多种形式&#xff1a;实例方法、静态方法、类方法、甚至还可以有抽象方法&#xff0c;本文来说说实例方法在Python中是如何工作的&#xff0c;后面再来谈其他方法。先来定义一个…...

编程日记 2024/10/27 12:18:14

做网站推广需要什么专业/永久免费制作网页

ASM镜像和磁盘组冗余2017-10-31 Oracle 宅必备上节讲了磁盘发现的内容&#xff0c;这节内容详细讲解写ASM镜像和故障组1. ASM MirroringASM可以为ASM 文件提供镜像服务&#xff0c;做法为将不同的文件区拷贝放在故障组中&#xff0c;这样可以保证文件副本不会存放在同个故障组中…...

编程日记 2024/10/27 10:19:28

服装网站建设定制/百度收录权重

tags: web前端库 基于easyUI开发的一个综合案例模版 <% page language"java" pageEncoding"UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>练习</title>&…...

编程日记 2024/10/27 9:56:08

嘉定南翔网站建设/广告推广怎么做最有效

ip地址和域名的关系是&#xff1a;域名和ip地址之间的解析是多对一的&#xff0c;即多个域名可以解析到一个IP地址上&#xff0c;但是一个域名不能解析到多个IP地址上(理论上)。域名解析就是域名到IP地址的转换过程。什么是ip地址&#xff1f;IP地址(Internet Protocol Address…...

编程日记 2024/10/27 7:04:48