登录

|

注册

论坛首页 › 隐藏归类 › 黑马那些年 › 第16届Android交流区 › 正文

黑马币：1
帖子：98
精华：0

JS实现字符颜色切换功能

© 郝少普中级黑马 / 2012-11-18 14:00 / 1226 人查看 / 3 人回复 / 0 人收藏转载请遵从CC协议禁止商业使用本文

<html>
<head>
<title></title>
<script type="text/javascript" language="javascript">
var now = 1;
function flower(){
var max = 6;
next = now + 1;
if(next == max + 1){
next = 1;
}
document.getElementById("p"+now).style.display = "none";
document.getElementById("p"+next).style.display = "block";
if(now == max){
now = 1;
}else{
now++;
}
setTimeout("flower()",1000);
}
</script>
</head>
<body onload="flower()">
<div align="center">
<p id="p1" style="color:red;display:block">黑马程序员，追求梦想永不止步</p>
<p id="p2" style="color:yellow;display:none">黑马程序员，追求梦想永不止步</p>
<p id="p3" style="color:blue;display:none">黑马程序员，追求梦想永不止步</p>
<p id="p4" style="color:green;display:none">黑马程序员，追求梦想永不止步</p>
<p id="p5" style="color:purple;display:none">黑马程序员，追求梦想永不止步</p>
<p id="p6" style="color:orange;display:none">黑马程序员，追求梦想永不止步</p>
</div>
</body>
</html>

复制代码

评分

参与人数 1	技术分 +1	收起理由
古银平	+ 1	神马都是浮云

查看全部评分

收藏 淘帖0 0 踩0

回复只看该作者

next flower function display color

3 个回复

倒序浏览

许庭洲 黑马帝 2012-11-20 07:27:03

| 只看该作者

沙发

值得学习ing!

回复 使用道具举报 

舒远黑马帝 2012-11-20 12:16:38

| 只看该作者

藤椅

本帖最后由舒远于 2012-11-20 12:33 编辑

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

小小的改写了一下：

<html>
<head>
<title></title>
<script type="text/javascript" language="javascript">
var colors = ["red","blue","green","yellow","cyan","#aabbcc"];
var index = 0;
//按顺序的颜色
function flower(){
if(index == colors.length)
index = 0;
document.getElementById("p1").style.color = colors[index++];
setTimeout("flower()",1000);
}
//随机的颜色
function randomIndex(){
var index = parseInt(Math.random() * (colors.length),10);
document.getElementById("p1").style.color = colors[index];
setTimeout("randomIndex()",1000);
}
</script>
</head>
<body onload="randomIndex()">
<div align="center">
<p id="p1">黑马程序员，追求梦想永不止步</p>
</div>
</body>
</html>

复制代码

评分

参与人数 1	技术分 +1	收起理由
古银平	+ 1	赞一个!

查看全部评分

回复 使用道具举报 

郝少普 中级黑马 2012-11-20 22:05:35

| 只看该作者

板凳

舒远发表于 2012-11-20 12:16
为什么不用一个，然后css控制文字的颜色改变不是省很多页面代码么？这样带宽就节省了。

小小的改写了一下 ...

不错，谢谢了。
值得学习

回复 使用道具举报 