倒计时 效果

实现HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>信质集团SAP/ERP切换倒计时</title><style>body {font-family: 'Microsoft YaHei', sans-serif;background-color: rgba(111, 123, 4, 0.5);color: white;text-align: center;margin: 0;padding: 0;height: 100vh;display: flex;flex-direction: column;justify-content: center;align-items: center;}.container {background: url(1.jpg);background-size:cover;padding: 40px;border-radius: 15px;box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);max-width: 100%;height:100%;width: 100%;}h1 {font-size: 6.5rem;margin-top: 200px;margin-bottom: 160px;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);}.countdown {display: flex;justify-content: center;flex-wrap: wrap;gap: 20px;}.countdown-item {background-color: rgba(255, 255, 255, 0.2);padding: 40px;font-size: 3.5rem;border-radius: 20px;min-width: 240px;}.countdown-number {font-size: 5.5rem;font-weight: bold;margin: 10px 0;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);}.countdown-label {font-size: 1.2rem;opacity: 0.8;}.date-info {margin-top: 30px;font-size: 1.2rem;}.motivation {margin-top: 30px;font-style: italic;font-size: 1.3rem;color: #ffcc00;}@media (max-width: 600px) {.countdown-item {min-width: 80px;padding: 15px;}.countdown-number {font-size: 2.5rem;}h1 {font-size: 2rem;}}</style>
</head>
<body><div class="container"><h1>全营一杆枪,SAP项目上线冲剌!</h1><div class="countdown"><div class="countdown-item"><div class="countdown-number" id="days">00</div><div class="countdown-label">天</div></div><div class="countdown-item"><div class="countdown-number" id="hours">00</div><div class="countdown-label">小时</div></div><div class="countdown-item"><div class="countdown-number" id="minutes">00</div><div class="countdown-label">分钟</div></div><div class="countdown-item"><div class="countdown-number" id="seconds">00</div><div class="countdown-label">秒</div></div></div><div class="date-info" style="display:none;" ><p>今天是:<span id="current-date"></span></p><p>信质集团SAP/ERP切换日期:09月30日</p></div><div class="motivation" id="motivation-text"></div></div><script>// 设置高考日期 - 2025年6月7日const gaokaoDate = new Date('2025-09-30T00:00:00');// 励志语句数组const motivations = ["乾坤未定,你我皆是黑马!","今日拼搏的汗水,终将化为明日的辉煌!","每一秒的努力,都在为未来铺路!","坚持就是胜利,高考加油!","你的努力,终将成就更好的自己!","此刻的付出,是为了遇见更好的未来!"];// 更新倒计时function updateCountdown() {const now = new Date();const diff = gaokaoDate - now;// 计算天、小时、分钟、秒const days = Math.floor(diff / (1000 * 60 * 60 * 24));const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));const seconds = Math.floor((diff % (1000 * 60)) / 1000);// 更新显示document.getElementById('days').textContent = days.toString().padStart(2, '0');document.getElementById('hours').textContent = hours.toString().padStart(2, '0');document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');// 更新当前日期const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };document.getElementById('current-date').textContent = now.toLocaleDateString('zh-CN', options);}// 随机显示励志语句// function showRandomMotivation() {//     const randomIndex = Math.floor(Math.random() * motivations.length);//     document.getElementById('motivation-text').textContent = motivations[randomIndex];// }// 初始化updateCountdown();// showRandomMotivation();// 每秒更新一次setInterval(updateCountdown, 1000);// 每30秒更换一次励志语句//setInterval(showRandomMotivation, 30000);</script>
</body>
</html>

资源图片

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

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

相关文章

高性能群集部署技术-Nginx+Tomcat负载均衡群集

目录 #1.1案例概述 1.1.1案例前置知识点 1.1.2案例环境 #2.1案例实施 2.1.1实施准备 2.1.2查看JDK是否安装 2.1.3安装配置Tomcat 2.1.4Tomcat主配置文件说明 2.1.5建立Java的Web站点 #3.1NginxTomcat负载均衡&#xff0c;动静分离群集的实验案例 3.1.1案例概述 3.1.2案例环境…

《Go语言圣经》函数值、匿名函数递归与可变参数

《Go语言圣经》函数值、匿名函数递归与可变参数 函数值&#xff08;Function Values&#xff09; 在 Go 语言中&#xff0c;函数被视为第一类值&#xff08;first-class values&#xff09;&#xff0c;这意味着它们可以像其他值一样被操作&#xff1a;拥有类型、赋值给变量、…

vtk和opencv和opengl直接的区别是什么?

简介 VTK、OpenCV 和 OpenGL 是三个在计算机图形学、图像处理和可视化领域广泛使用的工具库&#xff0c;但它们在功能、应用场景和底层技术上存在显著差异。以下是它们的核心区别和特点对比&#xff1a; 1. 核心功能与定位 工具核心功能主要应用领域VTK (Visualization Toolk…

最新豆包大模型发布!火山引擎推出Agent开发新范式

Datawhale大会 2025火山引擎 Force 原动力大会 6月11日-12日&#xff0c;北京国家会议中心人山人海&#xff0c;2025 火山引擎 Force 原动力大会如约而至。 作为开发者社区的一员&#xff0c;这场大会上的一系列新发布让我们感受到了&#xff1a;这个 Agent 技术落地元年的关键…

RFC4291-IPv6地址架构解说

RFC 4291 是由互联网工程任务组&#xff08;IETF&#xff09;发布的关于 IPv6 地址架构 的标准文档。 该文档详细定义了 IPv6 地址的格式、类型、表示方法以及分配方式。 以下是对 RFC 4291 中 IPv6 地址架构的全面解析&#xff0c;包括地址格式、类型、表示方法、特殊地址以…

简单对比 **HTTP**、**MQTT** 和 **CoAP** 这三种通信协议

对比 HTTP、MQTT 和 CoAP 这三种通信协议&#xff0c;从 消息结构、资源占用、安全性 等方面进行全面分析。 &#x1f310; HTTP vs MQTT vs CoAP 对比 特性HTTPMQTTCoAP协议层级应用层基于 TCP应用层基于 TCP / WebSocket应用层基于 UDP (也支持 TCP)消息模式请求/响应 (客户…

【Dify 案例】【自然语言转SQL案例】【五】【实战二】【财务管理查询商品信息数据】

援引实战一,进行数据业务处理化 1.开始 2.自然语言转SQL的工具 3.参数提取器 4.SQL查询

FPGA基础 -- Verilog语言要素之标识符

一、什么是标识符&#xff08;Identifier&#xff09; 在 Verilog 中&#xff0c;标识符是用户定义的名字&#xff0c;用于标识模块、变量、端口、函数、任务、参数、宏定义等各种语言要素。 就像 C 语言的变量名、函数名一样&#xff0c;Verilog 中的标识符为 HDL 代码提供了…

Tomcat双击startup.bat闪退的解决方法

首先需要确认java环境是否配置正确&#xff0c;jdk是否安装正确 winR打开cmd&#xff0c;输入该命令 java -version 出现对应的版本就说明jdk配置正确 如果没有&#xff0c;则参考jdk的安装及配置 如果以上都没有问题&#xff0c;就继续排查 确认Tomcat的环境变量配置 概…

计算机基础(三):深入解析Java中的原码、反码、补码

计算机基础系列文章 计算机基础(一)&#xff1a;ASCll、GB2312、GBK、Unicode、UTF-32、UTF-16、UTF-8深度解析 计算机基础(二)&#xff1a;轻松理解二进制、八进制、十进制和十六进制 计算机基础(三)&#xff1a;深入解析Java中的原码、反码、补码 目录 引言一、 基础概念&…

phpstudy无法启动mysql,一启动就关闭,完美解决

phpstudy无法启动mysql&#xff0c;一启动就关闭&#xff0c;完美解决 phpstudy的mysql无法启动&#xff0c;一启动就关闭如何解决。 问题出现的原因&#xff1a;phpstudy自带的mysql&#xff0c;可能与之前单独安装的mysql发生冲突。(之前安装的mysql已经占用3306端口) 解决方…

mysql中的<>和!=

在MySQL中&#xff0c;<> 运算符表示 不等于。它与 ! 运算符功能完全相同&#xff0c;都是用于比较两个表达式是否不相等。 SELECT * FROM table_name WHERE column_name <> value;当 column_name 的值不等于 value 时&#xff0c;返回该行当值相等或为 NULL 时&a…

C#学习日记

命名空间 知识点一 命名空间基本概念 概念 命名空间是用来组织和重用代码的 作用 就像是一个工具包&#xff0c;类就像是一件一件的工具&#xff0c;都是申明在命名空间中的 知识点二 命名空间的使用 基本语法 namespace 命名空间名 {类类 } namespace MyGame {class GameO…

第八十二篇 大数据开发基础:树形数据结构深度解析与实战指南(附创新生活案例)

目录 一、树的本质&#xff1a;层次化数据组织二、生活中的树形智慧&#xff1a;无处不在的层次案例1&#xff1a;图书馆图书分类系统案例2&#xff1a;电商平台商品类目树案例3&#xff1a;城市行政区域划分 三、大数据中的核心树结构1. B树&#xff1a;数据库索引的脊梁2. 决…

从0开始学计算机视觉--Day1--计算机视觉的起源

我们经常能听到计算机视觉这个词语&#xff0c;像数字图像处理&#xff0c;算法设计&#xff0c;深度学习等领域。但很少有人会先去了解清楚这门知识&#xff0c;而是用到什么再学什么&#xff0c;虽然这在项目进度上能节省不少时间&#xff0c;但有时候囫囵吞枣式地学习容易落…

简单的 ​Flask​ 后端应用

from flask import Flask, request, jsonify, session import os app Flask(__name__) app.secret_key os.urandom(24) users { 123: admin, admin: admin } # 登录接口 app.route(/login, methods[POST]) def login(): data request.get_json() username data.get(usern…

spring-webmvc @PathVariable 典型用法

典型用法 基础用法 GetMapping("/users/{id}") public String getUser(PathVariable Long id) {return "User ID: " id; } 请求&#xff1a;/users/1001 输出&#xff1a;User ID: 1001---- GetMapping("/users/{userId}/orders/{orderId}") …

LVS+Keepliaved高可用群集

目录 keepalived双击热备基础知识1.keepallived概述及安装keepalived的热备方式 2.使用keepalived实现双机热备 案例1.基础主备调度器环境配置2.配置主调度器3.配置从调度器4.配置两台节点服务器5.测试 keepalived双击热备基础知识 Keepalived 起初是专门针对 LVS 设计的一款强…

在Unreal Engine 5(UE5)中,Get PlayerPawn和Get PlayerController的区别以及如何计算玩家和目标之间的距离。

一、两者区别 在Unreal Engine 5&#xff08;UE5&#xff09;中&#xff0c;获取玩家的位置信息通常有两种方式&#xff1a;通过PlayerPawn或通过PlayerController。具体使用哪一个取决于你想要获取的是哪个实体的位置。 1.Get Player Pawn&#xff1a; PlayerPawn是玩家实际…

linux线程同步

互斥锁 同步与互斥概述** 现代操作系统基本都是多任务操作系统&#xff0c;即同时有大量可调度实体在运行。在多任务操作系统中&#xff0c;同时运行的多个任务可能&#xff1a; 都需要访问/使用同一种资源 多个任务之间有依赖关系&#xff0c;某个任务的运行依赖于另一个任…