HTML的自动定义倒计时，这个配色存一下

ops/2024/11/27 16:45:56/

在这里插入图片描述

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>javascript">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>

http://www.ppmy.cn/ops/137117.html

相关文章

前端 Vue 3 后端 Node.js 和Express 结合cursor常见提示词结构

前端 Vue 3 后端 Node.js 和Express 结合cursor常见提示词结构

cursor 提示词 后端提示词 请为我开发一个基于 Node.js 和Express 框架的 Todo List 后端项目。项目需要实现以下四个 RESTful API 接口&#xff1a; 查询所有待办事项 接口名: GET /api/get-todo功能: 从数据库的’list’集合中查询并返回所有待办事项参数: 无返回: 包含所…
阅读更多...
Rust sqlx包访问sqlite数据库

Rust sqlx包访问sqlite数据库

如果您正在钻研Rust并希望使用数据库&#xff0c;那么SQLx是一个极好的选择。在本教程中&#xff0c;我们将探索将SQLx与SQLite&#xff08;一种轻量级嵌入式SQL数据库引擎&#xff09;结合使用的基础知识。SQLx crate是一个异步纯Rust SQL crate&#xff0c;具有编译时检查查询…
阅读更多...
25A物联网微型断路器 智慧空开1P 2P 3P 4P-安科瑞黄安南

25A物联网微型断路器 智慧空开1P 2P 3P 4P-安科瑞黄安南

微型断路器&#xff0c;作为现代电气系统中不可或缺的重要组件&#xff0c;在保障电路安全与稳定运行方面发挥着关键作用。从其工作原理来看&#xff0c;微型断路器通过感知电流的异常变化来迅速作出响应。当电路中的电流超过预设的安全阈值时&#xff0c;其内部的电磁感应装置…
阅读更多...
windows中idea选择bash作为控制台指令集，但是系统环境变量未在其中生效处理

windows中idea选择bash作为控制台指令集，但是系统环境变量未在其中生效处理

1. 引言 在windows系统中安装node 以及npm时配置其环境&#xff0c;使用window环境变量的配置方式在系统环境变量设置的地方设置了环境变量如下图1-1&#xff0c;设置后在idea中的控制台通过 echo $PATH 查看环境变量发先跟系统中配置的不一致&#xff0c;而且node -v npm -v指…
阅读更多...
用el-scrollbar实现滚动条，拖动滚动条可以滚动，但是通过鼠标滑轮却无效

用el-scrollbar实现滚动条，拖动滚动条可以滚动，但是通过鼠标滑轮却无效

问题&#xff1a; 用elementplus实现的滚动条的页面中&#xff0c;滑动滚动条可以滚动&#xff0c;但是通过鼠标滑轮却无效&#xff0c;鼠标没有问题。 解决&#xff1a; 在开发者工具中&#xff0c; 元素->事件监听器中发现当我移除网页中祖先元素的滚动事件&#xff0c;该…
阅读更多...
【后端面试总结】MySQL索引

【后端面试总结】MySQL索引

数据库索引不只一种实现方法&#xff0c;但是其中最具代表性&#xff0c;也是我们面试中遇到最多的无疑是B树。 索引为什么选择B树 数据量很大的查找&#xff0c;是不能直接放入内存的&#xff0c;而是需要什么数据就通过磁盘IO去获得。 红黑树&#xff0c;AVL树等二叉查找树…
阅读更多...
Vue.js基础——贼简单易懂！！（响应式 ref 和 reactive、v-on、v-show 和 v-if、v-for、v-bind）

Vue.js基础——贼简单易懂！！（响应式 ref 和 reactive、v-on、v-show 和 v-if、v-for、v-bind）

Vue.js是一个渐进式JavaScript框架&#xff0c;用于构建用户界面。它专门设计用于Web应用程序&#xff0c;并专注于视图层。Vue允许开发人员创建可重用的组件&#xff0c;并轻松管理状态和数据绑定。它还提供了一个虚拟DOM系统&#xff0c;用于高效地渲染和重新渲染组件。Vue以…
阅读更多...
CentOS 7 安装部署 KVM

CentOS 7 安装部署 KVM

1.关闭虚拟机 打开相关选项 打开虚拟机centos7 连接xshell 测试网络&#xff0c;现在就是没问题的&#xff0c;因为我们要使用网络源 安装 GNOME 桌面环境 安装KVM 模块 安装KVM 调试工具 构建虚拟机的命令行工具 qemu 组件,创建磁盘、启动虚拟机等 输入这条命令&#xff0c;…
阅读更多...
最新文章

Copyright @ 2022~2023