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

html+js+css在线倒计时

news 文章来源：https://blog.csdn.net/w11111xxxl/article/details/140219724 2024/10/5 12:48:01

代码在图片后面  点赞加关注 谢谢大佬照顾😜

图例

时间到前

7f875e47cb434f7887b2ad3b50198269.jpg

 时间到后

d9686c2bdc564b99a94b2092a47b67ae.jpg

 源代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倒计时</title>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f4f4f4;
        margin: 0;
        font-family: Arial, sans-serif;
    }
    
    .countdown-container {
        text-align: center;
        border-radius: 8px;
        padding: 20px;
        transition: border-color 0.3s ease;
    }
    
    h1 {
        font-size: 2.5em;
        color: #333;
        margin-bottom: 20px;
      text-align:center;
    }
    
    .time-left {
        font-size: 1.8em;
        color: #333;
        border: 2px solid #4caf50;
        padding: 10px;
        border-radius: 8px;
    }
    
    .time-left.time-up {
        border-color: #e74c3c;
    }
</style>
</head>
<body>
<div class="countdown-container">
    <p class="time-left">距离下班还1分钟</p>
</div>

<script>
    const timeDisplay = document.querySelector('.time-left');
    let countdown = 1 * 60; // 5 minutes in seconds

    function updateCountdown() {
        let minutes = Math.floor(countdown / 60);
        let seconds = countdown % 60;

        minutes = minutes < 10 ? '0' + minutes : minutes;
        seconds = seconds < 10 ? '0' + seconds : seconds;

        timeDisplay.textContent = `距离下班还有${minutes}:${seconds}`;

        if (countdown <= 0) {
            timeDisplay.classList.add('time-up');
            clearInterval(intervalId);
        }

        countdown--;
    }

    const intervalId = setInterval(updateCountdown, 1000);
</script>
</body>
</html>

相关文章：

html+js+css在线倒计时

代码在图片后面 点赞加关注 谢谢大佬照顾&#x1f61c; 图例 时间到前 时间到后 源代码 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width,…...

编程日记 2024/7/6 2:34:38

构建LangChain应用程序的示例代码：55、如何实现多代理模拟，其中特权代理决定谁发言。这遵循与多代理分散发言者选择相反的选择方案

示例展示了如何实现一个多代理模拟,其中一个特权代理决定谁来发言。 这遵循与多代理分散式发言人选择相反的选择方案。 我们在一个虚构的新闻网络模拟环境中展示这种方法的一个例子。这个例子将展示我们如何实现能够: 在说话前思考终止对话 的代理。 导入LangChain相关模块…...

编程日记 2024/7/6 2:33:37

船舶雷达与导航系统选择7/8防水插座的原因分析

概述 船舶雷达与导航系统在现代航海中扮演着至关重要的角色&#xff0c;它们为船舶提供准确的导航信息&#xff0c;确保航行的安全和效率。在这些系统中&#xff0c;7/8防水插座的使用尤为重要&#xff0c;因为它们能够在恶劣的海上环境中提供稳定的电力和信号连接。接下来&am…...

编程日记 2024/7/6 2:32:36

墨烯的C语言技术栈-C语言基础-006

六.常量 C语言的常量为 字面常量 const修饰的常变量 #define定义的 枚举常量 int main() { // 四个都是字面常量 30; 3.14; "w"; // 字符常量 "abc"; // const修饰的常变量 const int a 10; // 在C语言中,const修饰的a,本质是变量,但不能直…...

编程日记 2024/7/6 2:31:35

常用SHELL命令

在 Unix/Linux 系统中&#xff0c;除了基本的文件和目录操作命令外&#xff0c;还有许多强大的工具命令&#xff0c;用于文本处理、系统监控、文件操作等。以下是一些常用的 Shell 命令&#xff0c;特别是类似 sed 和 awk 的文本处理工具&#xff1a; 文本处理命令 sed - 流编…...

编程日记 2024/7/6 2:29:31

Python脚本：将Word文档转换为Excel文件

引言 在文档处理中&#xff0c;我们经常需要将Word文档中的内容转换成其他格式&#xff0c;如Excel&#xff0c;以便更好地进行数据分析和报告。针对这一需求&#xff0c;我编写了一个Python脚本&#xff0c;能够批量处理指定目录下的Word文档&#xff0c;将其内容结构化并转换…...

编程日记 2024/7/6 2:28:30

【单链表】03 设L为带头结点的单链表，编写算法实现从尾到头反向输出每个结点的值。

&#x1f57a;作者&#xff1a; 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux算法题上机准备 &#x1f618;欢迎 ❤️关注 &#x1f44d;点赞 &#x1f64c;收藏 ✍️留言 题目 设L为带头结点的单链表&#xff0c;编写算法实现从尾到头反向输出每个结点的值。 算法…...

编程日记 2024/7/6 2:26:28

鸿蒙开发设备管理：【@ohos.vibrator (振动)】

振动 说明&#xff1a; 开发前请熟悉鸿蒙开发指导文档&#xff1a;gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。 本模块首批接口从API version 8开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。 导入模块 imp…...

编程日记 2024/7/6 2:25:27

【信息学奥赛】CSP-J/S初赛07 排序算法及其他算法在初赛中的考察

本专栏&#x1f449;CSP-J/S初赛内容主要讲解信息学奥赛的初赛内容&#xff0c;包含计算机基础、初赛常考的C程序和算法以及数据结构&#xff0c;并收集了近年真题以作参考。 如果你想参加信息学奥赛&#xff0c;但之前没有太多C基础&#xff0c;请点击&#x1f449;专栏&#…...

编程日记 2024/7/6 2:24:26

第N7周：seq2seq翻译实战-pytorch复现-小白版

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 理论基础 seq2seq&#xff08;Sequence-to-Sequence&#xff09;模型是一种用于机器翻译、文本摘要等序列转换任务的框架。它由两个主要的递归神经网络&#…...

编程日记 2024/7/6 2:23:25

java集合(1)

目录 一.集合概述 二. 集合体系概述 1. Collection接口 1.1 List接口 1.2 Set接口 2. Map接口 三. ArrayList 1.ArrayList常用方法 2.ArrayList遍历 2.1 for循环 2.2 增强for循环 2.3 迭代器遍历 一.集合概述 我们经常需要存储一些数据类型相同的元素,之前我们学过…...

编程日记 2024/7/6 2:22:23

分布式数据库HBase:从零开始了解列式存储

在接触过大量的传统关系型数据库后你可能会有一些新的问题: 无法整理成表格的海量数据该如何储存? 在数据非常稀疏的情况下也必须将数据存储成关系型数据库吗? 除了关系型数据库我们是否还有别的选择以应对Web2.0时代的海量数据? 如果你也曾经想到过这些问题, 那么HBase将是…...

编程日记 2024/7/6 2:20:21

接口测试流程及测试点！

一、什么时候开展接口测试 1.项目处于开发阶段&#xff0c;前后端联调接口是否请求的通&#xff1f;&#xff08;对应数据库增删改查&#xff09;--开发自测 2.有接口需求文档&#xff0c;开发已完成联调&#xff08;可以转测&#xff09;&#xff0c;功能测试展开之前 3.专…...

编程日记 2024/7/6 2:18:19

已经安装deveco-studio-4.1.3.500的基础上安装deveco-studio-3.1.0.501

目录标题 1、执行exe文件后安装即可2、双击devecostudio64_3.1.0.501.exe2.1、安装Note (注意和4.1的Note放不同目录)2.2、安装ohpm (注意和4.1版本的ohpm放不同目录)2.3、安装SDK (注意和4.1版本的SDK放不同目录) 1、执行exe文件后安装即可 2、双击devecostudio64_3.1.0.501.e…...

编程日记 2024/7/6 2:17:17

【C++】 解决 C++ 语言报错：Use of Uninitialized Variable

文章目录 引言 使用未初始化的变量&#xff08;Use of Uninitialized Variable&#xff09;是 C 编程中常见且危险的错误之一。它通常在程序试图使用尚未赋值的变量时发生&#xff0c;导致程序行为不可预测&#xff0c;可能引发运行时错误、数据损坏&#xff0c;甚至安全漏洞。…...

编程日记 2024/7/6 2:16:16

2024年7月6日 十二生肖 今日运势

小运播报&#xff1a;2024年7月6日&#xff0c;星期六&#xff0c;农历六月初一 &#xff08;甲辰年庚午月辛未日&#xff09;&#xff0c;法定节假日。 红榜生肖&#xff1a;猪、马、兔 需要注意&#xff1a;狗、鼠、牛 喜神方位&#xff1a;西南方 财神方位&#xff1a;正…...

编程日记 2024/7/6 2:13:14

ubuntu丢失网络/网卡的一种原因解决方案

现象 开机进入ubuntu后发现没有网络&#xff0c;无论是在桌面顶部状态栏的快捷键 还是 系统设置中&#xff0c;都没有”有线网“和”无线网“的选项&#xff0c;”代理“的选项是有的使用数据线连接电脑和手机&#xff0c;手机开启”通过usb共享网络“&#xff0c;还是没有任何…...

编程日记 2024/7/6 2:12:13

第6篇 共识机制深度解析：PoW、PoS、DPoS和PBFT

在区块链的世界里，有一个非常重要的概念叫做“共识机制”。它就像是区块链的心脏，保证大家在这条链上的信息是可靠的、不可篡改的。今天，我们就来通俗易懂地聊聊区块链里的四大共识机制：工作量证明（PoW）、权益证明（PoS）、委托权益证明（DPoS）和拜占庭容错（PBFT）。为…...

编程日记 2024/7/6 2:11:12

Windows环境使用SpringBoot整合Minio平替OSS

目录 配置Minio环境 一、下载minio.exe mc.exe 二、设置用户名和密码 用管理员模式打开cmd 三、启动Minio服务器 四、访问WebUI给的地址 SpringBoot整合Minio 一、配置依赖&#xff0c;application.yml 二、代码部分 FileVO MinioConfig MinioUploadService MinioController 三…...

编程日记 2024/7/6 2:10:11

LeetCode 196, 73, 105

目录 196. 删除重复的电子邮箱题目链接表要求知识点思路代码 73. 矩阵置零题目链接标签简单版思路代码 优化版思路代码 105. 从前序与中序遍历序列构造二叉树题目链接标签思路代码 196. 删除重复的电子邮箱 题目链接 196. 删除重复的电子邮箱 表 表Person的字段为id和email…...

编程日记 2024/7/6 2:09:08

在Apache HTTP服务器上配置 TLS加密

安装mod_ssl软件包 [rootlocalhost conf.d]# dnf install mod_ssl -y此时查看监听端口多了一个443端口 自己构造证书 [rootlocalhost conf.d]# cd /etc/pki/tls/certs/ [rootlocalhost certs]# openssl genrsa > jiami.key [rootlocalhost certs]# openssl req -utf8 -n…...

编程日记 2024/7/6 2:06:05

C语言力扣刷题11——打家劫舍1——[线性动态规划]

力扣刷题11——打家劫舍1和2——[线性动态规划] 一、博客声明二、题目描述三、解题思路1、线性动态规划 a、什么是动态规划 2、思路说明 四、解题代码&#xff08;附注释&#xff09; 一、博客声明 找工作逃不过刷题&#xff0c;为了更好的督促自己学习以及理解力扣大佬们的解…...

编程日记 2024/7/6 2:05:04

房屋租赁管理小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;中介管理&#xff0c;房屋信息管理&#xff0c;房屋类型管理&#xff0c;租房订单管理&#xff0c;租房信息管理 微信端账号功能包括&#xff1a;系统首页&#xff0c;房屋信息&am…...

编程日记 2024/7/6 2:04:03

oracle sql语句 排序 fjd = ‘0101‘ 排在 fjd = ‘0103‘ 的前面

要实现这个排序需求&#xff0c;你可以使用 CASE 表达式来自定义排序逻辑。假设你有一个表格名为 your_table&#xff0c;并且有一个字段 fjd 存储类似 ‘0101’, ‘0103’ 这样的值&#xff0c;你可以这样编写 SQL 查询&#xff1a; SELECT * FROM your_table ORDER BY CASE …...

编程日记 2024/7/6 2:03:02

初试成绩占比百分之70！计算机专硕均分340+！华中师范大学计算机考研考情分析！

华中师范大学&#xff08;Central China Normal University&#xff09;简称“华中师大”或“华大”&#xff0c;位于湖北省会武汉&#xff0c;是中华人民共和国教育部直属重点综合性师范大学&#xff0c;国家“211工程”、“985工程优势学科创新平台”重点建设院校&#xff0c…...

编程日记 2024/7/6 2:01:00

【面向就业的Linux基础】从入门到熟练，探索Linux的秘密（十）-git（2）

下面是一些git的常用命令和基本操作&#xff0c;可以当做平常的笔记查询&#xff0c;用于学习&#xff01;&#xff01;&#xff01; 文章目录 前言 一、git 二、git常用命令 总结 前言 下面是一些git的常用命令和基本操作&#xff0c;可以当做平常的笔记查询&#xff0c;用于…...

编程日记 2024/7/6 1:59:58

JMH320【亲测】【御剑九歌】唯美仙侠手游御剑九歌+WIN学习手工端+视频教程+开服清档+运营后台+授权GM物品充值后台

资源介绍&#xff1a; 这也是仙梦奇缘的一个游戏 注意&#xff1a;外网14位IP或域名 ———————————————————————————————————– ps后台介绍: 1区运营后台&#xff1a;http://ip:9981/admin/admintool/ 2区运营后台&#xff1a;http://ip…...

编程日记 2024/7/6 1:57:56

【matlab】信号分解/故障诊断——智能优化算法优化VMD

目录 引言 应用领域 VMD代码实现 智能优化算法优化VMD 引言 VMD&#xff08;变分模态分解&#xff09;是一种新的非线性自适应信号分解方法&#xff0c;它通过变分原理将复杂信号分解为若干个具有不同频率中心和带宽的本征模态函数&#xff08;Intrinsic Mode Functions, …...

编程日记 2024/7/6 1:56:55

【重磅】万能模型-直接能换迪丽热巴的模型

万能模型&#xff0c;顾名思义&#xff0c;不用重新训练src&#xff0c;直接可以用的模型&#xff0c;适应大部分原视频脸 模型用法和正常模型一样&#xff0c;但可以跳过训练阶段&#xff01;直接到合成阶段使用该模型 本模型没有做Xseg&#xff0c;对遮挡过多的画面不会自动适…...

编程日记 2024/7/6 1:55:54

Web基础和HTTP协议

web基础与HTTP协议: web:就是我们所说的网页。打开网站展示的页面。(全球广域网&#xff0c;万维网) world wide web 分布式图形信息系统 http https 超文本传输协议 分布式:计算机系统或者应用程序分布在多台计算机或者服务器上。通过计算机网络互相通信和协作。共同完成任…...

编程日记 2024/7/6 1:53:52

Mini-L-CTF-2022 minispringboot Thymeleaf模板注入 spel的绕过

Mini-L-CTF-2022 minispringboot Thymeleaf模板注入 spel的绕过 就是一个低版本的Thymeleaf注入 漏洞点 public class MainController {GetMapping({"/{language}"})public String test(PathVariable(name "language") String language, RequestParam(…...

编程日记 2024/7/6 1:52:51

LLM - 神经网络的组成

1. 一个神经元的结构&#xff1a;即接受多个输入X向量&#xff0c;在一个权重向量W和一个偏执标量b的作用下&#xff0c;经过激活函数后&#xff0c;产生一个输出。 2. 一层神经网络的结构&#xff1a;该层网络里的每个神经元并行计算&#xff0c;得到各自的输出;计算方式是输入…...

编程日记 2024/7/6 1:51:48

C++：拷贝构造函数

拷贝构造函数的引入 用对象来初始化对象 (1)简单变量定义时&#xff0c;可以直接初始化&#xff0c;也可以用另一个同类型变量来初始化。举例说明 (2)用class来定义对象时&#xff0c;可以直接初始化&#xff0c;也可以用另一个对象来初始化。举例说明 testperson xiaohong(na…...

编程日记 2024/7/6 1:50:47

云服务出现故障这样处理

无法连接云服务器 服务器远程无法连接时&#xff0c;可通过7ECloud控制台进行连接。 常见故障现象 1、ping不通 2、ping丢包 3、部分端口telnet不通 4、全部端口telnet不通 5、广告、弹窗植入 6、域名无法访问IP访问正常 常见故障原因 1、云服务器过期、关机或者EIP被…...

编程日记 2024/7/6 1:49:46

CVPR2024自动驾驶轨迹预测方向的论文整理

2024年自动驾驶轨迹预测方向的论文汇总 1、Producing and Leveraging Online Map Uncertainty in Trajectory Prediction 论文地址&#xff1a;https://arxiv.org/pdf/2403.16439 提出针对在线地图不确定性带给轨迹预测的影响对应的解决方案。 在轨迹预测中&#xff0c;利用在…...

编程日记 2024/7/6 1:48:45

数据结构——队列练习题

在C语言中&#xff0c;.和->运算符用于访问结构体的成员变量。它们之间的区别在于&#xff1a;.运算符用于访问结构体变量的成员。->运算符用于访问结构体指针变量的成员 1a&#xff08;rear指向队尾元素后一位&#xff0c;判空判满时牺牲一个存储单元&#xff09; 首先…...

编程日记 2024/7/6 1:47:44

PLL和CDR的内部结构及其区别

比较PLL和CDR的内部结构及其区别&#xff1a; 基本结构&#xff1a; PLL&#xff08;相位锁定环&#xff09;&#xff1a; 相位检测器环路滤波器压控振荡器&#xff08;VCO&#xff09;分频器&#xff08;可选&#xff0c;用于频率合成&#xff09; CDR&#xff08;时钟数据恢复…...

编程日记 2024/7/6 1:46:43

HarmonyOS APP应用开发项目- MCA助手（Day02持续更新中~）

简言&#xff1a; gitee地址&#xff1a;https://gitee.com/whltaoin_admin/money-controller-app.git端云一体化开发在线文档&#xff1a;https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/agc-harmonyos-clouddev-view-0000001700053733-V5注&#xff1a;…...

编程日记 2024/7/6 1:45:41

华为交换机 LACP协议

华为交换机支持的LACP协议&#xff0c;即链路聚合控制协议&#xff0c;是一种基于IEEE 802.3ad标准的动态链路聚合与解聚合的协议。它允许设备根据自身配置自动形成聚合链路并启动聚合链路收发数据。 在LACP模式下&#xff0c;链路聚合组能够自动调整链路聚合&#xff0c;维护…...

编程日记 2024/7/6 1:43:37

node 下载文件到网络共享目录

1、登录网络共享计算器 2、登录进入后复制要存储文件的目录路径 例如&#xff1a; \\WIN-desktop\aa\bb\cc 3、node 下载后写入网络共享目录 注意&#xff08;重要&#xff09;:在使用UNC路径时&#xff0c;请确保你正确转义了反斜杠&#xff08;使用两个反斜杠来表示一个&…...

编程日记 2024/7/6 1:41:35

STM32基础知识

一.STM32概述 第一款STM32单片机发布的时间为2007年6月11日。由意法半导体&#xff08;ST&#xff09;公司推出&#xff0c;是STM32系列中的首款产品&#xff0c;具体型号为STM32F1&#xff0c;它是一款基于Cortex-M内核的32位微控制器&#xff08;MCU&#xff09;。 STM32F1…...

编程日记 2024/7/6 1:40:34

安装docker版rabbitmq 3.12

本文介绍在Ubuntu22中安装docker版rabbitmq 3.12。 一、拉取镜像 docker pull rabbitmq:3.12.14-management二、创建数据目录和docker-compose文件 创建目录&#xff1a; cd /root mkdir rabbitmq-docker cd rabbitmq-docker mkdir data chmod 777 data创建docker-compose配…...

编程日记 2024/7/6 1:39:32

c++重定向输出和输出（竞赛讲解）

1.命令行重定向 在命令行中指定输出文件 指令 .\重定向学习.exe > 1.txt 效果 命令行输入和输出 指令 .\重定向学习.exe < 2.txt > 1.txt 效果 代码 #include<bits/stdc++.h> using namespace std; int n; int main(){cin>>n;for(int i=0;i<n;i…...

编程日记 2024/7/6 1:38:31

实在智能对话钉钉：宜搭+实在Agent，AI时代的工作方式

比起一个需求需要等产品、技术排期&#xff0c;越来越多的人开始追求把自己武装成「全能战士」&#xff0c;通过低代码工具一搭&#xff0c;一个高效的工作平台便产生了。 宜搭是钉钉自研的低代码应用构建平台&#xff0c;无论是专业开发者还是没有代码基础的业务人员&#xf…...

编程日记 2024/7/6 1:36:30

MySQL的Docker部署方式

说明:Docker部署MySQL主要是简单快速&#xff0c;不会对电脑系统造成污染。假如你的本地没有Docker&#xff0c;或者你不会使用Docker&#xff0c;则使用PyCharm去启动MySQL&#xff0c;或者直接在本机安装MySQL都是可以的。最重要的是&#xff0c;你要有一个MySQL环境&#xf…...

编程日记 2024/7/6 1:35:29

光伏电站数据采集方案（基于工业路由器部署）

​ 一、方案概述 本方案采用星创易联SR500工业路由器作为核心网关设备&#xff0c;实现对光伏电站现场数据的实时采集、安全传输和远程监控。SR500具备多接口、多功能、高可靠性等特点&#xff0c;能够满足光伏电站数据采集的各种需求。&#xff08;key-iot.com/iotlist/sr500…...

编程日记 2024/7/6 1:34:27

一文让你彻底搞懂什么是CDN

一、引言 在当今互联网时代&#xff0c;网站的加载速度和稳定性是用户体验的关键因素之一。而CDN&#xff08;Content Delivery Network&#xff0c;内容分发网络&#xff09;作为提升网站性能的重要技术手段&#xff0c;受到了广泛的关注和应用。本篇博客将深入探讨CDN的工作…...

编程日记 2024/7/6 1:32:24

1023记录

米哈游二面 自动化测试中自动化驱动的能力&#xff1f; pytest的驱动能力&#xff1a; 1&#xff0c;自动发现测试用例&#xff1a;以"test_"开头的Python文件、以"Test"开头的类和以"test_"开头的函数&#xff0c;将它们识别为测试用例 2&…...

编程日记 2024/7/6 1:30:18

【并发编程JUC】AQS详解

定义理解 AQS&#xff0c;全称为AbstractQueuedSynchronizer&#xff0c;是Java并发包&#xff08;java.util.concurrent&#xff09;中的一个框架级别的工具类&#xff0c;用于构建锁和同步器。它是许多同步类的基础&#xff0c;如ReentrantLock、Semaphore、CountDownLatch等…...

编程日记 2024/7/6 1:29:17

如何找BMS算法、BMS软件的实习

之前一直忙&#xff0c;好久没有更新了&#xff0c;今天就来写一篇文章来介绍如何找BMS方向的实习&#xff0c;以及需要具备哪些条件&#xff0c;我的实习经历都是在读研阶段找的&#xff0c;读研期间两段的实习经历再加上最高影响因子9.4分的论文&#xff0c;我的秋招可以说是…...

编程日记 2024/7/6 1:28:16