Аналоговый стрелочный секундомер
Здравствуйте, стоит задача реализовать стрелочный секундомер на джаваскрипте с кнопками пуск и пауза. В интернете был найден код стрелочных часов:
<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 :) |
Часовой пояс GMT +3, время: 13:30. |