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

embedded/2024/11/27 17:57:01/

在这里插入图片描述

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/embedded/140962.html

相关文章

【单元测试】【Android】JUnit 4 和 JUnit 5 的差异记录

背景 Jetbrain IDE 支持生成 Test 类&#xff0c;其中选择JUnit5 和 JUnit&#xff0c;但是感觉这不是标准的单元测试&#xff0c;因为接口命名吧。 差异对比 两者生成的单测API名称同原API&#xff0c;没加test前缀的。使用差异主要表现在&#xff1a; setUp &#xff06; …

性能测试工具|如何有效度量前端性能

目标 从用户角度明确前端 Web、H5 性能测试需要重点关注的内容&#xff1b; 根据关注内容明确性能测试过程中的性能评判指标和建议的阈值范围&#xff1b; 整理性能测试过程中各性能评价指标的收集方法&#xff1b; 明确性能测试完毕后的测试结果展现形式。 质量模型 用户…

Leetcode3206:交替组 I

题目描述&#xff1a; 给你一个整数数组 colors &#xff0c;它表示一个由红色和蓝色瓷砖组成的环&#xff0c;第 i 块瓷砖的颜色为 colors[i] colors[i] 0 表示第 i 块瓷砖的颜色是 红色 。 colors[i] 1 表示第 i 块瓷砖的颜色是 蓝色 。 环中连续 3 块瓷砖的颜色如果是 …

什么是MyBatis?

MyBatis简介 MyBatis是一款优秀的持久层框架&#xff0c;用于简化Java应用程序对数据库的操作。它曾是Apache的一个开源项目&#xff0c;名为iBatis&#xff0c;2010年迁移到Google Code并改名为MyBatis&#xff0c;2013年11月又迁移到了GitHub。 一、MyBatis的作用 在JavaE…

C#水仙花

打印出所有的“水仙花数”&#xff0c;所谓“水仙花数”是指一个三位数&#xff0c;其各位数字立方和等于该数本身。例如&#xff1a;153是一个“水仙花数”&#xff0c;因为1531*1*1&#xff0b;5*5*5&#xff0b;3*3*3 首先是3位数那就是100-999&#xff0c;遍历它们&#…

【ArcGIS Pro】实现一下完美的坐标点标注

在CAD里利用湘源可以很快点出一个完美的坐标点标注。 但是在ArcGIS Pro中要实现这个效果却并不容易。 虽然有点标题党&#xff0c;这里就尽量在ArcGIS Pro中实现一下。 01 标注实现方法 首先是准备工作&#xff0c;准备一个点要素图层&#xff0c;包含xy坐标字段。 在地图框…

全面提升系统安全:禁用不必要服务、更新安全补丁、配置防火墙规则的实战指南

在当前的网络环境中,系统面临的安全威胁不断增加。为了防止潜在的攻击和漏洞利用,对操作系统进行安全加固是运维工作的重中之重。本文将从禁用不必要的服务、及时更新安全补丁、以及配置防火墙规则三个方面,详细讲解如何全面提升系统的安全性。 一、禁用不必要的服务 为什…

【C/C++】数据库链接入门教程:从零开始的详细指南!MySQL集成与操作

文章目录 环境配置&#xff1a;搭建开发环境的基础步骤2.1 安装MySQL数据库2.2 配置C/C开发环境2.3 下载并安装MySQL Connector/C 基础操作&#xff1a;实现C/C与MySQL的基本交互3.1 建立数据库连接3.2 执行SQL语句3.3 处理查询结果 进阶技巧&#xff1a;提升数据库操作效率与安…