Blokada przycisku po odliczeniu czasu

0

Witam,

jestem osobą zieloną jeśli chodzi o jquery, dlatego potrzebuję waszej pomocy.
Chciałam zrobić stronkę coming soon i wstawiłam zegar do odliczenia czasu do startu. Pobrałam sobie skrypt jquery i wszystko fajnie działa. Jednak chciałabym dodać button, który będzie aktywny w momencie kiedy zegar dojdzie do 0 czyli skończy się odliczanie czasu i pozostanie ten przycisk aktywny. Gdyby zegar będzie liczyć do innej daty to znowu przycisk będzie nieaktywny.
I właśnie mam problem aby dodać kod odpowiedzialny za blokowanie przycisku.

Wiem, że można użyć funkcji

$("").prop('disabled',true)

ale nie wiem jak tego użyć

Mam taki kod strony: jest o kod zegara: https://github.com/rendro/countdown

 <!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Countdown</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="../dest/jquery.countdown.js"></script>

    <link rel="stylesheet" type="text/css" href="style.css" media="screen">

    <script type="text/javascript">
      $(function() {
        var endDate = "November 30, 2015 09:09:25";

        $('.countdown.simple').countdown({ date: endDate });

        $('.countdown.styled').countdown({
          date: endDate,
          render: function(data) {
            $(this.el).html("<div>" + this.leadingZeros(data.years, 4) + " <span>years</span></div><div>" + this.leadingZeros(data.days, 3) + " <span>days</span></div><div>" + this.leadingZeros(data.hours, 2) + " <span>hrs</span></div><div>" + this.leadingZeros(data.min, 2) + " <span>min</span></div><div>" + this.leadingZeros(data.sec, 2) + " <span>sec</span></div>");
          }
        });


        // End time for diff purposes
        var endTimeDiff = new Date().getTime() + 15000;
        // This is server's time
        var timeThere = new Date();
        // This is client's time (delayed)
        var timeHere = new Date(timeThere.getTime() - 5434);
        // Get the difference between client time and server time
        var diff_ms = timeHere.getTime() - timeThere.getTime();
        // Get the rounded difference in seconds
        var diff_s = diff_ms / 1000 | 0;
        
        var notice = [];
        notice.push('Server time: ' + timeThere.toDateString() + ' ' + timeThere.toTimeString());
        notice.push('Your time: ' + timeHere.toDateString() + ' ' + timeHere.toTimeString());
        notice.push('Time difference: ' + diff_s + ' seconds (' + diff_ms + ' milliseconds to be precise). Your time is a bit behind.');
        
        $('.offset-notice').html(notice.join('<br />'));
        
        $('.offset-server .countdown').countdown({
          date: endTimeDiff,
          offset: diff_s * 1000,
          onEnd: function() {
            $(this.el).addClass('ended');
          }
        });
        
        $('.offset-client .countdown').countdown({
          date: endTimeDiff,
          onEnd: function() {
            $(this.el).addClass('ended');
          }
        });

      });

    </script>
  </head>
  <body>
    <div class="container">
      <h1>COUNTDOWN</h1>

      <h2>Simple text countdown</h2>
      <div class="countdown simple" data-date="November 30, 2015 09:09:25"></div>
  
<button id='YourButton'>Your Button</button>

    </div>
  </body>
</html>

Proszę o pomoc jak wstawić blokowanie przycisku, gdy zegar odlicza czas.

1

Możesz przycisk ustawić jako nieaktywny od poczatku, a włączyć kiedy odliczanie sie skończy.
Czyli html dodajesz do button disable, a w zdarzeniu onEnd wykorzystujesz jquery, zeby pobrać element przycisku ('#YourButton') i ustawić disabled na false. lub w ogóle usunąć te właściwość przycisku.

1 użytkowników online, w tym zalogowanych: 0, gości: 1