黑马程序员技术交流社区

标题: JS实现字符颜色切换功能 [打印本页]
作者: 郝少普    时间: 2012-11-18 14:00
标题: JS实现字符颜色切换功能
  1. <html>
  2. <head>
  3. <title></title>
  4. <script type="text/javascript" language="javascript">
  5.                 var now = 1;

  7.                 function flower(){
  8.                 var max = 6;
  9.                 next = now + 1;
  10.                 if(next == max + 1){               
  11.                         next = 1;
  12.                 }
  13.                 document.getElementById("p"+now).style.display = "none";
  14.                 document.getElementById("p"+next).style.display = "block";
  15.                 if(now == max){
  16.                         now = 1;
  17.                 }else{
  18.                         now++;
  19.                 }
  20.                 setTimeout("flower()",1000);
  21.         }
  22. </script>
  23. </head>
  24. <body onload="flower()">
  25.         <div align="center">
  26.         <p id="p1" style="color:red;display:block">黑马程序员，追求梦想永不止步</p>
  27.         <p id="p2" style="color:yellow;display:none">黑马程序员，追求梦想永不止步</p>
  28.         <p id="p3" style="color:blue;display:none">黑马程序员，追求梦想永不止步</p>
  29.         <p id="p4" style="color:green;display:none">黑马程序员，追求梦想永不止步</p>
  30.         <p id="p5" style="color:purple;display:none">黑马程序员，追求梦想永不止步</p>
  31.         <p id="p6" style="color:orange;display:none">黑马程序员，追求梦想永不止步</p>
  32.         </div>
  33. </body>
  34. </html>
复制代码
作者: 许庭洲    时间: 2012-11-20 07:27
值得学习ing!
作者: 舒远    时间: 2012-11-20 12:16
本帖最后由 舒远 于 2012-11-20 12:33 编辑

为什么不用一个<p></p>，然后css控制文字的颜色改变不是省很多页面代码么？这样带宽就节省了。

小小的改写了一下：
  1. <html>
  2. <head>
  3. <title></title>
  4. <script type="text/javascript" language="javascript">
  5.         var colors = ["red","blue","green","yellow","cyan","#aabbcc"];
  6.         var index = 0;
  7.         //按顺序的颜色
  8.     function flower(){                        
  9.                 if(index == colors.length)
  10.                         index = 0;
  11.                 document.getElementById("p1").style.color = colors[index++];
  12.                 setTimeout("flower()",1000);
  13.         }
  14.         //随机的颜色
  15.         function randomIndex(){
  16.                 var index = parseInt(Math.random() * (colors.length),10);
  17.                 document.getElementById("p1").style.color = colors[index];
  18.                 setTimeout("randomIndex()",1000);
  19.         }
  20. </script>
  21. </head>
  22. <body onload="randomIndex()">
  23.         <div align="center">
  24.                 <p id="p1">黑马程序员，追求梦想永不止步</p>
  25.     </div>
  26. </body>
  27. </html>
复制代码
作者: 郝少普    时间: 2012-11-20 22:05
舒远 发表于 2012-11-20 12:16
为什么不用一个，然后css控制文字的颜色改变不是省很多页面代码么？这样带宽就节省了。

小小的改写了一下 ...

不错，谢谢了。
值得学习



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2