根据小时隐藏按钮答案

【问题标题】：Hide button based on hours根据小时隐藏按钮
【发布时间】：2024-04-30 04:00:02
【问题描述】：

在页面上，保存按钮应根据系统时间显示或隐藏。我想每天上午 10 点后隐藏保存按钮。我的破代码

<script type="text/javascript">
 var currentTime = new Date();
 var hours = currentTime.getHours();
 var newButton = document.getElementById("btn1");

if(hours>10) {
 newButton.style.display = "none";
//tried this one too
// document.getElementById('btn1').style.visibility = 'hidden';
}
else {
 newButton.style.display = "block";
}
</script>

在我添加的 HTML 代码中

<input id="btn1" type="button" value="Save" name="btnSave" onclick="javascript: {ddwrt:GenFireServerEvent('__commit')}" />

任何建议或帮助。

【问题讨论】：

这应该可以。脚本标签是在 HTML 中的元素之前还是之后？
另外附注：绕过此代码非常容易，无论是使用开发工具还是调整我的时钟设置。您还应该对服务器端代码实施相同的检查。
它位于页面的开头，我也将链接放在了 css 中。以前也是这样。这就是我所说的
感谢您对安全性发表评论，但这是一个允许或禁止用户在学生餐厅保存午餐点餐的页面。
顺便说一句，要停止按钮工作，请使用newButton.disabled = true。现在它根本不起作用。

标签： javascript button time hide

【解决方案1】：

你的函数可以很简单，例如：

window.addEventListener("load", function(){
  var newButton = document.getElementById("btn1");
  newButton.style.visibility = new Date().getHours() > 10? 'none' : '';
});

请注意，按钮的默认显示值为inline-block，但并非所有浏览器都必须使用该值，并且可以使用 CSS 将其设置为其他值。将 display 设置为“”（空字符串）可以让它采用特定浏览器或样式表的默认或继承样式，并且您不必在页面设计者更改她/他的想法。

另外，要真正禁用按钮，您应该将其 disabled 属性设置为 true。

【讨论】：

【解决方案2】：

将其包装在 onload 事件中。您的按钮尚未出现在页面上。尚未渲染的元素无法被处理。

window.addEventListener("load", function(){
     var currentTime = new Date();
     var hours = currentTime.getHours();
     var newButton = document.getElementById("btn1");

    if(hours>10) {
     newButton.style.display = "none";
    }
    else {
     newButton.style.display = "block";
    }
}, false);

这样，当页面加载并且相关按钮存在时，它就会触发。

或者像 Deef 评论的那样，将脚本标签放在页面底部。

【讨论】：

@Mouser 最佳实践是将您的脚本放在底部，这可以提高初始页面加载的性能，并且额外的好处是您不需要检查加载事件
@Deef 你是对的，但是不同类型的库管理可能会成为一个问题。使用 onload，您就知道一切都已完成。
@Deef 也谢谢你。会尝试这个建议。