关闭

跑马灯式的选择元素方法

66人阅读 评论(0) 收藏 举报
<!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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:735次
    • 积分:84
    • 等级:
    • 排名:千里之外
    • 原创:8篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条