Archive

Posts Tagged ‘прогрес’

ASCII spinner в HTML с JavaScript

December 31st, 2008 2 comments

Харесвам, когато има някакво въртящо се gif-че, което симулира прогрес при някакъв процес. Ето защо направих пренасочващата главна страница да се държи по подобен начин. Вложената доза шега е… Огромна и е породена от НАЙ-НАЙ-прекрасния торент клиент за мен – ctorrent. Няма значение, отплеснах се…

Като цяло не е нищо кой-знае какво, просто първата идея за имплементация, за която се сетих. Какво представлява: масив с 4 елемента – “\”, “|”, “/” и “-”, които непрекъснато се показват един след друг през определено време. Спинър-а не е cвързан с извършения прогрес! Трябва ни html страница и малко JavaScript. Ето JS-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
37
38
39
40
<script type="text/javascript">
  var spinnerElements = new Array("\\", "|", "/", "-");
  var spinnerIntervalId;
  var prevIndex = 0;

  function getById(elementId) {
    if (document.getElementById) {
      return document.getElementById(elementId);
    } else if (document.all) {
      return document.all[elementId];
    } else if (document.layers) {
      return document.layers[elementId];
    }
    return null;
  }

  function setSpinnerValue(value) {
    getById("spinner").innerHTML = value;
  }

  function getNextValue() {
    if (prevIndex >= spinnerElements.length) {
      prevIndex = 0;
    }
    var value = spinnerElements[prevIndex];
    prevIndex++;
    return value;
  }

  function startSpinner() {
    spinnerIntervalId = setInterval("setSpinnerValue(getNextValue());", 250);
  }

  function stopSpinner() {
    if (spinnerIntervalId != null) {
      clearInterval(spinnerIntervalId);
      spinnerIntervalId = null;
    }
  }
</script>

Малко CSS:

1
2
3
4
5
6
7
8
9
10
<style type="text/css">
  span#spinner {
    font-size:    16pt;
    font-weight:  bold;
  }

  a {
    color:      #0000EE;
  }
</style>

И няколкото реда HTML:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Spinner</title>
  </head>
  <body>
    <a href="#" onClick="startSpinner();">start</a>
    <a href="#" onClick="stopSpinner();">stop</a>
    <span> [ <span id="spinner">-</span> ]</span>
  </body>
</html>

Целият файл под формата на демо може да се види тук.

Categories: How to, Интернет, Програмиране Tags: , , , , , , ,