跑马灯式的选择元素方法

原创 2016年08月30日 11:08:05
<!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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

自定义具有跑马灯效果的两种方法

普通的TextView可以实现跑马灯,但是只有当焦点在它上面时才有效。如何做一个自动的跑马灯呢?第一种:继承TextView,然后重写isFocused()方法就可以了,简单!Java代码 impo...

Android TestView实现跑马灯效果的两种方法

本文通过布局文件和代码实现方法来完成TextView跑马灯的效果。

Android 文字自动滚动(跑马灯)效果的两种实现方法

总结一下跑马灯的实现效果,网上比较流行的有两种,测试过了都可以实现文字滚动效果,建议使用第一种,因为可以更好地控制文字滚动速度、样式、字体等属性,第二种方法,还没有找到控制的方法!    ...

Android 文字自动滚动(跑马灯)效果的两种实现方法

本文章转载自别人:http://blog.sina.com.cn/s/blog_821e2bb10100uoao.html 总结一下跑马灯的实现效果,网上比较流行的有两种,测试过了都...

Android 文字自动滚动(跑马灯)效果的两种实现方法

总结一下跑马灯的实现效果,网上比较流行的有两种,测试过了都可以实现文字滚动效果,建议使用第一种,因为可以更好地控制文字滚动速度、样式、字体等属性,第二种方法,还没有找到控制的方法!    ...

《FPGA Verilog篇》Part 1 跑马灯例程的实现方法锦集

Part 1 跑马灯例程的实现方法锦集                                     ...

Android 文字自动滚动(跑马灯)效果的两种实现方法

总结一下跑马灯的实现效果,网上比较流行的有两种,测试过了都可以实现文字滚动效果,建议使用第一种,因为可以更好地控制文字滚动速度、样式、字体等属性,第二种方法,还没有找到控制的方法!    ...

文字水平滚动(跑马灯)——方法1

jquery插件版: 1 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/...
  • cddcj
  • cddcj
  • 2016-09-06 17:35
  • 952

zedboard(四)--陆佳华《嵌入式软硬件协同设计》第九章 跑马灯出现的问题

因为vivado的强大,我试着用按照
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)