Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Идущие часы на классах Javascript (https://javascript.ru/forum/misc/73391-idushhie-chasy-na-klassakh-javascript.html)

goofy1337 12.04.2018 11:35

Идущие часы на классах Javascript
 
Добрый день, у меня есть код идущих часов с помощью функций. Не мог бы кто-то помочь переделать его с помощью классов?

function startTime() {
    var date = new Date();
    
    var h = date.getHours();
    var m = date.getMinutes(); 
    var s = date.getSeconds();
    
    m = checkTime(m); 
    s = checkTime(s); 

    document.getElementById('clock').innerHTML = h + ":" + m + ":" + s; 
    
    t = setTimeout('startTime()', 500);
}

function checkTime(i) {
    if (i < 10) i = "0" + i;
    
    return i;
}


Заранее благодарю.

Nexus 12.04.2018 11:54

Не за что :)
class startTime {
	constructor(){
		this.count();
	}
	count(){
		var date = new Date();
		
		var h = date.getHours();
		var m = date.getMinutes(); 
		var s = date.getSeconds();
		
		m = this.checkTime(m); 
		s = this.checkTime(s); 

		document.getElementById('clock').innerHTML = h + ":" + m + ":" + s; 
		
		setTimeout(this.count.bind(this), 500);
	}
	
	checkTime(i) {
		if (i < 10) i = "0" + i;
		
		return i;
	}
}
var Clock=new startTime();

Dilettante_Pro 12.04.2018 12:12

Nexus,
var t = setTimeout('new startTime()', 500);

Nexus 12.04.2018 12:14

Dilettante_Pro, в коде, в общем-то, вообще непонятно зачем переменная "t".

goofy1337 12.04.2018 12:34

Спасибо большое :) :D

Dilettante_Pro 12.04.2018 12:45

t можно использовать для останова часов
<div id = 'clock'></div>
<button id='stop'>Stop</button>
<script>
var t;
document.getElementById('stop').onclick = function() {
    clearTimeout(t);
};
class startTime {
	constructor(){
		this.count();
	}
	count(){
		var date = new Date();
		
		var h = date.getHours();
		var m = date.getMinutes(); 
		var s = date.getSeconds();
		
		m = this.checkTime(m); 
		s = this.checkTime(s); 

		document.getElementById('clock').innerHTML = h + ":" + m + ":" + s; 
		
		t = setTimeout(this.count.bind(this), 500);
	}
	
	checkTime(i) {
		if (i < 10) i = "0" + i;
		
		return i;
	}
}
 var Clock=new startTime();

</script>

Nexus 12.04.2018 12:49

Dilettante_Pro, думаю раз основной функционал у нас является классом, то и останавливать часы нужно через обращение к методу.
<div id = 'clock'></div>
<button id='stop'>Stop</button>
<script>
class startTime {
	constructor(){
		this.t=0;
		this.count();
	}
	count(){
		var date = new Date();
		
		var h = date.getHours();
		var m = date.getMinutes(); 
		var s = date.getSeconds();
		
		m = this.checkTime(m); 
		s = this.checkTime(s); 

		document.getElementById('clock').innerHTML = h + ":" + m + ":" + s; 
		
		this.t = setTimeout(this.count.bind(this), 500);
	}
	
	checkTime(i) {
		if (i < 10) i = "0" + i;
		
		return i;
	}
	
	stop(){
		clearTimeout(this.t);
	}
}


var Clock=new startTime();
document.getElementById('stop').onclick = function() {
    Clock.stop();
};
</script>

Dilettante_Pro 12.04.2018 12:52

Nexus,
Теперь еще нужно стартовать после останова.:)

Nexus 12.04.2018 13:02

Dilettante_Pro, метод "count" переименовать в "start" :)

Dilettante_Pro 12.04.2018 13:23

Цитата:

Сообщение от Nexus
метод "count" переименовать в "start"

ну тут уже вопрос концепции - как должны стартовать часы после останова.
В таком варианте они начинают отсчитывать текущее время, как если и не останавливались.
А м.б. надо продолжить отсчет со значения при останове?


Часовой пояс GMT +3, время: 10:39.