HTML怎么让加入购物车按钮只在白天显示-html教程-PHP中文网

是，用 getHours() 获取当前小时数，判断是否在6至19点范围内；逻辑运行于浏览器本地，依赖用户设备系统时间而非服务器时间。

html怎么让加入购物车按钮只在白天显示

用 JavaScript 判断当前时间是否为白天

核心是获取当前小时数，再定义“白天”范围（比如 6 点到 19 点），用 getHours() 就够了，不需要引入日期库或后端判断。

注意：这个逻辑运行在用户浏览器本地，所以显示与否取决于用户设备的系统时间，不是服务器时间——这点容易被忽略，尤其当用户手动改过时钟。

白天通常定义为 6 （即早 6 点到晚 7 点前）
别用 12 这类错误范围，中午 12 点之后还有傍晚，不能简单等同于“白天”
如果业务需要考虑季节/经纬度（如日出日落动态变化），那就得换方案，纯前端 JS 做不了

给按钮加 class 并用 JS 控制显隐

不要直接操作 style.display 或写内联样式，推荐先统一加一个初始隐藏 class（比如 hidden），再用 JS 切换。这样更易维护，也方便后续加 CSS 动画。

示例结构：

<button id="addToCart" class="btn hidden">加入购物车</button>

对应 CSS：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

.hidden { display: none; }

JS 判断后移除 class：

const btn = document.getElementById('addToCart');
const hour = new Date().getHours();
if (hour >= 6 && hour 

<h3>确保页面加载完成后再执行判断</h3>
<p>如果脚本放在 <code></code> 里且没加 <code>defer</code>，<code>getElementById</code> 可能返回 <code>null</code>，按钮就永远不显示。</p>

把脚本放页面底部（前）最稳妥
或者用 DOMContentLoaded 事件包裹逻辑
别用 window.onload，它等所有资源（图片、字体）加载完才触发，延迟明显

要不要考虑用户时区和夏令时？

new Date().getHours() 返回的是用户本地时区的小时数，自动适配夏令时——这是它的优势，也是陷阱。

比如你的运营活动只针对北京时间白天，但海外用户看到的“白天”就是他们本地时间，可能完全错位。

若需统一按某个时区（如东八区），得用 toLocaleTimeString('zh-CN', { timeZone: 'Asia/Shanghai' }) 解析，再提取小时
但注意：部分老浏览器（如 IE）不支持 timeZone 选项，要兜底
更轻量的做法是用 UTC 时间 + 固定偏移（如 new Date().getUTCHours() + 8），但会漏掉夏令时调整

实际项目中，多数电商选择跟随用户本地时间，毕竟“白天”对用户而言就是他眼前亮着屏幕的时候——这个直觉比技术精确更重要。