javascript 和 DHTML 影响

Question

我已经有一段时间没有使用 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>

Answer 1

试试这个：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 变量只能在页面加载时创建

Answer 2

您可能想要：

e.style.borderColor = colors[i];

那么您需要担心 i 变得大于颜色的长度。

像这样的东西：

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

可能是要走的路。

Answer 3

可能的问题#1

如果这是页面上所有内容运行的顺序，则 e = document.getElementById("text") 将永远无法工作。您只能在 HTML 构建元素后通过其 ID 来获取该元素。尼尔建议仅在页面加载时获取元素是可行的。或者，您可以将脚本移至页面底部。

可能的问题#2

在您的 changeBorder 函数中，您像这样应用新颜色：

e.border = colors[i];

但是您可能想要访问 e.style.border。即使您这样做了，我的理解是 border 是快捷方式样式，您可以在一个规则中定义宽度、样式和颜色。您可能想要使用诸如e.style.borderColor之类的东西。

可能的问题#3

看起来您还没有走得足够远，不足以成为一个问题，但请记住，当您循环使用不同的颜色时，最终您的 i 变量会更大比颜色数组的长度。为了确保这种情况永远不会发生，您可以使用模运算符：

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

Bonus

当您只为 setTimeout 提供一个不带参数的函数时，则不需要使用引号。以下内容很好，不需要 eval 函数：

setTimeout(changeBorder, 1000);

Answer 4

这是一个示例。在 setTimeout 中，您可以只使用指向要执行的函数的指针。我添加了一种在 i = 4 后重新启动颜色开关的机制。