按钮的时间和日期取决于

问题描述:

的按钮应该在特定的时间和日期在屏幕上提示消息启用。按钮的时间和日期取决于

我每次点击按钮,如果条件不满足警报消息应显示否则下一个给定链路或窗户可以打开。

<!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> 
+0

请格式化你的代码更易读 – mrid

+0

,写一个适当的标题 – mrid

+0

不是你缺少你的jQuery选择Button1的前一个点?像'$(”按钮.button1' )' – Icepickle

这将帮助你:

<!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> 

请注意,你不能给点击操作被禁止的按钮;为此我替换了现有'p'元素的内部html。

+0

但是先生多了一个问题米面临的按钮,走的是标准的时间我的电脑时间,而不是。 ....... –

+0

爵士应该怎样改变我的区域上网时间.......印度 –