Сложность - СРЕДНЕ
Языки - HTML, JS
ШАГ 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>
Спасибо, что дочитали до конца, ставьте лайк и подписывайтесь на наш канал. Так же не стесняйтесь оставлять комментарии с рекомендациями, и вы можете сами предлагать на какую тему написать следующую статью.
Если вам понравилось, то не забудьте поделиться с друзьями.
