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

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越大越好&#xff0c;上限一般是1024个blocksize 一、不同核函数前缀 二、指定kernel要执行的线程数量 总共需要线程数是&#xff1a; 1 * N N个线程…...

C++二级:满足条件的数的累加

现有n个整数&#xff0c;将其中个位数为k的数进行累加求和。 输入 第一行1个整数n。&#xff08; 0 < n < 1000&#xff09; 第二行n个非负整数&#xff0c;以空格分隔&#xff0c;每个数不大于100000。 第三行1个整数k。(0 ≤ k ≤ 9) 输出 输出满足题目要求的累加和。…...

【山大909算法题】2014-T1

文章目录 1.原题2.算法思想3.关键代码4.完整代码5.运行结果 1.原题 为带表头的单链表类Chain编写一个成员函数Reverse&#xff0c;该函数对链表进行逆序操作&#xff08;将链表中的结点按与原序相反的顺序连接&#xff09;&#xff0c;要求逆序操作就地进行&#xff0c;不分配…...

【MySQL实战45讲笔记】基础篇——深入浅出索引(上)

系列文章 基础篇——MySQL 的基础架构 基础篇——redo log 和 binlog 基础篇——事务隔离 目录 系列文章深入浅出索引&#xff08;上&#xff09;4.1 索引的常见模型4.2 InnoDB 的索引模型4.3 索引维护4.4 思考&#xff1a;为什么要重建索引以及如何做&#xff1f; 深入浅出索…...

通关C语言自定义类型:联合和枚举

C语言的自定义类型有四个分别是&#xff1a;数组&#xff1b;结构体&#xff08;struct&#xff09;&#xff1b;联合体&#xff08;union&#xff09;&#xff1b;枚举&#xff08;enum&#xff09;。前面已经讨论过数组和结构体&#xff0c;这期让我们来学习一下联合体和枚举…...

python高阶技巧一

闭包 简单认识一下闭包 以下代码&#xff0c;内层inner函数不仅依赖于自身的参数b&#xff0c;还依赖于外层outer函数的参数a。inner就是一个闭包函数&#xff0c;既能访问外部变量&#xff0c;又保证外部变量不是全局的&#xff0c;不会被篡改掉&#xff0c;确保了外部变量的…...

Java 对象头、Mark Word、monitor与synchronized关联关系以及synchronized锁优化

1. 对象在内存中的布局分为三块区域&#xff1a; &#xff08;1&#xff09;对象头&#xff08;Mark Word、元数据指针和数组长度&#xff09; 对象头&#xff1a;在32位虚拟机中&#xff0c;1个机器码等于4字节&#xff0c;也就是32bit&#xff0c;在64位虚拟机中&#xff0…...

鸿蒙网络编程系列50-仓颉版TCP回声服务器示例

1. TCP服务端简介 TCP服务端是基于TCP协议构建的一种网络服务模式&#xff0c;它为HTTP&#xff08;超文本传输协议&#xff09;、SMTP&#xff08;简单邮件传输协议&#xff09;等高层协议的应用程序提供了可靠的底层支持。在TCP服务端中&#xff0c;服务器启动后会监听一个或…...

软件测试基础(自动化测试、性能测试)

&#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 自动化测试的意义 缩短软件开发测试周期&#xff0c;可以让产品更快投放市场 测试效率高&#xff0c;充分利用硬件资源 节省人力资源&#xff0c;降低测试…...

C++中的原子操作:原子性、内存顺序、性能优化与原子变量赋值

一、原子操作与原子性 原子操作&#xff08;atomic operation&#xff09;是并发编程中的一个核心概念&#xff0c;指的是在多线程环境中&#xff0c;一个操作一旦开始&#xff0c;就不会被其他线程的操作打断&#xff0c;直至该操作完成。这种不可分割的特性保证了操作的原子…...

游戏引擎学习第19天

介绍 这段内容描述了开发者在进行游戏开发时&#xff0c;对于音频同步和平台层的理解和调整的过程。以下是更详细的复述&#xff1a; 开发者表达了他希望今天继续进行的工作内容。他提到&#xff0c;昨天他讲解了一些关于音频的内容&#xff0c;今天他想稍微深入讲解一下他正…...

RocketMQ: 专业术语以及相关问题解决

概述 要了解 RocketMQ 的多个关键特性的实现原理&#xff0c;并对消息中间件遇到的各种问题进行解决我们引用 JMS 规范 与 CORBA Notification 规范&#xff0c;规范为我们设计系统指明了方向但是仍有不少问题规范没有提及&#xff0c;对于消息中间件又至关重要RocketMQ 并不遵…...

C++ 类和对象中的 拷贝构造 和 运算符重载

构造函数中可以添加参数并添加默认值构成缺省构造&#xff0c;如果我们在构造函数的参数中加上自身类型类的引用和其他给出默认值的参数则会构成一种特殊的构造函数叫做———拷贝构造函数 1.拷贝构造 拷贝构造的特点&#xff1a; 1.拷贝构造函数是构造函数的一个重载 2.拷…...

el-table最大高度无法滚动

解决el-table同时使用fixed和计算的最大高度时固定右边的列无法跟随滚动的问题 原因&#xff1a;el-table组件会根据传入的 max-height 计算表格内容部分 和 fixed部分的最大高度&#xff0c;以此来生成滚动条和产生滚动效果&#xff0c;当传入的 max-height 为一个计算的高度…...

Vscode写markdown快速插入python代码

如图当我按下快捷键CRTLSHIFTK 自动出现python代码片段 配置方法shortcuts’ 打开这个json文件 输入 {"key": "ctrlshiftk","command": "editor.action.insertSnippet","when": "editorTextFocus","args&…...

基于 NCD 与优化函数结合的非线性优化 PID 控制

基于 NCD 与优化函数结合的非线性优化 PID 控制 1. 引言 NCD&#xff08;Normalized Coprime Factorization Distance&#xff09;优化是一种用于非线性系统的先进控制方法。通过将 NCD 指标与优化算法结合&#xff0c;可以在动态调整控制参数的同时优化控制器性能。此方法特别…...

【数据分析】基于GEE实现大津算法提取洞庭湖流域水体

大津算法提取水体 1.写在前面2.洞庭湖水体识别1.写在前面 最大类间方差法,也称为Otsu或大津法,是一种高效的图像二值化算法,由日本学者Otsu于1979年提出。该算法基于图像的频率分布直方图,假设图像包含两类像素(前景和背景),并计算出一个最佳阈值,以最大化类间方差,从…...

计算机网络安全 —— 报文摘要算法 MD5

一、报文摘要算法基本概念 ​ 使用加密通常可达到报文鉴别的目的&#xff0c;因为伪造的报文解密后一般不能得到可理解的内容。但简单采用这种方法&#xff0c;计算机很难自动识别报文是否被篡改。另外&#xff0c;对于不需要保密而只需要报文鉴别的网络应用&#xff0c;对整个…...

LeetCode 746. 使用最小花费爬楼梯 java题解

https://leetcode.cn/problems/min-cost-climbing-stairs/description/ 优化&#xff1a;可以不用dp数组&#xff0c;用变量&#xff0c;节省空间。 class Solution {public int minCostClimbingStairs(int[] cost) {int lencost.length;int[] dpnew int[len1];dp[0]0;//爬到0…...

Kubernetes的pod控制器

文章目录 一&#xff0c;什么是pod控制器二&#xff0c;pod控制器类型&#xff08;重点&#xff09;1.ReplicaSet2.Deployment3.DaemonSet4.StatefulSet5.Job6.Cronjob 三&#xff0c;pod与控制器的关系1.Deployment2.SatefulSet2.1StatefulSet组成2.2headless的由来2.3有状态服…...

ArcMap 处理栅格数据地形图配准操作

ArcMap 处理栅格数据地形图配准操作今天分享 一、地形图配准 1、绘图 点击 开始绘制&#xff0c;四条线 2、地理配准 1&#xff09;点击弹出 2&#xff09;画控制点 关闭自动校正 画线 从焦点向外划线&#xff0c;然后邮件输入坐标弹出框&#xff0c;填写相应内容&#xff0c…...

comprehension

1.读题---猜---文章主题 只读题目&#xff0c;不读选项 2.文章--定位 3.用文章对应选项 1 be based on be dependent upon 2 fruitful adj.富有成效的;硕果累累的; 3 unfruitful adj.徒然的&#xff0c;无益的&#xff0c;没有结果的 4 desperately adv.拼命地&#x…...

开源宝藏:Smart-Admin 重复提交防护的 AOP 切面实现详解

首先&#xff0c;说下重复提交问题&#xff0c;基本上解决方案&#xff0c;核心都是根据URL、参数、token等&#xff0c;有一个唯一值检验是否重复提交。 而下面这个是根据用户id&#xff0c;唯一值进行判定&#xff0c;使用两种缓存方式&#xff0c;redis和caffeine&#xff…...

使用 npm 安装 Electron 作为开发依赖

好的&#xff0c;下面是一个使用 npm pack 和 npm install 命令来打包和安装离线版本的 npm 包的具体示例。我们将以 electron 为例&#xff0c;演示如何在有网络连接的机器上打包 electron&#xff0c;然后在没有网络连接的机器上安装它。 步骤 1: 在有网络连接的机器上打包 …...

JavaWeb之综合案例

前言 这一节讲一个案例 1. 环境搭建 然后就是把这些数据全部用到sql语句中执行 2.查询所有-后台&前台 我们先写后台代码 2.1 后台 2.2 Dao BrandMapper&#xff1a; 注意因为数据库里面的名称是下划线分割的&#xff0c;我们类里面是驼峰的&#xff0c;所以要映射 …...

MySQL 报错:1137 - Can‘t reopen table

MySQL 报错&#xff1a;1137 - Can’t reopen table 1. 问题 对临时表查询&#xff1a; select a.ts_code,a.tsnum,b.tsnum from (select t.ts_code ,count(*) tsnum from tmp_table t group by t.ts_code having count(*) > 20 and count(*)< 50 ) a ,(select t.ts_…...

Claude3.5-Sonnet和GPT-4o怎么选(附使用链接)

随着人工智能模型的不断进化&#xff0c;传统的评估标准已经逐渐变得陈旧和不再适用。以经典的“喝水测试”为例&#xff0c;过去广泛应用于检测模型能力&#xff0c;但现如今即便是国内的一些先进模型&#xff0c;也能够轻松答对这些简单的问题。因此&#xff0c;我们亟需引入…...

使用itextpdf进行pdf模版填充中文文本时部分字不显示问题

在网上找了很多种办法 都解决不了; 最后发现是文本域字体设置出了问题; 在这不展示其他的代码 只展示重要代码; 1 引入扩展包 <dependency><groupId>com.itextpdf</groupId><artifactId>itext-asian</artifactId><version>5.2.0</v…...

java-贪心算法

1. 霍夫曼编码&#xff08;Huffman Coding&#xff09; 描述&#xff1a; 霍夫曼编码是一种使用变长编码表对数据进行编码的算法&#xff0c;由David A. Huffman在1952年发明。它是一种贪心算法&#xff0c;用于数据压缩。霍夫曼编码通过构建一个二叉树&#xff08;霍夫曼树&a…...