rawman9x Posted May 21, 2015 Share Posted May 21, 2015 When I study js in our website, i see a good practice about "display a clock" http://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock And I have an improve this solving. I think it's interesting <!DOCTYPE html> <html> <head> <title>time count 2</title> <meta charset="utf-8"> </head> <body> <div id="div"></div> <script> setInterval(function(){ var d = new Date(); var h = d.getHours(); var m = d.getMinutes(); var s = d.getSeconds(); if(h < 10){h = "0" + h;}; if(m < 10){m = "0" + m;}; if(s < 10){s = "0" + s;}; document.getElementById("div").innerHTML = h + ":" + m + ":" + s; }, 500); </script> </body> </html> Link to comment Share on other sites More sharing options...
davej Posted May 21, 2015 Share Posted May 21, 2015 <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>hms</title><script>Date.prototype.hms = function(){ var h = this.getHours(); var m = this.getMinutes(); var s = this.getSeconds(); if (h<10){h = "0" + h}; if (m<10){m = "0" + m}; if (s<10){s = "0" + s}; return h+":"+m+":"+s;};setInterval(function(){document.getElementById('hms').textContent = new Date().hms();},500);</script></head><body><div id="hms"></div></body></html> 1 Link to comment Share on other sites More sharing options...
Ingolme Posted May 21, 2015 Share Posted May 21, 2015 There are hundreds of ways to implement any specification. Link to comment Share on other sites More sharing options...
rawman9x Posted May 22, 2015 Author Share Posted May 22, 2015 ok sir, I agree with you. Now, i'm having a problem and I need your help. How do I execute two work by click in the same button? It means that when I click button in the first, the clock display and in the second it stops. Link to comment Share on other sites More sharing options...
davej Posted May 22, 2015 Share Posted May 22, 2015 Try... <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>hms</title><script>window.onerror = function(a, b, c, d){alert('Javascript Error:n'+a+'nURL: '+b+'nLine: '+c+' Column: '+d);return true;}</script><script>'use strict';var intvar = null; //globalfunction init() {var btn = document.getElementById('clockbtn');btn.onclick = startclock;btn.value = 'Start Clock';}function stopclk(){if (intvar!=null){var btn = document.getElementById('clockbtn');btn.onclick = startclock;btn.value = 'Start the Clock';//alert('stop the clock');clearInterval(intvar);intvar = null;document.getElementById('hms').style.color = 'red';}else{alert('clock already stopped');}}//end of functfunction startclock(){if (intvar==null){ var btn = document.getElementById('clockbtn'); btn.onclick = stopclk; btn.value = 'Stop the Clock'; //alert('start the clock'); intvar = setInterval(function(){ var d = new Date(); var h = d.getHours(); var m = d.getMinutes(); var s = d.getSeconds(); var x = 'am'; if(h<10){h = "0" + h;} else if(h<12){} else if(h==12){x="pm"} else if(h==24){h="12";x="am"} else{h="0"+(h-12);x="pm";} if(m < 10){m = "0" + m;}; if(s < 10){s = "0" + s;}; var hms = document.getElementById("hms"); hms.style.color = 'green'; hms.textContent = h + ":" + m + ":" + s + x; }, 500);}else{ alert('clock already running');}}// end of functwindow.onload = init;</script></head><body><div id="hms"></div><input type="button" id="clockbtn" value="Start"/></body></html> 1 Link to comment Share on other sites More sharing options...
rawman9x Posted May 23, 2015 Author Share Posted May 23, 2015 thank you davej, you're kind. I tried and it's true Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now