Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.02.2015, 21:54
Новичок на форуме
Отправить личное сообщение для random_pattern_name Посмотреть профиль Найти все сообщения от random_pattern_name
 
Регистрация: 27.02.2015
Сообщений: 1

Аналоговый стрелочный секундомер
Здравствуйте, стоит задача реализовать стрелочный секундомер на джаваскрипте с кнопками пуск и пауза. В интернете был найден код стрелочных часов:
<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
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Секундомер - старт и стоп SLameN jQuery 0 16.07.2014 17:04
Секундомер на JS bayanruby Элементы интерфейса 7 12.09.2013 22:54