Javascript 在特定日期和时间启用按钮

Javascript 在特定日期和时间启用按钮,javascript,button,Javascript,Button,我尝试只在每天下午5点到10点启用按钮,星期一除外。 当按钮被禁用时,应该像通知访问者为什么禁用一样显示 我确实试着自己编写JavaScript,但它似乎无法正常工作。我对这种语言一无所知,在不同网站的帮助下编写了脚本 这是我的剧本: <input class="submit" type="submit" id="checktimer" value="Check"/> <p id=timer style="display: none;">Lorem ipsum</p

我尝试只在每天下午5点到10点启用按钮,星期一除外。 当按钮被禁用时,应该像通知访问者为什么禁用一样显示

我确实试着自己编写JavaScript,但它似乎无法正常工作。我对这种语言一无所知,在不同网站的帮助下编写了脚本

这是我的剧本:

<input class="submit" type="submit" id="checktimer" value="Check"/>
<p id=timer style="display: none;">Lorem ipsum</p>

    <script type="text/javascript" defer="defer">
            <!-- 
            var enableDisable = function(){
                var UTC_hours = new Date().getUTCHours() +1;
                var day = new Date().getDay();
                if (day == 1){
                    document.getElementById('checktimer').disabled = true;
                    document.getElementById('timer').style.display = 'block';
                }
                else{
                if (UTC_hours > 16 && UTC_hours < 22){
                    document.getElementById('checktimer').disabled = false;
                    document.getElementById('timer').style.display = 'none';
                }
                else
                {
                    document.getElementById('checktimer').disabled = true;
                    document.getElementById('timer').style.display = 'block';
                }
                }
            };
            setInterval(enableDisable, 1000*60);
            enableDisable();
            // -->
            </script>

只需去掉HTML注释或使用注释即可//


您的脚本应该可以正常工作

实际上,您不应该基于JavaScript DateTime启用或禁用按钮,因为它获取客户端机器的日期,这意味着如果用户更改了其系统日期,按钮将被启用。您应该在服务器端代码(如PHP或ASP)上验证它。在那里,您可以检查datetime验证,并在页面上写下按钮,或者不写

尝试在元素上设置属性,而不是在元素对象上设置属性:

document.getElementById('checktimer').setAttribute('disabled');
要删除它,请使用

document.getElementById('checktimer').removeAttribute('disabled');
正如其他人提到的,您应该将checktimer元素缓存在变量中,而不是每次都查找它

我还改变了其他一些小事情:

删除了那些Javascript注释内容。你不需要这些。 在p元素的id属性值周围添加引号。 这将有助于:

var enableDisable = function(){                    
    var UTC_hours = new Date().getUTCHours(); //Don't add 1 here       
    var day = new Date().getUTCDay();  //Use UTC here also

    if (day != 1 && UTC_hours >= 17 && UTC_hours < 22){
        document.getElementById('checktimer').disabled = false;
        document.getElementById('timer').style.display = 'none';
    }else{
        document.getElementById('checktimer').disabled = true;
        document.getElementById('timer').style.display = 'block';
    }
};

setInterval(enableDisable, 1000*60);
enableDisable();

干杯

除非你不在乎你的客户是否会改变他们的时钟来绕过你对按钮的限制,否则你需要在服务器端强制执行此限制。@即使他们改变了时钟,也没有任何好处:为什么?那么为什么要禁用它呢?@user3174114这没关系。这不是留给客户端代码处理的。@user3174114您应该将checktimer和timer节点存储为变量,而不是每次都使用getElementById。不确定为什么会投反对票。这是一个有效点,应该考虑。OP获取UTC时间,因此更改时钟不会影响该脚本的功能。这篇文章没有回答这个问题,也无助于让脚本正常工作。很抱歉,javascript上的Date类本身指的是本地系统日期时间。改变时钟确实会改变脚本的行为。而且,你是对的。对不起,我没有回答这个问题。我是新来的,并且强调我们应该以一种不仅给出即时解决方案,而且将OP指向最佳方向的方式来回答。显然,我错了。正如@LcSalazar所提到的,UTC日期是当前本地系统时间的偏移量。因此,是的,它将受到影响。无论如何,这个答案不值得投反对票,也不值得投赞成票。如果UTC_小时>16&&UTC_小时<22{document.getElementById'checktimer'.setAttribute'disabled';document.getElementById'timer'.style.display='none';我希望在下午5点到10点时启用该按钮,设置attribute=disabled会使我的愿望无法实现,是吗?我不知道如何缓存checktimer,但谢谢你的建议。@hVITE你知道吗访问我答案顶部的演示链接?它对我很有用。时间范围是否是你想要的目标时间范围不是我的问题。我使用了你给出的参数。在我的脚本中,在下午5点到10点,它说disable=false,在你的脚本中,它说setAttribute'disabled',这类似于disable=true,对吗?@HViet是的。我想我切换了它们。开始吧我加1是因为我住在GMT+1,还是它意味着什么?
var enableDisable = function(){                    
    var UTC_hours = new Date().getUTCHours(); //Don't add 1 here       
    var day = new Date().getUTCDay();  //Use UTC here also

    if (day != 1 && UTC_hours >= 17 && UTC_hours < 22){
        document.getElementById('checktimer').disabled = false;
        document.getElementById('timer').style.display = 'none';
    }else{
        document.getElementById('checktimer').disabled = true;
        document.getElementById('timer').style.display = 'block';
    }
};

setInterval(enableDisable, 1000*60);
enableDisable();