HTML的自动定义倒计时，这个配色存一下
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自定义倒计时</title><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Arial', sans-serif;}body {background: linear-gradient(to right, #3a1c71, #d76d77, #ffaf7b);height: 100vh;display: flex;justify-content: center;align-items: center;color: #fff;}.container {text-align: center;background-color: rgba(0, 0, 0, 0.4);padding: 40px;border-radius: 15px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);}h1 {font-size: 2.5rem;margin-bottom: 20px;}.input-group {margin-bottom: 20px;}label {font-size: 1.2rem;}input[type="number"] {padding: 10px;font-size: 1rem;border: none;border-radius: 5px;margin: 5px;width: 60px;text-align: center;}.buttons {margin-top: 20px;}button {background-color: #ff7e5f;border: none;padding: 10px 20px;border-radius: 5px;font-size: 1.1rem;color: #fff;cursor: pointer;transition: background-color 0.3s ease;}button:hover {background-color: #feb47b;}.countdown-display {margin-top: 30px;font-size: 3rem;font-weight: bold;}.countdown-finished {color: #fffa65;}</style>
</head>
<body><div class="container"><h1>倒计时</h1><div class="input-group"><input type="number" id="hours" min="0" max="23" value="0"><label for="hours">小时</label><input type="number" id="minutes" min="0" max="59" value="0"><label for="minutes">分钟</label><input type="number" id="seconds" min="0" max="59" value="0"><label for="seconds">秒</label></div><div class="buttons"><button onclick="startCountdown()">开始倒计时</button><button onclick="pauseCountdown()">暂停</button><button onclick="resetCountdown()">重置</button></div><div class="countdown-display" id="countdown-display">00:00:00</div></div><script>let countdownInterval;let totalSeconds;let isPaused = false;function startCountdown() {// 如果正在暂停，直接继续计时if (isPaused) {isPaused = false;countdownInterval = setInterval(updateCountdown, 1000);return;}const hours = parseInt(document.getElementById('hours').value, 10);const minutes = parseInt(document.getElementById('minutes').value, 10);const seconds = parseInt(document.getElementById('seconds').value, 10);totalSeconds = hours * 3600 + minutes * 60 + seconds;if (totalSeconds > 0) {clearInterval(countdownInterval);countdownInterval = setInterval(updateCountdown, 1000);}}function updateCountdown() {if (totalSeconds > 0) {totalSeconds--;const hrs = Math.floor(totalSeconds / 3600);const mins = Math.floor((totalSeconds % 3600) / 60);const secs = totalSeconds % 60;document.getElementById('countdown-display').textContent =`${formatTime(hrs)}:${formatTime(mins)}:${formatTime(secs)}`;} else {clearInterval(countdownInterval);document.getElementById('countdown-display').textContent = "倒计时结束";document.getElementById('countdown-display').classList.add('countdown-finished');}}function formatTime(time) {return time < 10 ? `0${time}` : time;}function resetCountdown() {clearInterval(countdownInterval);document.getElementById('countdown-display').textContent = "00:00:00";document.getElementById('hours').value = 0;document.getElementById('minutes').value = 0;document.getElementById('seconds').value = 0;document.getElementById('countdown-display').classList.remove('countdown-finished');isPaused = false; // 重置暂停状态}function pauseCountdown() {if (!isPaused) {clearInterval(countdownInterval);isPaused = true;} else {startCountdown();}}</script>
</body>
</html>相关文章：
HTML的自动定义倒计时，这个配色存一下
<!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>自定义倒计时</title><style>* {mar…...
CUDA补充笔记
文章目录 一、不同核函数前缀二、指定kernel要执行的线程数量三、线程需要两个内置坐标变量来唯一标识线程四、不是blocksize越大越好，上限一般是1024个blocksize 一、不同核函数前缀 二、指定kernel要执行的线程数量 总共需要线程数是： 1 * N N个线程…...
C++二级：满足条件的数的累加
现有n个整数，将其中个位数为k的数进行累加求和。 输入 第一行1个整数n。（ 0 < n < 1000） 第二行n个非负整数，以空格分隔，每个数不大于100000。 第三行1个整数k。(0 ≤ k ≤ 9) 输出 输出满足题目要求的累加和。…...
【山大909算法题】2014-T1
文章目录 1.原题2.算法思想3.关键代码4.完整代码5.运行结果 1.原题 为带表头的单链表类Chain编写一个成员函数Reverse，该函数对链表进行逆序操作（将链表中的结点按与原序相反的顺序连接），要求逆序操作就地进行，不分配…...
【MySQL实战45讲笔记】基础篇——深入浅出索引（上）
系列文章 基础篇——MySQL 的基础架构 基础篇——redo log 和 binlog 基础篇——事务隔离 目录 系列文章深入浅出索引（上）4.1 索引的常见模型4.2 InnoDB 的索引模型4.3 索引维护4.4 思考：为什么要重建索引以及如何做？ 深入浅出索…...
通关C语言自定义类型：联合和枚举
C语言的自定义类型有四个分别是：数组；结构体（struct）；联合体（union）；枚举（enum）。前面已经讨论过数组和结构体，这期让我们来学习一下联合体和枚举…...
python高阶技巧一
闭包 简单认识一下闭包 以下代码，内层inner函数不仅依赖于自身的参数b，还依赖于外层outer函数的参数a。inner就是一个闭包函数，既能访问外部变量，又保证外部变量不是全局的，不会被篡改掉，确保了外部变量的…...
Java 对象头、Mark Word、monitor与synchronized关联关系以及synchronized锁优化
1. 对象在内存中的布局分为三块区域： （1）对象头（Mark Word、元数据指针和数组长度） 对象头：在32位虚拟机中，1个机器码等于4字节，也就是32bit，在64位虚拟机中࿰…...
鸿蒙网络编程系列50-仓颉版TCP回声服务器示例
1. TCP服务端简介 TCP服务端是基于TCP协议构建的一种网络服务模式，它为HTTP（超文本传输协议）、SMTP（简单邮件传输协议）等高层协议的应用程序提供了可靠的底层支持。在TCP服务端中，服务器启动后会监听一个或…...
软件测试基础（自动化测试、性能测试）
🍅 点击文末小卡片 ，免费获取软件测试全套资料，资料在手，涨薪更快 自动化测试的意义 缩短软件开发测试周期，可以让产品更快投放市场 测试效率高，充分利用硬件资源 节省人力资源，降低测试…...
C++中的原子操作：原子性、内存顺序、性能优化与原子变量赋值
一、原子操作与原子性 原子操作（atomic operation）是并发编程中的一个核心概念，指的是在多线程环境中，一个操作一旦开始，就不会被其他线程的操作打断，直至该操作完成。这种不可分割的特性保证了操作的原子…...
游戏引擎学习第19天
介绍 这段内容描述了开发者在进行游戏开发时，对于音频同步和平台层的理解和调整的过程。以下是更详细的复述： 开发者表达了他希望今天继续进行的工作内容。他提到，昨天他讲解了一些关于音频的内容，今天他想稍微深入讲解一下他正…...
RocketMQ: 专业术语以及相关问题解决
概述 要了解 RocketMQ 的多个关键特性的实现原理，并对消息中间件遇到的各种问题进行解决我们引用 JMS 规范 与 CORBA Notification 规范，规范为我们设计系统指明了方向但是仍有不少问题规范没有提及，对于消息中间件又至关重要RocketMQ 并不遵…...
C++ 类和对象中的 拷贝构造 和 运算符重载
构造函数中可以添加参数并添加默认值构成缺省构造，如果我们在构造函数的参数中加上自身类型类的引用和其他给出默认值的参数则会构成一种特殊的构造函数叫做———拷贝构造函数 1.拷贝构造 拷贝构造的特点： 1.拷贝构造函数是构造函数的一个重载 2.拷…...
el-table最大高度无法滚动
解决el-table同时使用fixed和计算的最大高度时固定右边的列无法跟随滚动的问题 原因：el-table组件会根据传入的 max-height 计算表格内容部分 和 fixed部分的最大高度，以此来生成滚动条和产生滚动效果，当传入的 max-height 为一个计算的高度…...
Vscode写markdown快速插入python代码
如图当我按下快捷键CRTLSHIFTK 自动出现python代码片段 配置方法shortcuts’ 打开这个json文件 输入 {"key": "ctrlshiftk","command": "editor.action.insertSnippet","when": "editorTextFocus","args&…...
基于 NCD 与优化函数结合的非线性优化 PID 控制
基于 NCD 与优化函数结合的非线性优化 PID 控制 1. 引言 NCD（Normalized Coprime Factorization Distance）优化是一种用于非线性系统的先进控制方法。通过将 NCD 指标与优化算法结合，可以在动态调整控制参数的同时优化控制器性能。此方法特别…...
【数据分析】基于GEE实现大津算法提取洞庭湖流域水体
大津算法提取水体 1.写在前面2.洞庭湖水体识别1.写在前面 最大类间方差法，也称为Otsu或大津法，是一种高效的图像二值化算法，由日本学者Otsu于1979年提出。该算法基于图像的频率分布直方图，假设图像包含两类像素（前景和背景），并计算出一个最佳阈值，以最大化类间方差，从…...
计算机网络安全 —— 报文摘要算法 MD5
一、报文摘要算法基本概念 使用加密通常可达到报文鉴别的目的，因为伪造的报文解密后一般不能得到可理解的内容。但简单采用这种方法，计算机很难自动识别报文是否被篡改。另外，对于不需要保密而只需要报文鉴别的网络应用，对整个…...
LeetCode 746. 使用最小花费爬楼梯 java题解
https://leetcode.cn/problems/min-cost-climbing-stairs/description/ 优化：可以不用dp数组，用变量，节省空间。 class Solution {public int minCostClimbingStairs(int[] cost) {int lencost.length;int[] dpnew int[len1];dp[0]0;//爬到0…...
ubuntu搭建nfs服务centos挂载访问
在Ubuntu上设置NFS服务器 在Ubuntu上，你可以使用apt包管理器来安装NFS服务器。打开终端并运行： sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享，例如/shared： sudo mkdir /shared sud…...
IGP（Interior Gateway Protocol，内部网关协议）
IGP（Interior Gateway Protocol，内部网关协议） 是一种用于在一个自治系统（AS）内部传递路由信息的路由协议，主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
AtCoder 第409场初级竞赛 A~E题解
A Conflict 【题目链接】 原题链接：A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串，只有在同时为 o 时输出 Yes 并结束程序，否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...
ESP32读取DHT11温湿度数据
芯片：ESP32 环境：Arduino 一、安装DHT11传感器库 红框的库，别安装错了 二、代码 注意，DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...
postgresql|数据库|只读用户的创建和删除（备忘）
CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...
优选算法第十二讲：队列 + 宽搜 优先级队列
优选算法第十二讲：队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...
Web 架构之 CDN 加速原理与落地实践
文章目录 一、思维导图二、正文内容（一）CDN 基础概念1. 定义2. 组成部分 （二）CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 （三）CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 …...
初学 pytest 记录
安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...
算法：模拟
1.替换所有的问号 1576. 替换所有的问号 - 力扣（LeetCode） 遍历字符串：通过外层循环逐一检查每个字符。遇到 ? 时处理： 内层循环遍历小写字母（a 到 z）。对每个字母检查是否满足： 与…...
C#学习第29天：表达式树（Expression Trees）
目录 什么是表达式树？ 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持： 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...