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

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>

请添加图片描述

相关文章:

2025跨年倒计时

<!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>2025年跨年倒计时</title><style>/* 页…...

下载mysql免安装版和配置

1、下载地址 点击去官网下载https://downloads.mysql.com/archives/community/ 2、解压安装mysql 解压的文件夹是没有my.ini文件和data目录&#xff0c;需要我们自己去创建 根目录下创建my.ini&#xff0c;根目录创建data [mysql] default-character-setutf8[mysqld] #端口 po…...

代码模板-C语言常用的errno的名字、值以及对应关系?转换字符串函数?(errno.h, strerror; errno -l; man errno)

背景 errno.h是C 编程语言标准库中的头文件。它定义了使用符号errno &#xff08;“错误号”的缩写&#xff09;报告和检索错误情况的宏。经常需要用来在内核态用户态返回错误寻找&#xff0c;本文以供快速检索。 常用函数与用法 strerror 根据errno获取文件 比如&#xff…...

全新免押租赁系统助力商品流通高效安全

内容概要 全新免押租赁系统的推出&#xff0c;可以说是一场商品流通领域的小革命。想象一下&#xff0c;不再为押金烦恼&#xff0c;用户只需通过一个简单的信用评估&#xff0c;就能快速租到所需商品&#xff0c;这种体验简直令人惊喜&#xff01;这个系统利用代扣支付技术&a…...

5.微服务灰度发布落地实践(rocketmq增强)

文章目录 前言发送端灰度增强订阅端灰度增强 前言 上一篇分析了&#xff0c;在灰度发布实现中为什么要对消息队列灰度发布进行增强。本篇主要介绍如何实现rocketmq 灰度发布的增强. 发送端灰度增强 订阅端灰度增强...

MySql核心面试面试问题解析

MySql核心面试面试问题解析 有时候往往简单的才是最容易失分的&#xff01;&#xff01;&#xff01; MySQL支持哪些存储引擎&#xff1f;有何区别&#xff1f; 答案&#xff1a;常见的存储引擎有InnoDB、MyISAM、Memory等。InnoDB支持事务&#xff0c;MyISAM不支持事务&#x…...

logback之自定义pattern使用的转换器

目录 &#xff08;1&#xff09;场景介绍 &#xff08;2&#xff09;定义转换器BizCallerConverter &#xff08;3&#xff09;logback配置conversionRule &#xff08;4&#xff09;测试效果 前文《logback之pattern详解以及源码分析》已经介绍了pattern&#xff0c;以及…...

【MySQL】发展起源与核心架构组件详细介绍

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《MySQL技术精粹》&#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、MySQL起源背景 2、MySQL发展里程 3、MySQL应用场景 二、MySQL的核心特…...

uni-app 多平台分享实现指南

uni-app 多平台分享实现指南 在移动应用开发中&#xff0c;分享功能是一个非常常见的需求&#xff0c;尤其是在社交媒体、营销活动等场景中。使用 uni-app 进行多平台开发时&#xff0c;可以通过一套代码实现跨平台的分享功能&#xff0c;涵盖微信小程序、H5、App 等多个平台。…...

Spring中的IOC是什么,优缺点有哪些?

目录 IOC的核心概念 IOC的优点 IOC的缺点 使用场景说明 总结 IOC&#xff08;控制反转&#xff09;是一种设计思想&#xff0c;用于实现低耦合、高内聚的软件架构。它通过将对象的创建和依赖管理交给外部容器来实现&#xff0c;从而减少对象之间的直接依赖关系。 IOC的核…...

Qt实现使用TCP与RS485串口设备通信————附带详细实践方法

文章目录 0 背景1 协议介绍1.1 modbusRTU协议1.1.1 简介1.1.2 RS485和modbusRTU的关系1.1.3 modbusRTU 协议格式1.1.3.1 0x10写多个保持寄存器1.1.3.2 0x02读多个离散输入寄存器1.1.3.3 0x03读多个保持寄存器1.1.3.4 0x04读多个输入寄存器 1.2 ModbusTCP协议1.2.1 ModbusTCP协议…...

js将object整个实体对象作为参数传递

①将object实体转化成json字符串传递&#xff1a; JSON.stringify(obj) ②将json字符串转化成JSON对象值&#xff1a;JSON.parse(json) 实际应用&#xff1a; <div id"div_notice" stylefont-size:14px; width:100%; height:200px; overflow-y:auto;></di…...

超越局部损失函数的预测-优化方法

1 文章信息 文章名为Leaving the Nest : Going Beyond Local Loss Functions for Predict-Then-Optimize。发表在第38届AAAI Conference on Artificial Intelligence. 作者来自哈佛大学。 2 摘要 预测-优化是一种利用机器学习在不确定性下进行决策的方法框架。其核心研究问…...

PDF预览插件

PDF预览插件 可用于当前页面弹窗形式查看,可增加一些自定义功能 pdf预览插件 代码块: pdfobject.js <div class="pdfwrap"><div class="item"><h3>笑场</h3><div class="tags"><p>李诞</p><i&…...

node.js之---CommonJS 模块

CommonJS概念 在 Node.js 中&#xff0c;CommonJS 是一种模块化规范&#xff0c;它定义了如何在 JavaScript 中创建和使用模块。CommonJS 是 Node.js 使用的默认模块系统。它让开发者能够分离代码&#xff0c;便于重用和维护。 CommonJS 模块的基本特性 模块导出 在 CommonJ…...

关于AI面试系统2025年趋势评估!

在快速发展的科技浪潮中&#xff0c;AI技术正以前所未有的速度渗透到各行各业。企业招聘领域&#xff0c;作为人才选拔的关键环节&#xff0c;也不例外地迎来了AI面试系统的广泛应用和持续创新。2025年&#xff0c;AI面试系统不仅成为企业招聘的主流工具&#xff0c;更在智能化…...

SQL—替换字符串—replace函数用法详解

SQL—替换字符串—replace函数用法详解 REPLACE() 函数——查找一个字符串中的指定子串&#xff0c;并将其替换为另一个子串。 REPLACE(str, old_substring, new_substring)str&#xff1a;要进行替换操作的原始字符串。old_substring&#xff1a;要被替换的子串。new_substri…...

《Vue3实战教程》40:Vue3安全

如果您有疑问&#xff0c;请观看视频教程《Vue3实战教程》 安全​ 报告漏洞​ 当一个漏洞被上报时&#xff0c;它会立刻成为我们最关心的问题&#xff0c;会有全职的贡献者暂时搁置其他所有任务来解决这个问题。如需报告漏洞&#xff0c;请发送电子邮件至 securityvuejs.org。…...

软件项目验收测试需进行哪些测试?软件检测机构分享验收测试作用

在信息技术高速发展的今天&#xff0c;软件项目的验收测试作为软件开发生命周期中至关重要的一环&#xff0c;扮演着不可或缺的角色。软件项目验收测试是在软件开发完成后&#xff0c;依据需求文档和设计规范&#xff0c;对软件系统进行的一项综合性测试。其主要目的是验证开发…...

css实现文字描边

效果 学习啦 -webkit-text-stroke-width&#xff1a; 设置文本描边的宽度&#xff0c;值可以是任何长度单位&#xff08;如 px, em, rem 等&#xff09; -webkit-text-stroke-color&#xff1a;设置文本描边的颜色&#xff0c;值可以是任何颜色值&#xff08;如 red, green, bl…...

基于机器学习算法的亚马逊用户评论情感分析研究:深入探讨随机森林与决策树模型的应用及其实验评估

《基于随机森林和决策树的亚马逊用户评论情感分析研究》深入探讨了利用机器学习技术对亚马逊用户评论数据进行情感分析的方法&#xff0c;旨在为电商企业提供更精准的用户反馈处理工具&#xff0c;以辅助产品优化和服务改进 通过采用决策树模型和随机森林模型这两种不同的机器学…...

Vue2项目里用Cesium加载天地图标注,保姆级避坑指南(含Token申请)

Vue2项目集成Cesium与天地图标注的工程化实践指南 当WebGIS需求遇上Vue技术栈&#xff0c;如何在老项目中优雅地引入三维地图能力&#xff1f;本文将以工程化视角&#xff0c;系统讲解Vue2项目中集成Cesium加载天地图标注的完整技术路径。不同于基础教程&#xff0c;我们将重点…...

何为多态?

多态的概念多态是面向对象编程的三大特性之一&#xff08;封装、继承、多态&#xff09;&#xff0c;指同一操作作用于不同对象时会产生不同的行为。具体表现为父类引用指向子类对象&#xff0c;并在运行时根据实际对象类型调用相应的方法。多态的好处提高代码扩展性通过多态&a…...

GraphRAG大模型在药物发现中玩出新花样!揭秘潜在知识图谱的惊人能力!

本文深入探讨了Microsoft GraphRAG在药物发现领域的应用&#xff0c;通过构建科学文献的潜在知识图谱&#xff0c;测试了其检索和合成能力。实验揭示了LLM在处理复杂查询中的优势与局限&#xff0c;强调了语料质量和LLM选择的重要性。GraphRAG展现了高效从非结构化数据中提取洞…...

NineData SQL AI 智能补全上线:写 SQL,不必每次都从头敲

写 SQL 的人&#xff0c;大概都遇到过这种情况&#xff1a; 明明脑子里已经知道要查什么&#xff0c;但真正开始写的时候&#xff0c;还是得一点点补关键字、补表名、补字段、补语句结构。越是多表查询、长 SQL、复杂条件&#xff0c;越容易写得慢、改得烦&#xff0c;还容易漏…...

IL-21蛋白在肿瘤靶向治疗中的作用机制研究

一、研究背景与科学问题肿瘤微环境中功能性肿瘤浸润淋巴细胞的缺乏是导致肿瘤免疫疗法效果欠佳的重要原因。即使在富含肿瘤浸润淋巴细胞的肿瘤组织中&#xff0c;功能异常的PD-1阳性Tim-3阳性CD8阳性T细胞的存在仍是肿瘤患者预后不良的主要指标。IL-21蛋白是由CD4阳性T细胞和自…...

不用Root!教你用ADB命令手动安装Google TTS中文语音包

免Root实现Google TTS中文语音引擎的完整部署指南 你是否遇到过在国产定制Android系统上无法使用Google文字转语音功能的困扰&#xff1f;许多厂商预装的语音引擎发音生硬&#xff0c;而Google TTS的中文语音包又常常因为系统限制无法正常安装。本文将带你绕过这些限制&#xf…...

TypeScript组件库终极指南:Arco Design类型定义与接口设计最佳实践

TypeScript组件库终极指南&#xff1a;Arco Design类型定义与接口设计最佳实践 【免费下载链接】arco-design A comprehensive React UI components library based on Arco Design 项目地址: https://gitcode.com/gh_mirrors/ar/arco-design Arco Design是一个基于TypeS…...

CSRankings数据更新流程揭秘:从GitHub PR到季度发布

CSRankings数据更新流程揭秘&#xff1a;从GitHub PR到季度发布 【免费下载链接】CSrankings A web app for ranking computer science departments according to their research output in selective venues, and for finding active faculty across a wide range of areas. …...

基础语法篇总结——从入门到精通

基础语法篇总结——从入门到精通 系列专栏:Python 100天从新手到大师 当前进度:Day 01-30 / 100 阅读时长:8 分钟 难度等级:⭐⭐ 一、本篇回顾 基础语法篇共 30 篇文章,涵盖了 Python 编程的核心基础: 知识体系 基础语法篇 (30 篇) ├── 基础入门 (8 篇) │ ├──…...