Question

应该在给定的时间和日期启用该按钮，并在屏幕上显示警告消息。

如果条件不满意，每次单击按钮时都会显示警告消息，否则下一个给定的链接或窗口可以打开。

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    p.font {
      color: #0000cc;
      font-size: 40px;
      font-weight: bold;
      font-family: "Times New Roman", Times, serif;
    }

    .button {
      background-color: #0000cc;
      /* blue */
      border: none;
      color: white;
      padding: 16px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      -webkit-transition-duration: 0.4s;
      /* Safari */
      transition-duration: 0.4s;
      cursor: pointer;
    }

    .button1 {
      background-color: white;
      color: black;
      border: 2px solid #00004d;
      border-radius: 20px;
    }

    .button1:hover {
      background-color: #0000cc;
      color: white;
    }
  </style>
  <meta charset="UTF-8" />
  <script src="jquery-3.1.1.min.js">
  </script>
  <script>
    var thisDay = new Date().getDate();
    var thisTime = new Date().getHours();
    var thismin = new Date().getMinutes();

    function checkButton() {
      if ((thisTime >= 08 && thisTime <= 19) && (thisDay >= 07 && thisDay <= 16)) {
        $(".button button1").prop("disabled", false);
        $('.button button1').click(function() {
          window.location = 'http://www.google.com';
        });
      }
      printAlert();
    }

    function printAlert() {
      window.alert('We are not accepting entries right now.');
    }
  </script>
</head>

<body>
  <p class="font">Please Wait! Exam will start at....... </p>
  <button class="button button1">Aptitude Exam</button>
  <script>
    checkButton();
  </script>
</body>

</html>

Answer 1

这将对您有所帮助：

    <!DOCTYPE html>
      <html lang="en">
         <head>
            <style>
               p.font {
                  color: #0000cc;
                  font-size: 40px;
                  font-weight: bold;
                  font-family: "Times New Roman", Times, serif;
               }

              .button {
                  background-color: #0000cc;
                  /* blue */
                  border: none;
                  color: white;
                  padding: 16px 32px;
                  text-align: center;
                  text-decoration: none;
                  display: inline-block;
                  font-size: 16px;
                  margin: 4px 2px;
                  -webkit-transition-duration: 0.4s;
                  /* Safari */
                  transition-duration: 0.4s;
                  cursor: pointer;
               }

               .button1 {
                    background-color: white;
                    color: black;
                    border: 2px solid #00004d;
                    border-radius: 20px;
               }

               .button1:hover {
                    background-color: #0000cc;
                    color: white;
               }

               .button-disabled {
                    background-color: grey;
               }

               .button-disabled:hover {
                    cursor: not-allowed;
               }
            </style>
            <meta charset="UTF-8" />
            <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
            <script>
               var thisDay = new Date().getDate();
               var thisTime = new Date().getHours();
               var thismin = new Date().getMinutes();

               var checkButton = function() {
                   //Edit Done Here
                   if ((thisTime >= 08 && thisTime <= 22) && (thisDay >= 07 && thisDay <= 16)) {
                       $(".button").prop("disabled", false);
                       alert('Enable'); // For understanding - remove this later
                   } else {
                       $(".button").removeClass("button1");
                       $(".button").addClass("button-disabled");
                       $(".button").prop("disabled", true);
                       //remove the enabled button class if not in mentioned time frame
                       $(".font").html('We are not accepting entries right now. Please visit during the allowed hours.');
                       alert('Disable'); // For understanding - remove this later
                    }
                }

              var buttonClicked = function() {
                   window.location = 'http://www.google.com';
              }

            //Edit Done Here
    </script>
    </head>
    <body>
        <!-- Edit Done Here -->
        <p class="font">Please Wait! Exam will start at....... </p>
        <!-- Edit Done Here -->
        <button class="button button1" onClick="buttonClicked();" disabled>Aptitude Exam</button>
        <script>
           checkButton();
        </script>
    </body>
 </html>

请注意，您无法对禁用按钮进行点击操作;为此，我取代了现有的＆＃39; p＆＃39;元件。

按钮时间和日期依赖

1 个答案: