跑马灯

最新推荐文章于 2024-01-22 21:20:18 发布

Pieces123

最新推荐文章于 2024-01-22 21:20:18 发布

阅读量521

点赞数

本文链接：https://blog.csdn.net/pieces123/article/details/52270578

版权

<html>
<meta charset="utf-8"/>
<head>
<title>
跑马灯练习
</title>
<script type="text/javascript">
var colors=["red","blue","gray"];
var colors2=["purple","black","#fff456"];
var index=0;
var index2=0;
function clickBtn(){
setInterval("font()",2000);
setInterval("back()",2000);

}
function font(){
var v= document.getElementById("labelId");
if(index>2){
index=0;
}
v.style.color=colors[index];

index++;
}

function back(){
var a=document.getElementById("fieldId");
if(index2>2){
index2=0;
}
a.style.backgroundColor=colors2[index2];

index2++;
}



</script>
</head>
<body>
<input type="button" value="开始" οnclick="clickBtn()"/>
<fieldset id="fieldId" ><label id="labelId">跑马灯</label></fieldset>

</body>
</html>