如何根据纽约时间动态为 HTML 元素添加对应时段的 CSS 类-html教程-PHP中文网

如何根据纽约时间动态为 HTML 元素添加对应时段的 CSS 类

本文介绍在 WordPress 环境中使用纯 PHP（非 JavaScript）根据当前纽约（EST/EDT）时间，自动为页面元素添加如 tod_twilight、tod_sunrise 等 6 个时段专属 CSS 类的完整实现方案。

本文介绍在 wordpress 环境中使用纯 php（非 javascript）根据当前纽约（est/edt）时间，自动为页面元素添加如 `tod_twilight`、`tod_sunrise` 等 6 个时段专属 css 类的完整实现方案。

在 WordPress 主题开发或自定义模板中，常需根据真实地理时间实现视觉动态化——例如让首页 Hero 区域背景随纽约昼夜节律变化而切换样式。由于 WordPress 后端基于 PHP，且用户明确要求避免前端 JS 方案（兼顾 SEO、首屏渲染与服务端一致性），最佳实践是直接在 PHP 模板中完成时区解析与类名判定。

核心思路是：设置正确的时区 → 获取当前小时（24 小时制）→ 通过阶梯式条件判断匹配所属时段 → 赋值给 CSS 类变量。注意，原问题中时间边界均为闭左开右（如 12:00am–5:00am 表示 00:00 ≤ time ），因此使用整点小时数 date('H') 即可精准覆盖，无需处理分钟和秒。

以下是推荐的健壮实现代码（已适配夏令时自动切换）：

<?php // 设置时区为 America/New_York（自动处理 EST/EDT 切换）
date_default_timezone_set('America/New_York');
$current_hour = (int) date('H'); // 强制转为整型，避免类型隐式转换风险

// 根据纽约当前小时分配时段 CSS 类
switch (true) {
    case $current_hour < 5:     $tod_class = 'tod_twilight';   break;
    case $current_hour < 8:     $tod_class = 'tod_sunrise';   break;
    case $current_hour < 12:    $tod_class = 'tod_morning';    break;
    case $current_hour < 17:    $tod_class = 'tod_afternoon';  break;
    case $current_hour < 20:    $tod_class = 'tod_sunset';     break;
    default:                    $tod_class = 'tod_night';      break;
}
?><div class="bg__color w-100vw h-100vh--40 absolute top-0 left-0 z-1 <?php echo esc_attr($tod_class); ?>">
    <!-- 内容占位或背景图容器 -->
</div>

✅ 关键优化说明：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

使用 switch(true) 替代嵌套 if/else if，逻辑更清晰、可读性更强，且性能无差异；
esc_attr() 对输出类名进行转义，防止 XSS 风险（WordPress 安全最佳实践）；
date_default_timezone_set('America/New_York') 自动识别夏令时（EDT）与标准时间（EST），无需手动切换；
(int) 强制类型转换比 intval() 更简洁安全，避免空字符串等异常输入导致 0 的误判。

⚠️ 注意事项：

请将此代码置于 WordPress 主题的模板文件（如 header.php 或自定义页面模板）中，确保在 渲染前执行；
若主题启用了 PHP 缓存（如 OPcache）或页面级静态缓存（如 WP Super Cache），需确认该区块未被缓存——建议将 $tod_class 逻辑封装为短代码或使用 wp_localize_script + AJAX（仅当必须服务端渲染失效时考虑）；


CSS 类名需提前在主题样式表（style.css 或 theme.css）中定义对应视觉效果，例如：  .tod_twilight { background: linear-gradient(135deg, #1a1a2e, #16213e); }
.tod_sunrise { background: linear-gradient(135deg, #ff9a9e, #fad0c4); }
/* 其他时段样式依设计稿补充 */

通过以上方案，即可实现完全服务端驱动、时区精准、安全可靠且易于维护的“时间感知 UI”，让网站在不同时间段呈现更沉浸的用户体验。