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

倒计时模块复习

news 2026/1/20 2:41:31

经典回顾倒计时

在这里插入图片描述
倒计时的基本布局介绍。
一个内容区域和一个输入区域，内容区域进行划分
在这里插入图片描述
直接使用flex布局会更快一点。
js代码
我们利用一下模块化思想，直接把获得时间这个功能写成一个函数。方便后续的调用

function getTime() {const date = new Date()return `今年是${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日`}document.querySelector('.contain-top').innerHTML = getTime()

然后将输入框中的事件给加载进去，注意格式的划分。使用基本的时间算法

const input = document.querySelector('input')function dateChat() {const nowdate = +new Date()let enddate = +new Date()let time = 0const date1 = new Date()enddate = +new Date(`${date1.getFullYear()}-${date1.getMonth()+1}-${date1.getDate()} ${input.value}`)time = (enddate - nowdate) / 1000let h = parseInt(time / 60 / 60 % 24)h = h < 10 ? '0 ' + h : h + " "let m = parseInt(time / 60 % 60)m = m < 10 ? '0 ' + m : m + " "let s = parseInt(time % 60)s = s < 10 ? '0' + s : sdocument.querySelector('.hour').innerHTML = hdocument.querySelector('.min').innerHTML = mdocument.querySelector('.second').innerHTML = s}

设置回车监听和按钮监听

input.addEventListener('keyup', function (e) {if (e.key === 'Enter') {if (input.value.length > 8) {alert('输入有误')} else {document.querySelector('.timeout').innerHTML = input.valuedateChat()setInterval(dateChat, 1000)}}})const button = document.querySelector('button')button.addEventListener('click', function () {if (input.value.length > 8) {alert('输入有误')} else {document.querySelector('.timeout').innerHTML = input.valuedateChat()setInterval(dateChat, 1000)}})

完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>倒计时</title><style>* {padding: 0;margin: 0;box-sizing: border-box;}.contain {width: 300px;height: 300px;background-color: rgb(174, 10, 42);margin: 0 auto;}.contain-top {text-align: center;color: white;padding-top: 20px;margin-bottom: 20px;}.font {text-align: center;color: white;font-size: 25px;}.contain-middle-time {display: flex;justify-content: center;}.contain-middle-time div {text-align: center;margin-top: 40px;width: 40px;line-height: 40px;height: 40px;color: white;background-color: rgb(50, 44, 44);border-radius: 5px;}.contain-middle-time .word {width: 20px;height: 20px;color: white;background-color: rgb(174, 10, 42);}.timeout {margin-top: 60px;font-size: 20px;color: white;text-align: center;}.timeout::after {content: "下课";}.timechoice {margin-top: 10px;text-align: center;}input {outline: none;text-align: center;width: 100px;height: 20px;border: 1px solid black;border-radius: 3px;}button {background-color: white;height: 20px;border: none;color: black;border-radius: 2px;}button:active {color: red;}</style>
</head><body><div class="contain"><div class="contain-top">今年是2222年2月22日</div><div class="font">下班倒计时</div><div class="contain-middle-time"><div class="hour">12</div><div class="word">:</div><div class="min">12</div><div class="word">:</div><div class="second">12</div></div><div class="timeout">18 : 30 : 00</div></div><div class="timechoice"><input type="text" placeholder="18:00:00"><button>提交</button></div><script>//加载上边的时间function getTime() {const date = new Date()return `今年是${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日`}document.querySelector('.contain-top').innerHTML = getTime()// 加载定义的下课时间const input = document.querySelector('input')function dateChat() {const nowdate = +new Date()let enddate = +new Date()let time = 0const date1 = new Date()enddate = +new Date(`${date1.getFullYear()}-${date1.getMonth()+1}-${date1.getDate()} ${input.value}`)time = (enddate - nowdate) / 1000let h = parseInt(time / 60 / 60 % 24)h = h < 10 ? '0 ' + h : h + " "let m = parseInt(time / 60 % 60)m = m < 10 ? '0 ' + m : m + " "let s = parseInt(time % 60)s = s < 10 ? '0' + s : sdocument.querySelector('.hour').innerHTML = hdocument.querySelector('.min').innerHTML = mdocument.querySelector('.second').innerHTML = s}input.addEventListener('keyup', function (e) {if (e.key === 'Enter') {if (input.value.length > 8) {alert('输入有误')} else {document.querySelector('.timeout').innerHTML = input.valuedateChat()setInterval(dateChat, 1000)}}})const button = document.querySelector('button')button.addEventListener('click', function () {if (input.value.length > 8) {alert('输入有误')} else {document.querySelector('.timeout').innerHTML = input.valuedateChat()setInterval(dateChat, 1000)}})// 倒计时模块</script>
</body></html>

相关文章：

倒计时模块复习

经典回顾倒计时 倒计时的基本布局介绍。 一个内容区域和一个输入区域&#xff0c;内容区域进行划分 直接使用flex布局会更快一点。 js代码 我们利用一下模块化思想&#xff0c;直接把获得时间这个功能写成一个函数。方便后续的调用 function getTime() {const date new Date…...

编程日记 2023/12/7 13:30:22

k8s(三): 基本概念-ReplicaSet与Deployment

PeplicaSet ReplicaSet 的目的是维护一组在任何时候都处于运行状态的 Pod 副本的稳定集合&#xff0c;通常用来保证给定数量的、完全相同的 Pod 的可用性。 最佳实践 Deployment 是一个可以拥有 ReplicaSet 并使用声明式方式在服务器端完成对 Pod 滚动更新的对象。 尽管 Rep…...

编程日记 2023/12/7 13:28:21

Linux 的介绍和云服务器上web 程序部署

目录 一.linux的介绍 1.1linux是什么 1.2linux的发展历程 1.3linux发行版 二.Linux环境搭建 2.1阿里云-云服务器配置 2.2使用终端软件连接Linux 三.操作Linux&#xff0c;部署web程序 3.1Linux指令 3.2部署web程序 第一步&#xff1a;认识yum 第二步&#xff1a;安装…...

编程日记 2023/12/7 13:27:20

Oauth2.0 学习

OAuth 2.0 服务器端通常通过验证每次请求中的访问令牌&#xff08;access token&#xff09;的方式来确保其合法性和有效性。以下是一些通常采用的验证方法&#xff1a; Token Validation Endpoint: OAuth 2.0 规范允许实现一个专门的令牌验证端点&#xff0c;称为 Token Valid…...

编程日记 2023/12/7 13:25:18

Elasticsearch：什么是向量数据库？

向量数据库定义 向量数据库是将信息存储为向量的数据库&#xff0c;向量是数据对象的数值表示&#xff0c;也称为向量嵌入。 它利用这些向量嵌入的强大功能来对非结构化数据和半结构化数据&#xff08;例如图像、文本或传感器数据&#xff09;的海量数据集进行索引和搜索。 向…...

编程日记 2023/12/7 13:24:17

rename--统一的PRF

基本概念 将ARF/PRF进行合并&#xff0c;合同之后的不见&#xff0c;称之为统一的PRF(Physical Register File);存储的是speculative的&#xff0c;以及正确的&#xff08;retire&#xff09;寄存器值&#xff1b; 使用free list&#xff0c;存储PRF中&#xff0c;哪些寄存器是…...

编程日记 2023/12/7 13:22:16

010-editor破解(1)

查看字符串 使用rabin2 -z /home/burning/010editor/010editor | tee 22.txt 查看字符串。 6698 0x003ba380 0x007ba380 68 69 .rodata ascii The password you entered is for an earlier version of this program. 6699 0x003ba3c8 0x007ba3c8 70 71 .rodata ascii You will…...

编程日记 2023/12/7 13:18:11

Ubuntur编译ROS报错：error PCL requires C++14 or above

ubuntu20.04 编译ROS包 报错&#xff1a; error&#xff1a; PCL requires C14 or above&#xff1a; 修改Cmakelists.txt文件&#xff1a; set&#xff08;CMAKE_CXX_STANDARD 14&#xff09; 再次编译成功....

编程日记 2023/12/7 13:16:09

17.认识下Docker之docker的核心原理（2）

1.容器-我的小世界 不知道大家看没看过小说《完美时间》&#xff0c;里面石昊经常进入一个小世界在里面与世隔绝的修炼或者战斗&#xff0c;总之就是在一个完全封闭的空间里做他想做的事情而与外界隔离&#xff0c;不受侵扰。通过前面的分析我们知道&#xff0c;Namepace让应用…...

编程日记 2023/12/7 13:14:08

【EasyExcel实践】万能导出，一个接口导出多张表以及任意字段（可指定字段顺序）

文章目录 前言正文一、POM依赖二、核心Java文件2.1 自定义表头注解 ExcelColumnTitle2.2 自定义标题头的映射接口2.3 自定义有序map存储表内数据2.4 表头工厂2.5 表flag和表头映射枚举2.6 测试用的实体2.6.1 NameAndFactoryDemo2.6.2 StudentDemo 2.7 启动类2.8 测试控制器 三、…...

编程日记 2023/12/7 13:12:06

代码随想录算法训练营第四十二天 _ 动态规划_01背包问题、416.分割等和子集。

学习目标&#xff1a; 动态规划五部曲&#xff1a; ① 确定dp[i]的含义 ② 求递推公式 ③ dp数组如何初始化 ④ 确定遍历顺序 ⑤ 打印递归数组 ---- 调试 引用自代码随想录&#xff01; 60天训练营打卡计划&#xff01; 学习内容&#xff1a; 二维数组处理01背包问题 听起来…...

编程日记 2023/12/7 13:10:05

市场上好用的aspera替代方案，你知道哪些

Aspera作为一个高速文件传输方案曾经非常受欢迎&#xff0c;但是其昂贵的价格却限制了许多用户的选择&#xff0c;因此市场上出现了众多Aspera替代方案&#xff0c;本文将会介绍市场上最好的Aspera替代方案。 最近几年&#xff0c;网络传输已成为现代商业运作中必不可少的一部…...

编程日记 2023/12/7 13:06:01

Stm32_串口的帧(不定长)数据接收

目录标题 前言1、串口中断接收固定帧头帧尾数据1.1、任务需求1.2、实现思路1.3、程序源码&#xff1a; 2、串口中断接收用定时器来判断帧结束3、串口中断接收数据空闲中断3.1、串口的空闲中断3.2、实现思路3.3、程序源码 4、串口的空闲中断DMA转运4.1、DMA简介4.2、DMA模式4.3、…...

编程日记 2023/12/7 13:05:00

L0、Linux常用命令

一、防火墙&#xff1a; 在 Linux 中&#xff0c;关闭防火墙可以使用不同的命令&#xff0c;这取决于你所使用的防火墙软件。在一些常见的 Linux 发行版中&#xff0c;防火墙可能是 iptables 或 firewalld两种&#xff1a; centos6使用iptables作为默认防火墙&#xff1b;cento…...

编程日记 2023/12/7 13:03:59

Golang实践录：读取toml配置

本文对 toml 文件进行解析。 下载 对于toml格式文件&#xff0c;golang 有很多库可以解释 yaml 文件&#xff0c;如toml、viper。由于 viper 可解析格式较多&#xff0c;本文采用该库。 toml语法规则 toml语法规则在官方中文文档上有说明&#xff0c;这里直接使用。 TOML 是…...

编程日记 2023/12/7 13:02:58

超大规模集成电路设计----基于阵列的可编程逻辑（七）

本文仅供学习&#xff0c;不作任何商业用途&#xff0c;严禁转载。本篇文章绝大部分资料来自中国科学院段成华教授PPT 超大规模集成电路设计----基于阵列的可编程逻辑&#xff08;七&#xff09; 7.1 引言7.1.1.回顾7.1.2. 数字逻辑系列Digital Logic Families7.1.3.从定制到半…...

编程日记 2023/12/7 13:01:57

深入探索FastAPI单元测试：使用TestClient轻松测试你的API

原文&#xff1a;深入探索FastAPI单元测试&#xff1a;使用TestClient轻松测试你的API-51CTO.COM 当使用FastAPI进行单元测试时&#xff0c;一个重要的工具是TestClient类。TestClient类允许我们模拟对FastAPI应用程序的HTTP请求&#xff0c;并测试应用程序的响应。这使我们能…...

编程日记 2023/12/7 12:56:53

基于ssm小型企业办公自动化系统论文

摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对小型企业办公信息管理混乱&#xff0c;出错率高&#xff0c;信息安全…...

编程日记 2023/12/7 12:55:52

CasADi - 最优控制开源 Python/MATLAB 库

系列文章目录 文章目录 系列文章目录前言一、介绍1.1 CasADi 是什么&#xff1f;1.2 帮助与支持1.3 引用 CasADi1.4 阅读本文档 二、获取与安装三、符号框架3.1 符号 SX3.1.1 关于命名空间的说明3.1.2 C 用户注意事项 3.2 DM3.3 符号 MX3.4 SX 和 MX 混合使用3.5 稀疏类3.5.1 获…...

编程日记 2023/12/7 12:53:50

Java中使用String字符串的注意事项

引言 介绍字符串在Java中的重要性和普遍性&#xff0c;以及本文将讨论的注意事项。 1. 字符串是不可变的 解释Java中字符串是不可变的概念&#xff0c;即一旦创建&#xff0c;字符串对象的值就不能被修改。强调在对字符串进行操作时应当创建新的字符串对象而不是修改原有的对…...

编程日记 2023/12/7 12:46:44

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

编程新知 2026/1/15 21:24:41

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2026/1/19 5:23:26

3.3.1_1 检错编码（奇偶校验码）

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

编程新知 2026/1/15 5:26:24

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2026/1/2 4:05:05

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

编程新知 2026/1/15 6:53:05

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2026/1/11 12:39:08

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

编程新知 2026/1/15 5:03:53

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

编程新知 2026/1/15 5:25:06

大数据学习（132）-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

编程新知 2025/10/7 8:52:21

如何在网页里填写 PDF 表格？

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

编程新知 2026/1/19 2:35:16