Javascript 基于小时数隐藏按钮

在页面上，“保存”按钮应根据系统时间显示或隐藏。 我想在每天上午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>

var currentTime=新日期（）；
var hours=currentTime.getHours（）；
var newButton=document.getElementById（“btn1”）；
如果（小时数>10）{
newButton.style.display=“无”；
//我也试过这个
//document.getElementById（'btn1'）。style.visibility='hidden'；
}
否则{
newButton.style.display=“block”；
}

在HTML代码中我添加了

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

---

任何建议或帮助。

将其包装在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评论的那样，将脚本标记放在页面底部。

您的功能可能非常简单，例如：

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

请注意，按钮的默认显示值是

内联块

，但并非所有浏览器都必须使用该值，CSS可用于将其设置为其他值。将显示设置为“”（空字符串）可以使其对特定浏览器或样式表采用默认或继承的样式，并且不必在页面设计师改变主意时更改代码

---

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

这应该有效。脚本标记在HTML中的元素之前还是之后？另一个注意事项是：使用开发工具或调整我的时钟设置很容易绕过此代码。您还应该在服务器端代码上实现相同的检查。在页面的开头，我也在这里放置了指向css的链接。以前也是这样。谢谢大家对安全性的评论，这是一个允许或禁止用户在学生餐厅保存午餐订单的页面。顺便说一句，要停止按钮工作，请使用

newButton.disabled=true

。现在它根本不起作用了。@Mouser的最佳做法是将脚本放在底部，这样可以提高初始页面加载的性能，另外一个好处是不需要检查加载events@Deef您是对的，但是，对于不同类型的库，管理可能会成为一个问题。有了onload，你知道一切都完成了。@Deef也谢谢你。我会试试这个建议。