用PHP和JS分别实现隔行换色

来源：互联网发布：美国三维设计软件编辑：程序博客网时间：2024/05/02 00:40

1.PHP实现隔行换色

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body><?php   /*隔行换色,<center>标签可以居中*/echo "<center><ul style='list-style-type:none;font-size:20px;margin-top:100px'>";    for($i=1;$i<=8;$i++)   //输出8行    {    switch ($i%3) {   //根据$i的取值,来給$color赋值    case 0:    $color="red";    break;    case 1:    $color="green";    break;    case 2:    $color="blue";    break;    default:    $color="white";    break;    }    echo "<li style='background-color:".$color.";width:200;padding:20px'>这是第".$i."行</li>";    }    echo "</ul></center>";?></body></html>

2.JS实现隔行换色

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JS实现隔行换色</title><style type="text/css">   *{margin:0px;padding: 0px;}#ul{margin:100px auto;}#ul li{list-style: none;width:300px;height: 50px;border:1px solid red;}</style></head><body><center><ul id="ul"></ul></center><script type="text/javascript">var oUl=document.getElementById("ul");  //获取ul节点var aColor=null;for(var i=0;i<9;i++){switch(i%3){ case 0:aColor="red";break;case 1:aColor="green";break;case 2:aColor="blue";break;default:aColor="white";break;}var aLi=document.createElement("li");  //创建li节点aLi.style.backgroundColor=aColor;  //设置li的背景颜色oUl.appendChild(aLi);    //添加li节点};</script></body></html>

3.效果图

(1)用JS实现的效果图

(2) 用PHP实现的效果图

1 0