JS效果：3个不同颜色的li不断循环，怎么做？ 50
效果如图，给一组li加背景颜色，3行不同颜色的，然后不断重复这3行不同的背景色，怎么做？数量是不定的，应该要循环、取模，但具体思路怎么写，我就不知道了...
效果如图，给一组li加背景颜色，3行不同颜色的，然后不断重复这3行不同的背景色，怎么做？
数量是不定的，应该要循环、取模，但具体思路怎么写，我就不知道了 展开
数量是不定的，应该要循环、取模，但具体思路怎么写，我就不知道了 展开
3个回答
展开全部
<meta charset="utf-8" />
如果出现乱码请把utf-8设置为gbk<br />
<style type="text/css">
/*先定义三个颜色类*/
.ys1{background-color:#f00;}
.ys2{background-color:#0f0;}
.ys3{background-color:#00f;}
</style>
ok颜色样式有了
<br />
来，做个输入框<br />
这位仁兄，你要打印多少
<input type="text" id="n" value="10" />
<input type="button" value="开始打印" onclick="print()" />
<br />
给编辑框加id(我设置为n),方便等会取数量
<br />
给按钮加上事件，被单击调用print()
<br />
接下来我们开始写print()
<br />
。。等会忘了，在加个标签(id=rs)用来显示结果
<br />
<ol id="rs"></ol>
<script type="text/javascript">
function print(){
//创建一个print()
//1.取出打印数量赋值给变量$n
var $n=document.getElementById("n").value;
//好，提示一把看看有没有成功
alert("哥，你想打印"+$n+"个li,没事，一定要是整数哦！还有别输几万，免得你机器顶不住");
//来，创建样式类名数组用来作为等会给li赋值类名
var $style=["ys1","ys2","ys3"];//就是我们刚刚定义的样式
var $z=0;//初始化为0，让他指向数组第一个元素
//在定义一个变量存放结果
var $rs="";//初始化为空
//要让他循环$n次
for(var $i=0;$i<$n;$i++){
if($z==$style.length){
//判断指针是否指到外面去了。。。这里一定要好好理解
$z=0;
}
$rs+='<li class="'+$style[$z]+'">';
$rs+="这是第"+($i+1)+"个li,这个时候这个li的累名为"+$style[$z]+"</li>";
$z++;//自身加1
}
//好循环完成，结果在$rs中
document.getElementById("rs").innerHTML=$rs;
}
</script>
如果出现乱码请把utf-8设置为gbk<br />
<style type="text/css">
/*先定义三个颜色类*/
.ys1{background-color:#f00;}
.ys2{background-color:#0f0;}
.ys3{background-color:#00f;}
</style>
ok颜色样式有了
<br />
来，做个输入框<br />
这位仁兄，你要打印多少
<input type="text" id="n" value="10" />
<input type="button" value="开始打印" onclick="print()" />
<br />
给编辑框加id(我设置为n),方便等会取数量
<br />
给按钮加上事件，被单击调用print()
<br />
接下来我们开始写print()
<br />
。。等会忘了，在加个标签(id=rs)用来显示结果
<br />
<ol id="rs"></ol>
<script type="text/javascript">
function print(){
//创建一个print()
//1.取出打印数量赋值给变量$n
var $n=document.getElementById("n").value;
//好，提示一把看看有没有成功
alert("哥，你想打印"+$n+"个li,没事，一定要是整数哦！还有别输几万，免得你机器顶不住");
//来，创建样式类名数组用来作为等会给li赋值类名
var $style=["ys1","ys2","ys3"];//就是我们刚刚定义的样式
var $z=0;//初始化为0，让他指向数组第一个元素
//在定义一个变量存放结果
var $rs="";//初始化为空
//要让他循环$n次
for(var $i=0;$i<$n;$i++){
if($z==$style.length){
//判断指针是否指到外面去了。。。这里一定要好好理解
$z=0;
}
$rs+='<li class="'+$style[$z]+'">';
$rs+="这是第"+($i+1)+"个li,这个时候这个li的累名为"+$style[$z]+"</li>";
$z++;//自身加1
}
//好循环完成，结果在$rs中
document.getElementById("rs").innerHTML=$rs;
}
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
var arr = ['red','yellow','blue','green']
var num = 0;
oBtn.onclick=function(){
for(i=0;i<10;i++)
{
if(num==4)
{num=0}
oUl.innerHTML += "<li>"+i+"</li>"
oUl.getElementsByTagName("li")[i].style.background=arr[num];
num++;
}
var num = 0;
oBtn.onclick=function(){
for(i=0;i<10;i++)
{
if(num==4)
{num=0}
oUl.innerHTML += "<li>"+i+"</li>"
oUl.getElementsByTagName("li")[i].style.background=arr[num];
num++;
}
已赞过
已踩过<
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="view-point" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dosin</title>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style-none;
}
li{
width:50%;
}
</style>
<script>
li={
counter:1,
get:document.getElementsByTagName("li"),
bg1:"pink",
bg2:"blue",
bg3:"purple",
speed:100
}
window.onload=function(){
li.default=function(){
li.get[0].style.background=li.bg1;
li.get[3].style.background=li.bg1;
li.get[6].style.background=li.bg1;
li.get[1].style.background=li.bg2;
li.get[4].style.background=li.bg2;
li.get[7].style.background=li.bg2;
li.get[2].style.background=li.bg3;
li.get[5].style.background=li.bg3;
li.get[8].style.background=li.bg3;
}
}
li.ppt=window.setInterval(function(){
if(li.counter==1){
li.get[0].style.background=li.bg2;
li.get[3].style.background=li.bg2;
li.get[6].style.background=li.bg2;
li.get[1].style.background=li.bg3;
li.get[4].style.background=li.bg3;
li.get[7].style.background=li.bg3;
li.get[2].style.background=li.bg1;
li.get[5].style.background=li.bg1;
li.get[8].style.background=li.bg1;
}
else if(li.counter==2){
li.get[0].style.background=li.bg3;
li.get[3].style.background=li.bg3;
li.get[6].style.background=li.bg3;
li.get[1].style.background=li.bg1;
li.get[4].style.background=li.bg1;
li.get[7].style.background=li.bg1;
li.get[2].style.background=li.bg2;
li.get[5].style.background=li.bg2;
li.get[8].style.background=li.bg2;
}
else{
li.default()
}
li.counter++;
if(li.counter==4)li.counter=1
},li.speed)
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<meta name="view-point" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dosin</title>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style-none;
}
li{
width:50%;
}
</style>
<script>
li={
counter:1,
get:document.getElementsByTagName("li"),
bg1:"pink",
bg2:"blue",
bg3:"purple",
speed:100
}
window.onload=function(){
li.default=function(){
li.get[0].style.background=li.bg1;
li.get[3].style.background=li.bg1;
li.get[6].style.background=li.bg1;
li.get[1].style.background=li.bg2;
li.get[4].style.background=li.bg2;
li.get[7].style.background=li.bg2;
li.get[2].style.background=li.bg3;
li.get[5].style.background=li.bg3;
li.get[8].style.background=li.bg3;
}
}
li.ppt=window.setInterval(function(){
if(li.counter==1){
li.get[0].style.background=li.bg2;
li.get[3].style.background=li.bg2;
li.get[6].style.background=li.bg2;
li.get[1].style.background=li.bg3;
li.get[4].style.background=li.bg3;
li.get[7].style.background=li.bg3;
li.get[2].style.background=li.bg1;
li.get[5].style.background=li.bg1;
li.get[8].style.background=li.bg1;
}
else if(li.counter==2){
li.get[0].style.background=li.bg3;
li.get[3].style.background=li.bg3;
li.get[6].style.background=li.bg3;
li.get[1].style.background=li.bg1;
li.get[4].style.background=li.bg1;
li.get[7].style.background=li.bg1;
li.get[2].style.background=li.bg2;
li.get[5].style.background=li.bg2;
li.get[8].style.background=li.bg2;
}
else{
li.default()
}
li.counter++;
if(li.counter==4)li.counter=1
},li.speed)
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
追问
li数量不定，循环肯定要，这样不行
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
