2025跨年倒计时

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>2025年跨年倒计时</title><style>/* 页面整体样式 */body {font-family: 'Arial', sans-serif;background: linear-gradient(45deg, #f39c12, #e74c3c, #8e44ad, #3498db);background-size: 400% 400%;animation: gradientAnimation 15s ease infinite;margin: 0;height: 100vh;display: flex;flex-direction: column;justify-content: center;align-items: center;color: white;text-align: center;overflow: hidden;}/* 动画背景渐变 */@keyframes gradientAnimation {0% { background-position: 0% 50%; }50% { background-position: 100% 50%; }100% { background-position: 0% 50%; }}/* 页面标题样式 */.title {font-size: 2.5em;font-weight: bold;margin-bottom: 20px;text-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 30px rgba(255, 255, 255, 0.7);}/* 主倒计时样式 */.countdown {font-size: 4em;font-weight: bold;text-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 30px rgba(255, 255, 255, 0.7);margin-bottom: 20px;letter-spacing: 3px;}/* 新年祝福样式 */.message {font-size: 2.5em;font-weight: bold;letter-spacing: 2px;margin-top: 20px;}/* 新年闪烁效果 */.happy-new-year {font-size: 5em;color: #ff6347;animation: sparkle 1.5s infinite alternate;text-shadow: 0 0 10px #ff6347, 0 0 30px #ff6347, 0 0 60px #ff6347;}/* 闪烁动画 */@keyframes sparkle {0% { color: #ff6347; text-shadow: 0 0 10px #ff6347, 0 0 30px #ff6347, 0 0 60px #ff6347; }100% { color: #fff; text-shadow: 0 0 10px #fff, 0 0 30px #fff, 0 0 60px #fff; }}/* 全屏按钮样式 */.btn-fullscreen {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.6);color: white;font-size: 2em;font-weight: bold;border: none;cursor: pointer;display: flex;justify-content: center;align-items: center;transition: background 0.3s ease;}.btn-fullscreen:hover {background: rgba(0, 0, 0, 0.8);}</style>
</head>
<body><!-- 全屏按钮 --><button class="btn-fullscreen" id="fullscreenButton">点击全屏观看倒计时</button><!-- 标题 --><div class="title">2025年跨年倒计时</div><div><!-- 倒计时显示 --><div class="countdown" id="countdown"></div><!-- 新年祝福 --><div class="message" id="message"></div><!-- 新年闪烁祝福 --><div class="happy-new-year" id="happyNewYear">🎉🎆🎇</div></div><script>// 目标时间:2025年1月1日 00:00:00const targetDate = new Date('2025-01-01T00:00:00').getTime();// 更新倒计时function updateCountdown() {const now = new Date().getTime();const distance = targetDate - now;// 计算剩余的天、时、分、秒const days = Math.floor(distance / (1000 * 60 * 60 * 24));const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));const seconds = Math.floor((distance % (1000 * 60)) / 1000);// 显示倒计时document.getElementById('countdown').innerHTML = `${days}${hours} 小时 ${minutes}${seconds}`;// 当倒计时结束if (distance < 0) {document.getElementById('countdown').innerHTML = "新年快乐!";document.getElementById('message').innerHTML = "2025年到啦!";document.getElementById('happyNewYear').innerHTML = "🎉🎆🎇";}}// 每秒更新一次倒计时setInterval(updateCountdown, 1000);// 全屏按钮功能const fullscreenButton = document.getElementById('fullscreenButton');fullscreenButton.addEventListener('click', () => {// 切换全屏模式if (document.documentElement.requestFullscreen) {document.documentElement.requestFullscreen();} else if (document.documentElement.mozRequestFullScreen) { // Firefoxdocument.documentElement.mozRequestFullScreen();} else if (document.documentElement.webkitRequestFullscreen) { // Chrome, Safari, Operadocument.documentElement.webkitRequestFullscreen();} else if (document.documentElement.msRequestFullscreen) { // IE/Edgedocument.documentElement.msRequestFullscreen();}// 隐藏全屏按钮fullscreenButton.style.display = 'none';});</script></body>
</html>

请添加图片描述

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

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

相关文章

多模态论文笔记——Coca

大家好&#xff0c;这里是好评笔记&#xff0c;公主号&#xff1a;Goodnote&#xff0c;专栏文章私信限时Free。本文详细介绍多模态模型Coca&#xff0c;在DALLE 3中使用其作为captioner基准模型的原因和优势。 文章目录 ALBEF论文模型结构组成训练目标 CoCa​论文模型结构CoCa…

大型模型推理加速入门

一 推理加速基础 1. 了解基本概念与术语 首先需要了解关于大模型的一些基本的历史发展&#xff0c;概念和术语&#xff0c;不需要全部看懂&#xff0c;只需要掌握大概情况&#xff0c;可以通过下面这篇文章进行&#xff1a; 大模型入门基本概念&#xff0c;术语 2. 了解Tra…

python实现自动登录12306抢票 -- selenium

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 python实现自动登录12306抢票 -- selenium 前言其实网上也出现了很多12306的代码&#xff0c;但是都不是最新的&#xff0c;我也是从网上找别人的帖子&#xff0c;看B站视频&…

edeg插件/扩展推荐:助力生活工作

WeTab 此插件在我看来有2个作用 1.改变edeg的主页布局和样式,使其更加精简,无广告 2.提供付费webtab Ai(底层是chatGpt) 沉浸式翻译 此插件可翻译网页的内容 假设我们浏览github 翻译前 翻译后 Better Ruler 可以对网页的距离进行测量 适合写前端的小伙伴 用法示例:

正则表达式 - 使用总结

正则表达式 - 使用总结 正则表达式(Regular Expression,简称Regex)是一种强大的文本处理工具,它允许我们通过特定的模式(pattern)来搜索、匹配和操作字符串。在编程、数据分析和文本处理等领域,正则表达式发挥着非常重要的作用。本文将总结正则表达式的基本概念、使用方…

doris:基于 Arrow Flight SQL 的高速数据传输链路

Doris 基于 Arrow Flight SQL 协议实现了高速数据链路&#xff0c;支持多种语言使用 SQL 从 Doris 高速读取大批量数据。 用途​ 从 Doris 加载大批量数据到其他组件&#xff0c;如 Python/Java/Spark/Flink&#xff0c;可以使用基于 Arrow Flight SQL 的 ADBC/JDBC 替代过去…

数据挖掘——关联规则挖掘

数据挖掘——关联数据挖掘 关联数据挖掘关联规则关联规则挖掘问题&#xff1a;具体挖掘过程Apriori 产生关联规则 关联数据挖掘 关联分析用于发现隐藏在大型数据集中的令人感兴趣的联系&#xff0c;所发现的模式通常用关联规则或频繁项集的形式表示。 关联规则反映一个事物与…

DVWA靶场Brute Force (暴力破解) 漏洞low(低),medium(中等),high(高),impossible(不可能的)所有级别通关教程

目录 暴力破解low方法1方法2 mediumhighimpossible 暴力破解 暴力破解是一种尝试通过穷尽所有可能的选项来获取密码、密钥或其他安全凭证的攻击方法。它是一种简单但通常无效率的破解技术&#xff0c;适用于密码强度较弱的环境或当攻击者没有其他信息可供利用时。暴力破解的基…

[react] 纯组件优化子

有组件如下,上面变化秒数, 下面是大量计算的子组件,上面每一秒钟变化一次,这时候子组件会不断重新渲染, 浪费资源 父组件如下 import React, { memo, useEffect, useMemo, useState } from react; import type { ReactNode, FC } from react; import HugeCount from ./Te; int…

CSS进阶和SASS

目录 一、CSS进阶 1.1、CSS变量 1.2、CSS属性值的计算过程 1.3、做杯咖啡 1.4、下划线动画 1.5、CSS中的混合模式(Blending) 二、SASS 2.1、Sass的颜色函数 2.2、Sass的扩展(extend)和占位符(%)、混合(Mixin) 2.3、Sass的数学函数 2.4、Sass的模块化开发 2.5、Sass…

使用 Spring Boot 和 GraalVM 的原生镜像

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;历代文学&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;精通Java编程&#xff0c;高并发设计&#xf…

清华大学Python包镜像站点

清华大学提供了一个Python包镜像站点&#xff0c;其中包括了许多常用的Python包。使用这个镜像站点可以提高下载Python包时的速度&#xff0c;因为包已经存储在国内的服务器上&#xff0c;从而减少了网络延迟。 要使用清华的pip镜像&#xff0c;你可以在pip命令中指定-i参数来…

【每日学点鸿蒙知识】tensorflowlite编译、音频编码线程、沉浸式状态栏、TextArea最大字节数限制等

1、如何编译Tensorflow lite库&#xff1f; 之前项目基于tflite推理引擎做人脸识别的功能&#xff0c;鸿蒙侧如何复用tflite模型&#xff1f; tflite对Android和iOS本身支配了GPU支持&#xff0c;但是鸿蒙侧目前并没有&#xff0c;鸿蒙提供了自己的推理引擎&#xff0c;而且支…

MySQL 索引优化实战 – 结合 Explain 深度解析慢查询

在实际的开发过程中&#xff0c;随着数据量的不断增大&#xff0c;慢查询成为了不可忽视的性能瓶颈。MySQL 提供了多种工具来帮助我们分析查询性能问题&#xff0c;其中最常用的工具是 EXPLAIN、SHOW PROFILE 和 SHOW STATUS。本文将从慢查询日志入手&#xff0c;结合 EXPLAIN …

【人工智能机器学习基础篇】——深入详解强化学习之常用算法Q-Learning与策略梯度,掌握智能体与环境的交互机制

深入详解强化学习之常用算法&#xff1a;Q-Learning与策略梯度 强化学习&#xff08;Reinforcement Learning, RL&#xff09;作为机器学习的一个重要分支&#xff0c;近年来在多个领域取得了显著成果。从棋类游戏的人机对战到自主驾驶汽车&#xff0c;强化学习技术展示了其强大…

计算机网络-L2TP VPN基础实验配置

一、概述 上次大概了解了L2TP的基本原理和使用场景&#xff0c;今天来模拟一个小实验&#xff0c;使用Ensp的网卡桥接到本地电脑试下L2TP拨号&#xff0c;今天主要使用标准的L2TP&#xff0c;其实在这个基础上可以加上IPSec进行加密&#xff0c;提高安全性。 拓扑说明&#xf…

Linux | 零基础Ubuntu解压RaR等压缩包文件

目录 介绍 案例分析 安装工具 解压实践 介绍 RAR是一种专利文件格式&#xff0c;用于数据压缩与归档打包&#xff0c;开发者为尤金罗谢尔&#xff08;俄语&#xff1a;Евгений Лазаревич Рошал&#xff0c;拉丁转写&#xff1a;Yevgeny Lazarevich R…

Postman接口测试05|实战项目笔记

目录 一、项目接口概况 二、单接口测试-登录接口&#xff1a;POST 1、正例 2、反例 ①姓名未注册 ②密码错误 ③姓名为空 ④多参 ⑤少参 ⑥无参 三、批量运行测试用例 四、生成测试报告 1、Postman界面生成 2、Newman命令行生成 五、token鉴权&#xff08;“…

PyTorch快速入门教程【小土堆】之完整模型训练套路

视频地址完整的模型训练套路&#xff08;一&#xff09;_哔哩哔哩_bilibili import torch import torchvision from model import * from torch import nn from torch.utils.data import DataLoader# 准备数据集 train_data torchvision.datasets.CIFAR10(root"CIFAR10&…

网络分析工具-tcpdump

文章目录 前言一、tcpdump基础官网链接命令选项详解常规过滤规则tcpdump输出 一、tcpdump实践HTTP协议ICMP状态抓包 前言 当遇到网络疑难问题的时候&#xff0c;抓包是最基本的技能&#xff0c;通过抓包才能看到网络底层的问题 一、tcpdump基础 tcpdump是一个常用的网络分析工…