跑马灯式的选择元素方法

来源:互联网 发布:rsc数据库 编辑:程序博客网 时间:2024/03/29 07:03
<!DOCTYPE html>
<html>
<!--
    作者:82320325@qq.com
    时间:2016-08-30
    描述:流程  body(onload showName()) -showName() -start()递归。
    -->
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//定义全局变量num,以供start递归时变换
   var num = 0;
var names = new Array("q","q","q","q","q","q","q","q","q","q","q","q","q","q","q","q","q","q","q","q","q","q","q");
//showName()方法,将所有的names里元素以button形式显示在body中
function showName(){
var inHTML=" ";
var p = document.getElementById("p");
for(var i =0;i<names.length;i++){
//定义type id 和 赋值
inHTML = inHTML+"<input type='button' id="+i+" value="+names[i]+">";
}
p.innerHTML=inHTML;
//调用start方法,给一个元素变换颜色
start();
}

//start方法,依次给每一个元素变换颜色
function start(){
//判断是否走到了数组结尾,如果是,则重新给其赋值为0,从头开始
if(num==names.length){
num =0;
}
//首先给所有的元素赋上默认颜色,以区分选定元素,并且保证了每次只会有一个元素有颜色,不会每次赋颜色最终把所有的元素赋上颜色
for(var i = 0; i<names.length;i++){
document.getElementById(i).style.backgroundColor="";
}
//给定元素赋颜色 用num++来依次给每一个元素赋颜色
document.getElementById(num++).style.backgroundColor="red";
setTimeout(start,1000);
}
</script>
</head>

<!--onload在body中,当body加载时就加载showName()方法。-->
<body onload="showName()">
<p id ="p"></p>
</body>
</html>
0 0