Javascript Timer

A friend of mine had this idea that we should have some sort of timer at work because employees keep going over their lunch/break. So, being the good-willed person I am, I've put this together.  We have two separate timers, one for lunch, which will go red after 1 hour, and one for break, which will go red after 15 minutes.  I also included a button to display time and date, just in case they happen to need it.


This is what it looks like (not functional here, just for display):

Lunch Timer


Break Timer



Date / Time

click to get date/time




And this is the code: 
 <!--simple javascript stopwatch-->  
 <!--Jon Tohrs-->  
 <!--send me money-->  
 <html>  
 <meta name = "viewport" content = "width = device-width">  
 <head>  
 <title>Jon's Timer App</title>  
 <!--start of lunch timer-->  
 <script type="text/javascript">  
 var s = 0;  
 var m = 0;  
 var h = 0;  
 function changestat(){  
 var a=document.getElementById('butn').value;  
 if(a=='Start'){  
 document.getElementById('butn').value='Stop ';  
 }  
 else if(a=='Stop '){  
 document.getElementById('butn').value='Start';  
 }  
 stopwatch();  
 }  
 function stopwatch(){  
 var x=document.getElementById('butn').value;  
 if (x=='Stop '){  
   s++;  
  if (s == 60) {  
   s = 0;  
   m = m + 1;  
 }  
  else {  
   m = m;  
 }  
  if (m == 60) {  
   m = 0;  
   h += 1;  
 }  
 if (h>=1){  
   var cl = document.getElementById("sw");  
   cl.style.color = "#ff0000";   
 }  
   else{  
   var cl = document.getElementById("sw");  
   cl.style.color = "#000000";  
 }  
 if (s<=9) {  
 s = "0" + s;  
 }  
 var sw=document.getElementById('sw');  
 sw.value= ((h<=9) ? "0"+h : h) + " : " + ((m<=9) ? "0" + m : m) + " : " + s;  
 SD=window.setTimeout("stopwatch();", 1000);  
 }  
 }  
 function reset(){  
 var sw=document.getElementById('sw');  
 s = 0;  
 m = 0;  
 h = 0;  
 sw.value='00 : 00 : 00';  
 changestat();  
 }  
 </script>  
 <!--start of break timer-->  
 <script type="text/javascript">  
 var s2 = 0;  
 var m2 = 0;  
 var h2 = 0;  
 function changestat2(){    
 var a2=document.getElementById('butn2').value;   
 if(a2=='Start'){   
 document.getElementById('butn2').value='Stop ';  
 }  
 else if(a2=='Stop '){  
 document.getElementById('butn2').value='Start';  
 }  
 stopwatch2();  
 }  
 function stopwatch2(){  
 var x2=document.getElementById('butn2').value;  
 if (x2=='Stop '){  
   s2++;  
  if (s2 == 60) {  
   s2 = 0;  
   m2 = m2 + 1;  
 }  
  else {  
   m2 = m2;  
 }  
  if (m2 == 60) {  
   m2 = 0;  
   h2 += 1;  
 }  
 if (m2>=15){  
   var cl2 = document.getElementById("sw2");  
   cl2.style.color = "#ff0000";   
 }  
   else{  
   var cl2 = document.getElementById("sw2");  
   cl2.style.color = "#000000";  
 }  
 if (s2<=9) {  
 s2 = "0" + s2;  
 }  
 var sw2=document.getElementById('sw2');  
 sw2.value= ((h2<=9) ? "0"+h2 : h2) + " : " + ((m2<=9) ? "0" + m2 : m2) + " : " + s2;  
 SD2=window.setTimeout("stopwatch2();", 1000);  
 }  
 }  
 function reset2(){  
 var sw2=document.getElementById('sw2');  
 s2 = 0;  
 m2 = 0;  
 h2 = 0;  
 sw2.value='00 : 00 : 00';  
 changestat2();  
 }  
 </script>  
 </head>  
 <body>  
 <h4>Lunch Timer</h4>  
 <input type="text" value="00 : 00 : 00" id="sw" style="width:90px" />  
 <br />  
 <input type="button" value="Start" id="butn" onClick="changestat()"/>  
 <input type="button" value="Reset" id="reset" onClick="reset()"/>   
 <h4>Break Timer</h4>  
 <input type="text" value="00 : 00 : 00" id="sw2" style="width:90px" />  
 <br />  
 <input type="button" value="Start" id="butn2" onClick="changestat2()"/>  
 <input type="button" value="Reset" id="reset2" onClick="reset2()"/>  
 <br />  
 <h4>Date / Time</h4>  
 <small>click to get date/time</small>  
 <br />  
 <font size="1" id="xtim"></font>  
 <br />  
 <br />  
 <button type="button" onclick="xtim()">Time</button>  
 <script>  
 function xtim()  
 {  
 document.getElementById("xtim").innerHTML = Date();  
 }  
 </script>  
 </body>  
 </html>
Etiquetas: