JavaScript и эффект DHTML - PullRequest
Новая
       22

JavaScript и эффект DHTML

0 голосов
/ 18 апреля 2011

Прошло много времени с тех пор, как я работал с JavaScript - после получения сертификата я начал изучать Perl и с тех пор работал с ним. Я просто пытаюсь вернуть свою руку, и для начала с JS я написал это, как я бы сказал, простой, маленький скрипт для простого изменения границы div. Я не могу работать, однако, где я иду не так. Признательна за любые советы / предложения или идеи. TY заранее. Вот мой сценарий .. 

<script type="text/javascript">

var i =0;
var e = document.getElementById("text");

e.style.border = "solid black 5px";
e.style.padding = "5px";

var colors = ["red", "yellow", "blue", "green"];

function changeBorder()
{
    e.border = colors[i];
    i++;
    var timer = setTimeout("changeBorder()", 1000);
}

window.onload=function()
{
    changeBorder();
}

</script>



<div id="text">
   <h1>Hello world</h1>I am Mike!.
</div>

Ответы [ 4 ]

2 голосов
/ 18 апреля 2011

попробуйте это: http://jsfiddle.net/maniator/CEsJR/

<script type="text/javascript">
    var i =0;
var colors = ["red", "yellow", "blue", "green"];

function changeBorder(e)
{
    //restarts color counter
    i = i % colors.length;

    e.style.border = colors[i] + " solid 5px"
    i++;

    var timer = setTimeout(function(){changeBorder(e)}, 1000);
}

window.onload=function()
{


    var e = document.getElementById("text");

    e.style.border = "solid black 5px";
    e.style.padding = "5px";

    changeBorder(e);
}

</script>



<div id="text">
   <h1>Hello world</h1>I am Mike!.
</div>

переменная e может быть создана только при загрузке страницы

2 голосов
/ 18 апреля 2011

Вы, вероятно, хотите: 

e.style.borderColor = colors[i];

тогда вам нужно беспокоиться о том, что я становлюсь больше, чем длина цветов.

Что-то вроде: 

if (i >= colors.length) i=0;

это, вероятно, путь.

1 голос
/ 18 апреля 2011

Возможная проблема # 1

Если это порядок, в котором все выполняется на вашей странице, то e = document.getElementById("text") никогда не будет работать. Вы можете получить элемент по его идентификатору только после того, как он был построен HTML. Предложение Нила только о получении элемента при загрузке страницы будет работать. Или вы можете переместить сценарий внизу страницы.

Возможная проблема # 2

В вашей функции changeBorder вы применяете новый цвет следующим образом: 

e.border = colors[i];

Но вы, вероятно, хотели получить доступ к e.style.border. И даже если бы вы это сделали, я понимаю, что border - это стиль ярлыка, в котором вы определяете ширину, стиль и цвет в одном правиле. Возможно, вы захотите использовать что-то вроде e.style.borderColor.

Возможная проблема # 3

Не похоже, что вы зашли слишком далеко, чтобы это стало проблемой, но имейте в виду, что при циклическом переключении различных цветов ваша переменная i будет больше, чем длина цвета. массив. Чтобы этого никогда не происходило, вы можете использовать оператор модуля: 

e.style.borderColor = colors[i];
i = (i + 1) % 4;

Бонус

Когда вы только даете setTimeout функцию без аргументов, вам не нужно использовать кавычки. Следующее нормально и не требует функции eval: 

setTimeout(changeBorder, 1000);
1 голос
/ 18 апреля 2011

Вот пример . В setTimeout вы можете просто использовать указатель на функцию, которую хотите выполнить. Я включил механизм, чтобы перезапустить переключатель цвета после того, как я = 4.

...