Доброго дня суток форумчане!
Необходимо было написать 4 таймера, при клике на кнопку "старт" срабатывали бы одновременно, я сделал, но получился не красивый и не оптимизированный код, помогите оптимизировать функционал!
Премного благодарен!
$( document ).ready(function() {
"use strict";
var Common = {
initial_timer: function(){
var self = this;
this.status = 'stopped';
this.initialTimes = [2*60*61,10*601,5*60*60,50*60*60];
this.times = [2*60*61,10*601,5*60*60,50*60*60];
},
start_timer: function(){
if (this.status == 'running'){
return false;
}
var self = this;
console.log("call start timer");
this.status = 'running';
this.setIntervalTimer();
for (var i = 0; i < 4; i++) {
this.addClass(i, "running");
}
},
stop_timer: function(){
if (this.status == 'stopped'){
return false;
}
var self = this;
this.status = 'stopped';
console.log("call stop timer");
for (var i = 0; i < 4; i++) {
this.removeClass(i, "running");
}
clearTimeout(this.timer);
},
updateView : function() {
for (var i = 0; i < 4; i++) {
this.updateClock(i, this.times[i]);
}
},
updateClock : function(id, time) {
var element = document.getElementById("clock"+id);
var formattedTime = this.formatTime(time);
element.innerHTML = formattedTime;
},
addClass : function(id, className) {
var element = document.getElementById("clock"+id);
element.className += " " + className;
},
removeClass : function(id, className) {
var element = document.getElementById("clock"+id);
var exp = new RegExp(className);
element.className = element.className.replace( exp , '' );
},
formatTime : function(time) {
var minutes = Math.floor(time / 60);
var seconds = Math.floor(time % 60);
var hours = Math.floor(minutes / 60);
minutes = Math.floor(minutes % 60);
var result = "";
if (hours < 10) result +="0";
result += hours + ":";
if (minutes < 10) result += "0";
result += minutes + ":";
if (seconds < 10) result += "0";
result += seconds;
return result;
},
setIntervalTimer: function() {
this.timer = window.setInterval(this.countDownTimer, 1000);
},
countDownTimer: function() {
console.log(Common.times);
for (var i = 0; i < 4; i++) {
Common.times[i]++;
Common.updateClock(i, Common.times[i]);
}
},
clearIntervalTimer: function() {
if (this.timer) {
window.clearInterval(this.timer);
this.timer = null;
}
}
}
Common.initial_timer();
$( "#start" ).click(function() {
Common.start_timer();
});
$( "#stop" ).click(function() {
Common.stop_timer();
});
});
<html>
<head>
<title>ChessClock</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="timer.js"></script>
<link rel="stylesheet" type="text/css" href="timer.css">
</head>
<body>
<div class="timer">
<div id="clock0" class="clock">
00:00
</div>
<div id="clock1" class="clock">
00:00
</div>
<div id="clock2" class="clock">
00:00
</div>
<div id="clock3" class="clock">
00:00
</div>
<div class="button">
<button id="start" >Start</div>
<button id="stop">Stop</div>
</div>
</div>
</body>
</html>