Question

尝试为表单的边框颜色设置动画，但似乎没有正在运行。我想在页面加载后自动更改边框颜色，而无需任何用户交互。

window.onload(function colormagic() {
  //alert("OK1")
  var blueborder = document.getElementById("form1")
  var colorarray = new array()
  colorarray[0] =  "blue"
  colorarray[1] = "green"
  colorarray[2] = "yellow"
  colorarray[3] =  "blue"
  colorarray[4] =  "green"
  colorarray[5] = "yellow"
  //alert("OK2")
  for (i = 0; i < elements.length; i++) {
    blueborder.style.borderColor=colorarray[i];
    //alert("OK3")
  }
})

所以我尝试添加警报来调试它。我只收到了第一份提醒声明。

Answer 1

不确定你要用这个来完成什么，它看起来不是很友好但是这可能接近于you're looking for。当然，您可以根据自己的喜好设置超时间隔。

var form = document.getElementById('form1');

function colormagic() {    
    var colorarray = ['blue', 'green', 'yellow'];
    var len = colorarray.length;
    var index = (Math.floor(Math.random() * len) + 1) - 1;

    form.style.borderColor = colorarray[index];

    setTimeout(colormagic, 100);
}

window.onload = colormagic;

几点改进：

每次循环都没有必要查询DOM，因此第一行从循环中取出
style.borderColor不是函数
您无需创建包含new Array()的数组，只需执行var arr = [colors, go, in, like, this];

Answer 2

尝试这样，这可行

Fiddle 演示

window.onload = function colormagic() {
            var blueborder = document.getElementById("form1");
            var colorarray = new Array();
            colorarray[0] =  "blue"
            colorarray[1] = "green"
            colorarray[2] = "yellow"
            colorarray[3] =  "blue"
            colorarray[4] =  "green"
            colorarray[5] = "yellow"

            for (i = 0; i < colorarray.length; i++) {
                blueborder.style.borderColor = colorarray[i];
            }                 
}

用于更改表单边框颜色的Javascript不起作用？

2 个答案: