html+js+css在线倒计时

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

图例

时间到前

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>

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

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

相关文章

10.09面试题目记录

艾融软件 - 线上面试题 排序算法的时间复杂度 O(n^2&#xff09;&#xff1a;冒泡&#xff0c;选择&#xff0c;插入 O(logn&#xff09;&#xff1a;折半插入排序 O(nlogn)&#xff1a;希尔&#xff0c;归并&#xff0c;快速&#xff0c;堆 O(nk)&#xff1a;桶&#xff0c;…

ListView 的简单使用及 ArrayAdapter 中参数详解

&#x1f604;作者简介&#xff1a; 小曾同学.com,一个致力于测试开发的博主⛽️&#xff0c;主要职责&#xff1a;测试开发、CI/CD&#xff0c;日常还会涉及Android开发工作。 如果文章知识点有错误的地方&#xff0c;还请大家指正&#xff0c;让我们一起学习&#xff0c;一起…

【ARMv8/v9 GIC 系列 5.2 -- GIC 分组介绍:Group 0 |Group 1| Non-Secure Group 1】

请阅读【ARM GICv3/v4 实战学习 】 文章目录 GIC Interrupt grouping中断分组配置寄存器GIC 中断分组介绍Group 0(安全组0)Group 1(安全组1)Non-Secure Group 1(非安全组1)总结及例子GIC Interrupt grouping ARM GICv3 通过中断分组机制,与ARMv8异常模型和安全模型进行…

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

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

实现原理:远程过程调用(RPC)

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~~ &#x1f4a5;&#x1f4a5;个人主页&#xff1a;奋斗的小羊 &#x1f4a5;&#x1f4a5;所属专栏&#xff1a;C语言 &#x1f680;本系列文章为个人学习…

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

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

图像的灰度直方图

先来认识一下灰度直方图&#xff0c;灰度直方图是图像灰度级的函数&#xff0c;用来描述每个灰度级在图像矩阵中的像素个数或者占有率。接下来使用程序实现直方图&#xff1a; 首先导入所需的程序包&#xff1a; In [ ]: import cv2 import numpy as np import matplotlib…

PCA算法降维代码示例

这段代码将数据进行PCA降维至3维&#xff0c;并绘制一个三维散点图&#xff0c;展示降维后的前3个主成分。 import pandas as pd import matplotlib.pyplot as plt import seaborn as sns from sklearn.decomposition import PCA from sklearn.preprocessing import StandardS…

JAVA 发送短信信息工具类(腾讯云)

发送短信信息工具类 import cn.hutool.core.collection.CollUtil; import com.tencentcloudapi.common.Credential; import com.tencentcloudapi.common.exception.TencentCloudSDKException; import com.tencentcloudapi.sms.v20210111.SmsClient; import com.tencentcloudapi…

pyecharts可视化案例大全(21~30)

pyecharts可视化案例大全(21~30) 二十一、直方图带标记线(最大值,平均值等)二十二、折线图带自定义标记点二十三、折线图带百分号显示二十四、象形图自定义图形二十五、水球图自定义图形二十六、GEO添加自定义坐标二十七、GEO 带涟漪效果散点图二十八、GEO热力图二十九、GEO…

关于一致性哈希

什么是一致性哈希&#xff1f; 定义和基本原理 一致性哈希&#xff08;Consistent Hashing&#xff09;是一种哈希算法&#xff0c;广泛应用于分布式系统中&#xff0c;主要用于解决动态节点变化&#xff08;如节点增加或减少&#xff09;时的数据分布和负载均衡问题。 定义…

基于Java中的SSM框架实现野生动物公益保护系统项目【项目源码+论文说明】计算机毕业设计

基于Java中的SSM框架实现野生动物公益保护系统演示 摘要 本系统按照网站系统设计的基本流程&#xff0c;遵循系统开发生命周期法和结构化方法&#xff0c;基于Java语言设计并实现了野生动物公益保护系统。该系统基于浏览器/服务器模式&#xff0c;采用JSP技术&#xff0c;后台…

MySQL之备份与恢复(六)

备份与恢复 文件系统快照 先决条件和配置 创建一个快照的消耗几乎微不足道&#xff0c;但还是需要确保系统配置可以让你获取在备份瞬间的所有需要的文件的一致性副本。首先&#xff0c;确保系统满足下面这些条件。 1.所有的InnoDB文件(InnoDB的表空间文件和InnoDB的事务日志…

C++学习第十三天——stack/queue的使用及底层剖析双端队列容器适配器

✨ 少年的旅途应是星辰大海 &#x1f30f; &#x1f4c3;个人主页&#xff1a;island1314 &#x1f525;个人专栏&#xff1a;C学习 &#x1f680; 欢迎关注&#xff1a;&#x1f44d;点赞 &#x1f442;&am…

学会python——用python制作一个绘图板(python实例十九)

目录 1.认识Python 2.环境与工具 2.1 python环境 2.2 Visual Studio Code编译 3.制作一个绘图板 3.1 代码构思 3.2 代码实例 3.3 运行结果 4.总结 1.认识Python Python 是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。 Python 的设计具有很强的可…

昇思25天学习打卡营第12天| 基于MindNLP+MusicGen生成自己的个性化音乐

之前都是看图文类的东西&#xff0c;今天体验一点不一样的。来点听力的内容。 mindspore有音乐生成模型MusicGen&#xff0c;MusicGen支持两种生成模式&#xff1a;贪心&#xff08;greedy&#xff09;和采样&#xff08;sampling&#xff09;。在实际执行过程中&#xff0c;采…

京东金融大数据分析平台总体架构:剖析和解读

京东金融大数据分析平台总体架构&#xff1a;剖析和解读 在现代金融行业中&#xff0c;大数据分析已成为决策支持和业务创新的重要工具。京东金融凭借其强大的大数据分析平台&#xff0c;成功地将海量数据转化为洞察力&#xff0c;为企业和用户提供优质服务。本文将深入探讨京…

代码随想录训练营第二十九天 134加油站 135分发糖果 860柠檬水找零 406根据身高重建队列

第一题&#xff1a; 原题链接&#xff1a;134. 加油站 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 需要三个变量&#xff0c;一个变量start记录结果也就是出发的第一个加油站&#xff0c;一个变量curSum来记录此时加油耗油后剩余的油量&#xff0c;如果发现c…

微前端的需求有哪些?微前端的原理是怎么样的?为什么这么设计,及微前端的应用场景是什么?对有些客户,前端的重要性高于后端

微前端&#xff08;Micro Frontends&#xff09;是将前端应用拆分成多个独立、可部署的部分&#xff0c;每个部分可以由不同的团队独立开发、测试、部署和维护。这种架构类似于微服务在后端的应用&#xff0c;是为了应对复杂前端应用的维护和扩展问题而提出的。 来龙去脉 背景…

【吴恩达机器学习-week2】可选实验:使用 Scikit-Learn 进行线性回归

支持我的工作 &#x1f389; &#x1f4c3;亲爱的朋友们&#xff0c;感谢你们一直以来对我的关注和支持&#xff01; &#x1f4aa;&#x1f3fb; 为了提供更优质的内容和更有趣的创作&#xff0c;我付出了大量的时间和精力。如果你觉得我的内容对你有帮助或带来了欢乐&#xf…