मैंने टाइमर शुरू करने के लिए एक बटन को लागू करने का प्रयास किया जब इसे क्लिक किया गया लेकिन ऐसा लगता है कि यह काम नहीं कर रहा है। यह वह कोड है जिसका मैंने उपयोग किया था। यह केवल तब शुरू होता है जब पृष्ठ लोड होता है लेकिन मैं टाइमर को सक्रिय करने के लिए बटन क्लिक करना चाहता हूं। मैं क्या गलत कर रहा हूं?

$("#startClock").click(function() {
  startTimer();
});

function startTimer(duration, display) {
  var timer = duration,
    minutes, seconds;
  setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;

    if (--timer < 0) {
      timer = duration;
    }
  }, 1000);
}

window.onload = function() {
  var fiveMinutes = 60 * 5,
    display = document.querySelector('#time1');
  startTimer(fiveMinutes, display);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mdl-card__actions mdl-card--border">
  <div>Timer : <span id="time1">05:00</span></div>
  <div class="mdl-grid">

    <div class="mdl-layout-spacer"></div>

    <button id="startClock" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--raised mdl-button--colored">
      50 coins 
    </button>

    <div class="mdl-layout-spacer"></div>
  </div>

</div>
1
Gabriel Nana Adjin Hagan 21 अक्टूबर 2018, 18:15

1 उत्तर

सबसे बढ़िया उत्तर

आपको बस यह सुनिश्चित करने की ज़रूरत है कि आप पैरामीटर को startTimer() पर भेज रहे हैं, इस मामले में fiveMinutes और display:

$("#startClock").click(function() {
  var fiveMinutes = 60 * 5,
    display = document.querySelector('#time1');
  startTimer(fiveMinutes, display);
});

function startTimer(duration, display) {
  var timer = duration,
    minutes, seconds;
  setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;

    if (--timer < 0) {
      timer = duration;
    }
  }, 1000);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mdl-card__actions mdl-card--border">
  <div>Timer : <span id="time1">05:00</span></div>
  <div class="mdl-grid">

    <div class="mdl-layout-spacer"></div>

    <button id="startClock" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--raised mdl-button--colored">
      50 coins 
    </button>

    <div class="mdl-layout-spacer"></div>
  </div>

</div>

इसके अतिरिक्त, आप बटन पर क्लिक करते ही इसे बंद करने के लिए अपने अंतराल फ़ंक्शन को थोड़ा सा फिर से काम करना चाह सकते हैं (और गिनती शुरू होने से पहले एक सेकंड प्रतीक्षा नहीं करता है):

$("#startClock").click(function() {
  var fiveMinutes = 60 * 5,
    display = document.querySelector('#time1');
  startTimer(fiveMinutes, display);
});

function startTimer(duration, display) {
  var timer = duration,
    minutes, seconds;
    
  var intervalFn = function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;

    if (--timer < 0) {
      timer = duration;
    }
  };
  
  
  setInterval(intervalFn, 1000);
  
  intervalFn();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mdl-card__actions mdl-card--border">
  <div>Timer : <span id="time1">05:00</span></div>
  <div class="mdl-grid">

    <div class="mdl-layout-spacer"></div>

    <button id="startClock" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--raised mdl-button--colored">
      50 coins 
    </button>

    <div class="mdl-layout-spacer"></div>
  </div>

</div>
2
Goodbye StackExchange 21 अक्टूबर 2018, 15:23