ПАУЗА В СЕКУНДОМЕРЕ JAVASCRIPT
Я создала таймер,в котором есть кнопка "Старт","Стоп","Пауза" и "Добавить в таблицу""Стереть".
Стоп и Пауза сейчас две одниковые кнопки.
Мне нужно изменить код так,чтобы нажимая на Старт,секундомер начинал идти и кнопка Старт менялась на Паузу.Нажав на Паузу,секундомер останавливался и запоминал время,а в свою очередь Пауза менялась на Старт.
Или же как вариант сделать в Паузе две функции,при которой первое нажатие останавливало секундомер,а второе начинало с того момента где была остановка.
Заранее спасибо!
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<script type="text/javascript">
function trim(string) { return string.replace (/\s+/g, " ").replace(/(^\s*)|(\s*)$/g, ''); }
var init=0;
var startDate;
var clocktimer;
function clearFields() {
init = 0;
clearTimeout(clocktimer);
document.clockform.clock.value='00:00:00.00';
document.clockform.label.value='';
document.clockform.description.value='';
document.clockform.date.value='';
}
function clearALL() {
clearFields();
document.getElementById('marker').innerHTML = '';
}
function startTIME() {
var thisDate = new Date();
var t = thisDate.getTime() - startDate.getTime();
var ms = t%1000; t-=ms; ms=Math.floor(ms/10);
t = Math.floor (t/1000);
var s = t%60; t-=s;
t = Math.floor (t/60);
var m = t%60; t-=m;
t = Math.floor (t/60);
var h = t%60;
if (h<10) h='0'+h;
if (m<10) m='0'+m;
if (s<10) s='0'+s;
if (ms<10) ms='0'+ms;
if (init==1) document.clockform.clock.value = h + ':' + m + ':' + s + '.' + ms;
clocktimer = setTimeout("startTIME()",10);
}
function findTIME() {
if (init==0) {
startDate = new Date();
startTIME();
init=1;
}
}
function stopALL(){
clearTimeout(clocktimer);
init=0;
}
function addLogTime(){
var str = trim(document.clockform.label.value);
document.getElementById('marker').innerHTML = (str==''?'':str+': ') +
document.clockform.clock.value +'<br>'+ document.clockform.date.value + '<br>' + document.clockform.description.value + '<br>' + document.getElementById('marker').innerHTML;
clearFields();
}
function pauseTime() {
clearTimeout(clocktimer);
init = 0;
}
</script>
<noscript><p>Извините, для работы приложения нужен включённый JavaScript</p></noscript>
<form name="clockform">
<p>
<input name="add log time" type="button" value="Add Log Time" onclick="addLogTime()">
<input name="reset" type="button" value="Reset" onclick="clearALL()">
</br>
</br>
Time spent:
<input name="clock" size="12" maxlength="12" value="00:00:00.00">
<input name="starter" type="button" value="Start" onclick="findTIME()">
<input name="stop" type="button" value="Stop" onclick="stopALL()">
<input name="pause" type="button" value="Pause" onclick="pauseTime()">
Name:
<input name="label" size="12" maxlength="30" value="">
Work description:
<input name="description" size="24" value="">
Date:
<input name="date" size="12" value="">
</p><p id="marker">
</p>
</form>
</body>
</html>