javascript - 在周末和非工作时间禁用按钮

标签 javascript jquery html datetime time

示例 1:此代码将在周末禁用按钮

<html>
<head>
<title>Page Title</title>
</head>
<body>
<style>
.disabled {
  background: grey;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myButton">Press me only on weekday</button>

<script>
$(function() {
  var now = new Date(),
      days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
      day = days[now.getDay()],

      $button = $('#myButton');

  if (day === days[0] || day === days[6]) {
      $button.addClass('disabled');
  }

  $button.click(function() {
      if ($(this).hasClass('disabled')) {
          alert('We are not accepting entries during weekends.')
          return;
      }
  });
})
</script>

</body>
</html>

示例 2:此代码将在非工作时间禁用,并且仅在工作日下午 5:00(17:00) - 凌晨 12:00 (24:00) 期间可用。时钟位置基于 +8 UTC

<input class="submit" type="submit" id="checktime" value="Check"/>

<script type="text/javascript" defer="defer">
<!-- 
var enableDisable = function(){
    var UTC_hours = new Date().getUTCHours() +8;
    if (UTC_hours > 17 && UTC_hours < 24){
        document.getElementById('checktime').disabled = false;
    }
    else
    {
        document.getElementById('checktime').disabled = true;
    }
};
setInterval(enableDisable, 1000*60);
enableDisable();
// -->
</script>

我的问题是,我需要结合这两个代码,以便我可以实现这样的目标..

User only allow to clicking the button during 5:00PM(17:00) - 12:00AM (24:00) in weekday and on the weekend the button will be disabled. Button needed to show a alert message if user click it during off day/hour

如何正确组合这两个脚本来实现这样的效果?谢谢

最佳答案

这将在中午 12:00 到下午 5:00(任意一天)之间或当天是星期六或星期日时添加禁用属性。如果单击并禁用该按钮,则显示警报。

<script>
    $(function() {
        var now = new Date(),
        days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
  day = days[now.getDay()],
        UTC_hours = new Date().getUTCHours() +8;
        $button = $('#myButton');

        if (day === days[0] || day === days[6] || (UTC_hours >= 0 && UTC_hours < 17)) {
            $button.prop( "disabled", true );
        } else {
            $button.prop( "disabled", false );
        }

        $button.click(function() {
            if ($(this).is(':disabled')) {
                alert('We are not accepting entries during weekends.')
                return;
            }
        });
   })
</script>

关于javascript - 在周末和非工作时间禁用按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48834962/

相关文章:

javascript - 从原始字符串形成树或节点

javascript - 使用 Jade 在每个循环中显示一行中的两个项目

javascript - 如何在每个ajax调用上绑定(bind)开始和完成事件

jquery模态弹出框

javascript - 可排序列表+查找删除索引

javascript - 替代 jQuery 1.3 的 .delay() 函数并创建 jQuery 循环?

html - 滚动时标题滞后

html - 为什么我的 li 文字没有水平居中?

android - HTML 代码 index.html 设计不适合 Phonegap android 应用程序的移动 View ?

javascript - woocommerce 产品图片不循环显示