Показать сообщение отдельно
  #1 (permalink)  
Старый 08.07.2016, 10:30
Аспирант
Отправить личное сообщение для diga Посмотреть профиль Найти все сообщения от diga
 
Регистрация: 13.01.2016
Сообщений: 57

js Таймер (как оптимизировать?)
Доброго дня суток форумчане!
Необходимо было написать 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>
Ответить с цитированием