Здравствуйте, стоит задача реализовать стрелочный секундомер на джаваскрипте с кнопками пуск и пауза. В интернете был найден код стрелочных часов:
<script>
function dysTime(){
var d = new Date();
var sek = d.getSeconds();
var minut = d.getMinutes();
var hour = d.getHours();
var s = sek*6;
var m = minut*6;
var divS = document.getElementById("sekond");
divS.style.webkitTransform = "rotate("+ s +"deg)";
var divM = document.getElementById("minute");
divM.style.webkitTransform = "rotate("+ m +"deg)";
var divH = document.getElementById("hour");
divH.style.webkitTransform = "rotate("+ (h+Hm) +"deg)";
setTimeout(dysTime, 1000);
}
window.onload = dysTime;
</script>
</head>
<body>
<div id="сlock">
<div id="minute"><img src="img/minute.png"></div>
<div id="hour"><img src="img/hour.png"></div>
<div id="sekond"><img src="img/sek.png"></div>
<div id="ciferblat"><img src="img/Ciferblat.png"></div>
</div>
Насколько я понимаю, алгоритм решения примерно такой:
1. На кнопку вешается обработчик событий, запускающий нашу функцию.
2. В функции создается переменная, которой приравнивается new Date();
3. Берется секундная стрелка и с помощью свойства rotate вращается. секунды переводятся в градусы.
Как мне кажется, можно обойтись и без дат, воспользовавшись функцией:
<script>
var timer;
function start_timer()
{
if (timer) clearInterval(timer);
secs = 0;
document.getElementById('timer').innerHTML = 'Время: '+ secs + ' сек.';
timer = setInterval(
function () {
secs++;
document.getElementById('timer').innerHTML = 'Время: '+ secs + ' сек.';
},
1000
);
}
</script>
<input type="button" name="" value="test" onclick="start_timer()"/>
<div id="timer"></div>
Но у меня не получается совместить ее и dysTime с ее rotate:
<script>
var timer;
function start_timer() {
secs = 0;
document.getElementById('timer').innerHTML = 'Время: '+ secs + ' сек.';
timer = setInterval(
function () {
secs++;
var s = secs*6;
var m = minut*6;
var divS = document.getElementById("sekond");
divS.style.webkitTransform = "rotate("+ secs +"deg)";
},
1000
);
}
function init() {
var sec = 0;
setInterval(tick, 1000);
}
function tick() {
sec++;
document.getElementById("timer").
childNodes[0].nodeValue = sec;
}
</script>
<input type="button" name="" value="test" onclick="start_timer()"/>
<div id="timer"></div>
Я в коде в общих чертах разобрался, но не получается правильно все сделать. Помогите начинающему сделать еще один шажок на встречу senior javascript
