i have following lines of code on web page - example/demo.
html:
<p class="countdown-timer">10:00</p> <p class="countdown-timer">10:00</p> javascript:
function starttimer(duration, display) { var start = date.now(), diff, minutes, seconds; function timer() { // number of seconds have elapsed since // starttimer() called diff = duration - (((date.now() - start) / 1000) | 0); // same job parseint truncates float minutes = (diff / 60) | 0; seconds = (diff % 60) | 0; minutes = minutes < 10 ? "0" + minutes : minutes; seconds = seconds < 10 ? "0" + seconds : seconds; display.textcontent = minutes + ":" + seconds; if (diff <= 0) { // add 1 second count down starts @ full duration // example 05:00 not 04:59 start = date.now() + 1000; } }; // don't want wait full second before timer starts timer(); setinterval(timer, 1000); } $(document).ready(function(){ // set time (60 seconds times amount of minutes) var tenminutes = 60 * 10, display = document.queryselector('.countdown-timer'); starttimer(tenminutes, display); }); as i'm relatively new javascript/jquery, how able make timer stop on 0 , second clock works?
i have tried replacing document.queryselector('.countdown-timer'); $('.countdown-timer');
i created class while ago, 1 of projects. allows have multiple counters, different settings. can configured paused or reset button, using available functions. have @ how it's done, might give hints:
/****************** * stopwatch class *****************/ function stopwatch(config) { // if no config passed, create empty set config = config || {}; // set options (passed or default) this.element = config.element || {}; this.previoustime = config.previoustime || new date().gettime(); this.paused = config.paused && true; this.elapsed = config.elapsed || 0; this.countingup = config.countingup && true; this.timelimit = config.timelimit || (this.countingup ? 60 * 10 : 0); this.updaterate = config.updaterate || 100; this.ontimeup = config.ontimeup || function() { this.stop(); }; this.ontimeupdate = config.ontimeupdate || function() { console.log(this.elapsed) }; if (!this.paused) { this.start(); } } stopwatch.prototype.start = function() { // unlock timer this.paused = false; // update current time this.previoustime = new date().gettime(); // launch counter this.keepcounting(); }; stopwatch.prototype.keepcounting = function() { // lock timer if paused if (this.paused) { return true; } // current time var = new date().gettime(); // calculate time difference last check , add/substract 'elapsed' var diff = (now - this.previoustime); if (!this.countingup) { diff = -diff; } this.elapsed = this.elapsed + diff; // update time this.previoustime = now; // execute callback update this.ontimeupdate(); // if hit time limit, stop , execute callback time if ((this.elapsed >= this.timelimit && this.countingup) || (this.elapsed <= this.timelimit && !this.countingup)) { this.stop(); this.ontimeup(); return true; } // execute again in 'updaterate' milliseconds var = this; settimeout(function() { that.keepcounting(); }, this.updaterate); }; stopwatch.prototype.stop = function() { // change status this.paused = true; }; /****************** * main script *****************/ $(document).ready(function() { /* * first example, producing 2 identical counters (countdowns) */ $('.countdown-timer').each(function() { var stopwatch = new stopwatch({ 'element': $(this), // dom element 'paused': false, // status 'elapsed': 1000 * 60 * 10, // current time in milliseconds 'countingup': false, // counting or down 'timelimit': 0, // time limit in milliseconds 'updaterate': 100, // update rate, in milliseconds 'ontimeup': function() { // ontimeup callback this.stop(); $(this.element).html('go home, it\'s closing time.'); }, 'ontimeupdate': function() { // ontimeupdate callback var t = this.elapsed, h = ('0' + math.floor(t / 3600000)).slice(-2), m = ('0' + math.floor(t % 3600000 / 60000)).slice(-2), s = ('0' + math.floor(t % 60000 / 1000)).slice(-2); var formattedtime = h + ':' + m + ':' + s; $(this.element).html(formattedtime); } }); }); /* * second example, producing 1 counter (counting 6 seconds) */ var stopwatch = new stopwatch({ 'element': $('.countdown-timer-up'),// dom element 'paused': false, // status 'elapsed': 0, // current time in milliseconds 'countingup': true, // counting or down 'timelimit': 1000 * 6, // time limit in milliseconds 'updaterate': 100, // update rate, in milliseconds 'ontimeup': function() { // ontimeup callback this.stop(); $(this.element).html('countdown finished!'); }, 'ontimeupdate': function() { // ontimeupdate callback var t = this.elapsed, h = ('0' + math.floor(t / 3600000)).slice(-2), m = ('0' + math.floor(t % 3600000 / 60000)).slice(-2), s = ('0' + math.floor(t % 60000 / 1000)).slice(-2); var formattedtime = h + ':' + m + ':' + s; $(this.element).html(formattedtime); } }); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> these 2 timers should count down 10 minutes 0 seconds: <p class="countdown-timer">00:10:00</p> <p class="countdown-timer">00:10:00</p> 1 count 0 6 seconds: <p class="countdown-timer-up">00:00:00</p>
Comments
Post a Comment