根据小时数隐藏按钮

Question

在页面上，保存按钮应根据系统时间可见或隐藏。我想每天上午 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')}" />

任何建议或帮助。

Answer 1

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

Answer 2

您的函数可以非常简单，例如：

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

请注意，按钮的默认显示值为 inline-block，但并非所有浏览器都必须使用该值，并且可以使用 CSS 将其设置为其他值。将 display 设置为 ""（空字符串）可以使其针对特定浏览器或样式 sheet 采用其默认或继承的样式，并且您不必非常更改代码页面设计者改变主意的时间 her/his。

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

根据小时数隐藏按钮

Hide button based on hours

javascript

time

button

hide