Пример с бегающими ссылками.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>DOM (Document Object Model)</title>
<script type="text/javascript">
var active = 0; // текущий активный элемент
// создадим массив, в котором будм хранить 5 объектов
// полуим доступ к массиву из 5 ссылок
var links = false; // вначале он равен false
function parseDocument() {
if(!links) { // если массив не создан, то создаем его
var nodelist = document.getElementById("menu").childNodes; // получим дочерние узлы menu - li
links = new Array();
var k = 0;
for(var i = 0; i < nodelist.length; i++) {
// отсеем элементы li
// Оператор instanceof используется для проверки, принадлежит ли объект данному типу.
if(nodelist[i] instanceof HTMLLIElement) {
var li = nodelist[i].childNodes; // получим у данного элемента дочерние узлы, т.е ссылку a
for(var j = 0; j < li.length; j++) {
// проверим является ли элемент непосредственно ссылкой
if(li[j] instanceof HTMLAnchorElement) {
links[k] = li[j]; // если li[j] является ссылкой, то мы помещаем ее в массив
k++; // увличиваем k
}
}
}
}
}
// alert(links[0].innerHTML); // Тестировали функцию. Вывелось Ссылка 1
// Выведем бегающий огонек
for(var i = 0; i < links.length; i++) {
if(i == active) links[i].style.color = "red";
else links[i].style.color = "blue";
}
if((active + 1) == links.length) active = 0; // если active равен длине массива, то обнуляем его
else active++; // увеличиваем active на 1
// Чтобы все работало циклически, вызываем таймер через каждые 100 милисекунд.
setTimeout(parseDocument, 100);
}
</script>
</head>
<!-- Запустим функию пи загрузке страницы. При alert(links[0].innerHTML); выводится: Ссылка 1-->
<body onload="parseDocument()">
<!-- Создадим меню с бегающим огоньком -->
<ul id="menu">
<li>
<a href="#">Ссылка 1</a>
</li>
<li>
<a href="#">Ссылка 2</a>
</li>
<li>
<a href="#">Ссылка 3</a>
</li>
<li>
<a href="#">Ссылка 4</a>
</li>
<li>
<a href="#">Ссылка 5</a>
</li>
</ul>
</body>
</html>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>DOM (Document Object Model)</title>
<script type="text/javascript">
var active = 0; // текущий активный элемент
// создадим массив, в котором будм хранить 5 объектов
// полуим доступ к массиву из 5 ссылок
var links = false; // вначале он равен false
function parseDocument() {
if(!links) { // если массив не создан, то создаем его
var nodelist = document.getElementById("menu").childNodes; // получим дочерние узлы menu - li
links = new Array();
var k = 0;
for(var i = 0; i < nodelist.length; i++) {
// отсеем элементы li
// Оператор instanceof используется для проверки, принадлежит ли объект данному типу.
if(nodelist[i] instanceof HTMLLIElement) {
var li = nodelist[i].childNodes; // получим у данного элемента дочерние узлы, т.е ссылку a
for(var j = 0; j < li.length; j++) {
// проверим является ли элемент непосредственно ссылкой
if(li[j] instanceof HTMLAnchorElement) {
links[k] = li[j]; // если li[j] является ссылкой, то мы помещаем ее в массив
k++; // увличиваем k
}
}
}
}
}
// alert(links[0].innerHTML); // Тестировали функцию. Вывелось Ссылка 1
// Выведем бегающий огонек
for(var i = 0; i < links.length; i++) {
if(i == active) links[i].style.color = "red";
else links[i].style.color = "blue";
}
if((active + 1) == links.length) active = 0; // если active равен длине массива, то обнуляем его
else active++; // увеличиваем active на 1
// Чтобы все работало циклически, вызываем таймер через каждые 100 милисекунд.
setTimeout(parseDocument, 100);
}
</script>
</head>
<!-- Запустим функию пи загрузке страницы. При alert(links[0].innerHTML); выводится: Ссылка 1-->
<body onload="parseDocument()">
<!-- Создадим меню с бегающим огоньком -->
<ul id="menu">
<li>
<a href="#">Ссылка 1</a>
</li>
<li>
<a href="#">Ссылка 2</a>
</li>
<li>
<a href="#">Ссылка 3</a>
</li>
<li>
<a href="#">Ссылка 4</a>
</li>
<li>
<a href="#">Ссылка 5</a>
</li>
</ul>
</body>
</html>
Комментариев нет:
Отправить комментарий