(案例贴2) html+css 倒计时器

欢迎大家使用这个计时器噢

老哥直接附代码咯.

timer.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>body, html {height: 100%;margin: 0;display: flex;flex-direction: column;align-items: center;justify-content: center;background-color: #f9eae1; /* 背景色为淡粉色 */font-family: 'Arial', sans-serif; /* 字体 */}#clockContainer {display: flex;flex-direction: column;align-items: center;justify-content: center;margin-bottom: 20px;background-color: #f6e1e8; /* 控制面板背景色为浅紫色 */border-radius: 20px; /* 控制面板边框圆角 */padding: 20px;box-shadow: 0px 0px 10px 0px #888888; /* 控制面板阴影效果 */}#clock strong {font-size: 150px;color: #ffa9c8;margin-bottom: 20px;}#clockControl {text-align: center;}#clockControl input {margin: 5px;padding: 10px 20px;border: none;border-radius: 10px;background-color: #ff95bf; /* 按钮背景色为浅粉红色 */color: white;font-size: 16px;cursor: pointer;transition: background-color 0.3s;}#clockControl input:hover {background-color: #ff6b9c; /* 鼠标悬停时按钮背景色变为深粉红色 */}#clockControl input:active {background-color: #ff4785; /* 按钮按下时背景色变为更深的粉红色 */}#clockControl.hidden {display: none;}</style>
</head>
<body>
<div id="clockContainer"><div id="clock"><strong>00:00:00</strong></div><div id="clockControl">时:<input id="hinput" type="text" value="00"/> 分<input id="minput" type="text" value="00"/> 秒<input id="sinput" type="text" value="00"/><br/><input id="setB" type="button" value="设置" onclick="setTime()"><input id="startB" type="button" value="开始" onclick="run()"><input id="pauseB" type="button" value="暂停" onclick="pause()"><input id="endB" type="button" value="停止" onclick="stop()"><br/><input id="hiddenB" type="button" value="隐藏控制面板" onclick="toggleVisibility()"></div>
</div><!-- 添加了 clockHidden 元素 -->
<input type="hidden" id="clockHidden" value="00:00:00"><script language="Javascript">var normalelapse = 1000;var nextelapse = normalelapse;var counter;var startTime;var finish = "00:00:00";var timer = null;var controlPanelVisible = true; // 保存控制面板的显示状态,默认为显示function toggleVisibility() {var element = document.getElementById('clockControl');if (controlPanelVisible) {element.classList.add('hidden');controlPanelVisible = false;} else {element.classList.remove('hidden');controlPanelVisible = true;}}function setTime(){startB.disabled = false;pauseB.disabled = true;setB.disabled = false;var s = sinput.value;var m = minput.value;var h = hinput.value;if(isNaN(h) || isNaN(m) || isNaN(s)){return;}var sn = new Number(s);var mn = new Number(m);var hn = new Number(h);var ss = sn < 10 ? ("0" + sn) : s;var sm = mn < 10 ? ("0" + mn) : m;var sh = hn < 10 ? ("0" + hn) : h;var init = sh + ":" + sm + ":" + ss;clock.innerHTML = "<strong>"+init+"</strong>";clockHidden.value = init;window.clearTimeout(timer);window.clearInterval(timer);}function run() {startB.disabled = true;pauseB.disabled = false;setB.disabled = true;endB.disabled = false;counter = 0;startTime = new Date().valueOf();timer = window.setInterval("onTimer()", nextelapse);}function pause() {startB.disabled = false;pauseB.disabled = true;setB.disabled = false;window.clearTimeout(timer);}function stop(){startB.disabled = false;pauseB.disabled = true;setB.disabled = false;endB.disabled = true;sinput.value = "00" ;minput.value = "00" ;hinput.value = "00" ;clock.innerHTML = "<strong>00:00:00</strong>"clockHidden.value = "00:00:00";window.clearTimeout(timer);window.clearInterval(timer);}window.onload = function() {pauseB.disabled = true;}function onTimer(){if (clockHidden.value == finish){window.clearInterval(timer);clock.innerHTML = "<strong><font color=#013878>Time's up!</font></strong>"startB.disabled = true;pauseB.disabled = true;setB.disabled = false;endB.disabled = true;return;}var hms = new String(clockHidden.value).split(":");var s = new Number(hms[2]);var m = new Number(hms[1]);var h = new Number(hms[0]);s -= 1;if (s < 0){s = 59;m -= 1;}if (m < 0){m = 59;h -= 1;}var ss = s < 10 ? ("0" + s) : s;var sm = m < 10 ? ("0" + m) : m;var sh = h < 10 ? ("0" + h) : h;var nowtime = sh + ":" + sm + ":" + ss;clock.innerHTML = "<strong>"+nowtime+"</strong>";clockHidden.value = nowtime;window.clearInterval(timer);counter++;var counterSecs = counter * 1000;var elapseSecs = new Date().valueOf() - startTime;var diffSecs = counterSecs - elapseSecs;nextelapse = normalelapse + diffSecs;if (nextelapse < 0) nextelapse = 0;timer = window.setInterval("onTimer()", nextelapse);}// 添加点击页面空白区域显示控制面板的事件监听器document.addEventListener('click', function(event) {var clockControl = document.getElementById('clockControl');var isClickInsideControl = clockControl.contains(event.target);if (!isClickInsideControl) {clockControl.classList.remove('hidden');controlPanelVisible = true;}});</script></body>
</html>

css

@import url('https://fonts.googleapis.com/css?family=Gochi+Hand:wght@400;500;600&display=swap');
html, body {display: flex;justify-content: center;align-items: center;color: hsl(198, 1%, 29%);font-family: 'Gochi Hand', cursive;text-align: center;font-size: 130%;
}* {padding: 0;margin: 0;
}/* 整个面板 */
#board {position: relative;/* 铺满整个视口 */width: 100vw;height: 100vh;background-color: #f1eee5;overflow: hidden;perspective: 1600px;display: grid;box-sizing: border-box;padding: 50px;
}/* 底图 */
.xixi{width: 720px;height: 120px;position: absolute;left: 50%;bottom: 0;transform: translateX(-50%);
}/* #region代办框start */
/* 整个代办框 */
.container {position: relative;height: 500px;width: 500px;background: #f1f5f8;/* 背景圆点绘制,每个重复的小方块大小为 ​25px × 25px​ */background-image: radial-gradient(#bfc0c1 7.2%, transparent 0);background-size: 25px 25px;border-radius: 20px;box-shadow: 4px 3px 7px 2px #00000040;padding: 1rem;box-sizing: border-box;/* 水平居中对齐 */margin: 0 auto;
}/* 标题 */
.heading {display: flex;align-items: center;justify-content: center;margin-bottom: 1rem;
}
/* To-Do List部分样式 */
.heading__title {transform: rotate(2deg);padding: 0.2rem 1.2rem;border-radius: 20% 5% 20% 5%/5% 20% 25% 20%;background-color: hsla(53, 100%, 93%, 0.708);font-size: 1.5rem;
}
/* 图片元素的宽度为父元素宽度的24% */
.heading__img {width: 24%;
}/* ~ Today I need to ~ */
.form__label {display: block;margin-top: -20px;margin-bottom: 0.5rem;
}
/* 音频 */
audio {width: 280px;height: 15px;margin: 0px auto;border: 1px solid #e0dfc6;border-radius: 8px;
}
/* 输入框 */
.form__input {box-sizing: border-box;background-color: transparent;padding: 0.3rem;/* 边框设置 */border-bottom-right-radius: 15px 3px;border-bottom-left-radius:3px 15px;border: solid 3px transparent;border-bottom: dashed 3px #c6beb1;/* 字体设置 */font-family: 'eryamaomiti', cursive;font-size: 1rem;color: hsla(260, 2%, 25%, 0.7);width: 70%;margin-bottom: 20px;/* 获得焦点时 */&:focus {/* 去掉默认的外边框样式 */outline: none;/* 框变为实线,颜色为#c6beb1 */border: solid 3px #c6beb1;}
}/* submit按钮 */
.button {padding: 0;border: none;/* 顺时针旋转4度 */transform: rotate(4deg);/* 变换的起点为中心点 */transform-origin: center;font-family: 'eryamaomiti', cursive;text-decoration: none;padding-bottom: 3px;border-radius: 5px;/* 添加一个垂直的盒子阴影效果 */box-shadow: 0 2px 0 hsl(198, 1%, 29%);/* 过渡效果的时间和缓动函数 */transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);/* Base64编码的背景图像 */background-image: url('data:image/gif;base64,R0lGODlhBAAEAIABAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5NUY1OENCRDdDMDYxMUUyOTEzMEE1MEM5QzM0NDVBMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5NUY1OENCRTdDMDYxMUUyOTEzMEE1MEM5QzM0NDVBMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk1RjU4Q0JCN0MwNjExRTI5MTMwQTUwQzlDMzQ0NUEzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjk1RjU4Q0JDN0MwNjExRTI5MTMwQTUwQzlDMzQ0NUEzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAQAAAQAsAAAAAAQABAAAAgYEEpdoeQUAOw==');background-color: hsla(0, 0%, 100%, 0.7);
}
/* 按钮内文本样式 */
.button span {background: #f1f5f8;display: block;padding: 0.5rem 1rem;border-radius: 5px;border: 2px solid hsl(198, 1%, 29%);
}
/* 按钮在激活状态和获取焦点时 */
.button:active, .button:focus {transform: translateY(4px);padding-bottom: 0px;outline: 0;
}/* 代办事项列表 */
.toDoList {padding-left: 2.5rem;text-align: left;
}
li {position: relative;padding-top: 0.2rem;font-size: 24px;color: #3c4654;font-family: 'eryamaomiti', cursive;
}
/* 悬停时添加删除线效果 */
li:hover {text-decoration: line-through #d5c8a0;
}/* 右下角的三个爪子 */
.cute1{position: absolute;bottom: 5px;right: 70px;width: 100px;height: 100px;
}
.cute2{position: absolute;bottom: 70px;right: 5px;width: 100px;height: 100px;
}
.cute3{position: absolute;bottom: 0;right: 0;width: 100px;height: 100px;
}
/* #endregion代办框end *//* #region便利贴start */
/* 便利贴样式 */
.stickynote {position: absolute;width: 200px;height: 200px;box-sizing: border-box;padding: 10px;transform: rotateX(5deg);box-shadow: -1px 10px 5px -4px rgba(0, 0, 0, 0.02),inset 0 24px 30px -12px rgba(0, 0, 0, 0.2);/* 之后便利贴内文本框居中 */display: flex;justify-content: center;align-items: center;
}
/* 便利贴文本框 */
.stickynote-text {border-radius: 10px;color: #686a67;font-size: 20px;font-weight: 400;border: none;background: transparent;outline: none;text-align: center;resize: none;overflow: hidden;font-family: 'eryamaomiti', cursive;
}
/* 获得焦点时 */
.stickynote-text:focus {background-color: rgba(0,0,0,0.2);
}
/* 占位符(输入文本前的文本显示) */
.stickynote-text::placeholder {color: #686a67;opacity: 30%;
}
/* #endregion便利贴end *//* #region时钟start */
.clock {margin: -80px auto;height: 10vh;color: #e2a2aca1;font-size: 10vh;font-family: 'eryamaomiti';line-height: 10vh;display: flex;position: relative;overflow: hidden;
}
.clock > div {display: flex;
}
.tick {line-height: 7vh;
}
.tick-hidden {opacity: 0;
}
/* 线性过渡,持续时间为1s */
.move {animation: move linear 1s infinite;
}
@keyframes move {from {transform: translateY(0vh);}to {transform: translateY(-10vh);}
}
/* #endregion时钟end */

为我家小仙女准备的倒计时♥

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/710499.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

GitLab--Merge Request 权限管理

场景 团队在日常开发工作中需要进行分支管理&#xff0c;通常使用feature分支进行开发&#xff0c;然后依次合并到dev分支、release分支&#xff0c;整个代码合并过程不仅仅是代码合并还需要对代码进行审核&#xff0c;如果在线下进行审核合并&#xff0c;这样操作无法保留痕迹…

【力扣hot100】刷题笔记Day18

前言 晚上巩固一下今天的回溯题&#xff0c;基础不牢地动山摇&#xff0c;po一张代码随想录总结的 组合补充 77. 组合 - 力扣&#xff08;LeetCode&#xff09; class Solution:def combine(self, n: int, k: int) -> List[List[int]]:path []res []def backtrack(star…

go垃圾回收

1 go 垃圾回收变更 Go 语言的垃圾回收器&#xff08;GC&#xff09;自其诞生以来一直在不断演进和优化&#xff0c;以提高性能、减少暂停时间和对程序执行的影响。以下是一些关键的改进和变更点&#xff1a; 并发标记周期&#xff1a; Go 语言从一开始就采用了并发标记&#xf…

日立F-4700FL数据分析实验报告

实验设定 日立F-4700FL为荧光分光光度计,可输出三维光谱扫描结果到计算机。D和L为两种化合物。对4种不同的溶液进行三维光谱扫描,得到的光谱文件如下。 溶质光谱文件无K.txtDD.txtLL.txtD+LH.txt光谱文件(txt)的内容格式如下。 Sample: ... File name: ... Run date: ... …

[C#] 重难点区分[In]、[Out]、in、out、in T、out T

[In] 属性&#xff1a; - [In] 属性用于标识参数是一个输入参数。这意味着参数的值将被传递到方法或函数&#xff0c;但在其执行期间不会被修改。 - 当通过 P/Invoke 或 COM 互操作调用函数时&#xff0c;使用 [In] 属性指示参数的传递方式为输入。 - 示例&#xff1a…

深入探析:云计算与边缘计算在软件开发中的应用与挑战

随着互联网技术的飞速发展&#xff0c;云计算和边缘计算作为两种重要的计算模型&#xff0c;已经成为当今IT领域的热点话题。云计算通过将计算、存储、网络等资源集中在云端&#xff0c;为企业提供弹性、可靠、安全的计算服务。而边缘计算则是将部分计算任务从云端迁移到网络边…

BeautifulSoup解析 HTML标签Tag及属性attrs的常用方法

# 使用 BeautifulSoup 解析 HTML 内容 # BeautifulSoup 对象表示整个解析树或文档&#xff0c;可以用来遍历、搜索和操作文档。# 常用方法&#xff1a; # find(name, attrs, recursive, text, **kwargs)&#xff1a;在文档中查找第一个符合条件的元素&#xff0c;并返回该元素…

Java面试值之集合

集合 1.HashMap底层&#xff1f;扩容机制&#xff1f;1.7-1.8的升级&#xff1f;2.HashMap的长度为什么是2的幂次方&#xff1f;3.HashMap 插入1.7和1.8的区别&#xff1f;4.什么是红黑树&#xff1f;O(logn)5.HashMap为什么会使用红黑树&#xff1f;6.ArrayList底层&#xff1…

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之FlowItem容器组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之FlowItem容器组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、FlowItem组件 子组件 可以包含子组件。 接口 FlowItem() 使用该接口来…

免费音频剪辑

在数字时代&#xff0c;音频剪辑已成为许多职业和爱好者不可或缺的技能。无论是制作播客、教育视频、还是进行广告宣传&#xff0c;高质量的音频剪辑都能为作品增色不少。今天&#xff0c;我要为大家强烈安利一款免费且功能强大的音频剪辑工具&#xff0c;它绝对是你办公桌上不…

Kotti-基于Python的开源内容管理系统介绍与使用

前言 Kotti是一个基于Python的开源内容管理系统&#xff08;CMS&#xff09;&#xff0c;旨在为开发人员提供快速、简单和灵活的方式来构建Web应用。它基于Pyramid框架&#xff0c;使用SQLAlchemy进行数据库管理&#xff0c;支持自定义内容类型和可扩展的插件系统。本文将深入…

命令行启动mongodb服务器的问题及解决方案 -- Unrecognized option: storage.journal

目录 mongodb命令行启动问题 -- Unrecognized option: storage.journal问题日志&#xff1a;问题截图&#xff1a;问题来源&#xff1a;错误原因&#xff1a;解决方式&#xff1a; mongodb命令行启动问题 – Unrecognized option: storage.journal 同样是格式出问题的问题分析和…

《Spring Security 简易速速上手小册》第5章 高级认证技术(2024 最新版)

文章目录 5.1 OAuth2 和 OpenID Connect5.1.1 基础知识详解OAuth2OpenID Connect结合 OAuth2 和 OIDC 5.1.2 重点案例&#xff1a;使用 OAuth2 和 OpenID Connect 实现社交登录案例 Demo 5.1.3 拓展案例 1&#xff1a;访问受保护资源案例 Demo测试访问受保护资源 5.1.4 拓展案例…

MySQL锁机制【重点】

参考链接 【1】https://xiaolincoding.com/mysql/lock/mysql_lock.html 【2】https://learnku.com/articles/39212?order_byvote_count& 重要的锁&#xff1a; 表级锁&#xff08;Table-level locks&#xff09;&#xff1a; 表级锁是对整个表进行加锁&#xff0c;当一个事…

Blazor 向 ECharts 传递 option

目标 将ECharts封装为Blazor组件&#xff0c;然后通过jsRuntime向ECharts传递参数&#xff0c;即设置option。 封装ECharts 步骤&#xff1a; 1. 在index.html中引入echarts.min.js&#xff1b; 2. 创建blazor组件&#xff0c;将ref传递给js用于初始化echarts&#xff1b; …

#stm学习总结 (二十八)硬件随机数实验

28.1 随机数发生器简介 STM32F407 自带了硬件随机数发生器&#xff08;RNG&#xff09;&#xff0c;RNG 处理器是一个以连续模拟噪声为基础的随机数发生器&#xff0c;在主机读数时提供一个 32 位的随机数。 28.1.1 RNG 框图 STM32F407 的随机数发生器&#xff08;RNG&#x…

ffmpeg单张图片生成固定时长的视频

ffmpeg -r 25 -f image2 -loop 1 -i fps_1.jpg -vcodec libx264 -pix_fmt yuv420p -s 1080*1920 -r 25 -t 30 -y fps.mp4这个命令将 fps_1.jpg 图片转换为一个 30 秒长的视频&#xff0c;分辨率为 1920x1080&#xff0c;帧率为 25 帧/秒&#xff0c;并使用 libx264 编码器进行压…

LeetCode -- 79.单词搜索

1. 问题描述 给定一个 m x n 二维字符网格 board 和一个字符串单词 word 。如果 word 存在于网格中&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 单词必须按照字母顺序&#xff0c;通过相邻的单元格内的字母构成&#xff0c;其中“相邻”单元格是那些水…

【牛客】SQL125 得分不小于平均分的最低分

描述 请从试卷作答记录表中找到SQL试卷得分不小于该类试卷平均得分的用户最低得分。 示例数据 exam_record表&#xff08;uid用户ID, exam_id试卷ID, start_time开始作答时间, submit_time交卷时间, score得分&#xff09;&#xff1a; iduidexam_idstart_timesubmit_timesc…

kali linux常用命令

1. 网络扫描 功能&#xff1a;网络扫描是用来发现网络中的设备、服务和开放端口的过程。 命令&#xff1a;nmap 例子&#xff1a;nmap -sP 192.168.1.0/24 这个命令使用 Nmap 进行网络扫描&#xff0c;列出 192.168.1.0/24 网段中的所有活跃主机。 2. 密码破解 功能&#xf…