Реализуем секундомер с использованием JavaScript.

Реализуем секундомер с использованием JavaScript.

@labweb


ШАГ 1

Добавляем HTML:


<!DOCTYPE html> 
<html> 
<head> 
 <title>WebLab - clock</title> 
 <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
<body> 
 <!--Форма секундомера--> 
 <form name=Form> 
 <input type=button value="Сбросить" onclick="Clear()"> 
 <input name=clockpole size=10 value="00:00:00.00"> 
 <input type=button value="Запустить/Остановить" onclick="StartStop()"> 
 </form> 
</body> 
</html>


ШАГ 2

Добавляем JavaScript:


<script> 
 
 //Переменные 
 var clock = 60; 
 var clocktimer, st, dh, dm, ds, ms; 
 var out=''; 
 var h=1,m=1,tm=1,s=0,ts=0,ms=0,init=0; 
 
 //Функция для очистки поля 
 function Clear() { 
 clearTimeout(clocktimer); 
 h=1;m=1;tm=1;s=0;ts=0;ms=0; 
 init=0; 
 out='00:00:00.00'; 
 document.Form.clockpole.value=out; 
 } 
 
 //Функция старта 
 function StartTIME() { 
 var cst = new Date(); 
 var t = (cst.getTime() - st.getTime())-(s*1000); 
 if (t>999) { s++; } 
 if (s>=(m*clock)) { 
 ts=0; 
 m++; 
 } else { 
 ts=parseInt((ms/100)+s); 
 if(ts>=clock) { ts=ts-((m-1)*clock); } 
 } 
 if (m>(h*clock)) { 
 tm=1; 
 h++; 
 } else { 
 tm=parseInt((ms/100)+m); 
 if(tm>=clock) { tm=tm-((h-1)*clock); } 
 } 
 ms = Math.round(t/10); 
 if (ms>99) {ms=0;} 
 if (ms==0) {ms='00';} 
 if (ms>0&&ms<=9) { ms = '0'+ms; } 
 if (ts>0) { ds = ts; if (ts<10) { ds = '0'+ts; }} else { ds = '00'; } 
 dm=tm-1; 
 if (dm>0) { if (dm<10) { dm = '0'+dm; }} else { dm = '00'; } 
 dh=h-1; 
 if (dh>0) { if (dh<10) { dh = '0'+dh; }} else { dh = '00'; } 
 out = dh + ':' + dm + ':' + ds + '.' + ms; 
 document.Form.clockpole.value = out; 
 clocktimer = setTimeout("StartTIME()",1); 
 } 
 
 //Функция запуска и остановки 
 function StartStop() { 
 if (init==0){ 
 Clear(); 
 st = new Date(); 
 StartTIME(); 
 init=1; 
 } else { 
 clearTimeout(clocktimer); 
 init=0; 
 } 
 } 
 </script>


На этом всё! Подписывайся на канал WebLab, мир веб-разработки.


Report Page