Здравейте програмисти! 🙂

Повечето от моите знания ще предам с помощта на видео.
Така е и в текущия пример.

В него показвам как с javascript можем да направим един простичък брояч.
Идеята е като се натисне едно бутонче той да започне да отброява секунди.
Позволява също и да може да се паузира и да се старира отново броeнeто, както и да се нулира брояча.

Как изглежда крайния резултат можете да погледнете тук: javascript брояч

Ето и видеото с разяснения (aко не се вижда много добре кода във видеото можете да го отворите на цял екран):

 

Ето и кода:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html>
<head>
<title>Javascript Basic Counter</title>
<script>
var cval = 0;
var cenabled = false;
function SwitchCounter() {
if (cenabled) {
cenabled = false;
document.getElementById(‘sbut’).value=’Start Counter’;
}
else {
cenabled = true;
document.getElementById(‘sbut’).value=’Stop Counter’;
}
Counter();
}
function Counter() {
if (!cenabled) return ”;
cval++;
document.getElementById(‘cbox’).innerHTML = cval;
setTimeout(‘Counter()’, 1000);
}
function ResetCounter() {
if (cenabled) SwitchCounter();
cval = 0;
document.getElementById(‘cbox’).innerHTML = ‘0’;
}
</script>
</head>
<body style=’text-align: center;’>
<div id=’cbox’ style=’font-size: 350pt; text-align: center;’ onclick=’SwitchCounter();’>0</div>
<input type=’button’ id=’sbut’ value=’Start Counter’ onclick=’SwitchCounter();’ />
<input type=’button’ value=’Reset Counter’ onclick=’ResetCounter();’ />
</body>
</html>

 

Файла с кода можете да изтеглите от тук.