Базов Брояч / Таймер с Javascript (Видео Урок)

видян: 5731

Здравейте програмисти! :-)

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

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

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

Ето и кода:

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>

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

Ето и видео с разяснения:

Ако не се вижда много добре кода във видеото можете да чукнете на него и да го гледате в YouТube в HD формат.

Сподели |

Базов Брояч / Таймер с Javascript (Видео Урок)

Регистрирайте се, за да добавите коментар