[求解]如何作一个循环让静态HTML表格里的一句句文字，使每个整句文字颜色循环变化

[okook]

就是HTML网页上文章，用表格列成一行一句的，然后让一句一句地变换颜色，最好能设定一个参数，想让哪句变换颜色就能让他变。主要是想控制其变色的节奏。请问如何实现呢？谢谢

[nevsong]

用客户端脚本 JavaScript 或者 VBScript 都可以

[okook]

谢谢fwqlove(凡林)。
如果能对固定的几行文字进行循环变色就好了。

[BlueDestiny]

<style>
BODY {
FONT-SIZE: 9pt;
}
TD {
FONT-SIZE: 9pt; LINE-HEIGHT: 11pt;
}
input {
FONT-SIZE: 9pt;
}
SELECT {
FONT-SIZE: 9pt; TEXT-ALIGN: center; WIDTH: 100px;
}
span {
FONT-SIZE: 12pt;
}
</style>

<script language=JavaScript>
/*
All Files are Designed & Writen by Windy_sk, you can use it freely but ...
YOU MUST KEEP THIS ITEM !
Email: [e-mail]
*/

window.onload = function(){
var color_list = new Array();
var hex = new Array(6);
var CurColor;
var CurIndex;
hex[0] = "FF"
hex[1] = "CC"
hex[2] = "99"
hex[3] = "66"
hex[4] = "33"
hex[5] = "00"
for(var x=0;x<6;x++){
for(var y=0;y<6;y++){
for(var z=0;z<6;z++){
CurColor = hex[x] + hex[y] + hex[z];
CurIndex = color_start.options.length;
color_start.options[CurIndex] = new Option("",CurColor);
color_start.options[CurIndex].style.backgroundColor = "#"+ CurColor;
CurIndex = color_end.options.length;
color_end.options[CurIndex] = new Option("",CurColor);
color_end.options[CurIndex].style.backgroundColor = CurColor;
}
}
}
}

function Dec2Any(str,num){
if(!/\d+/.test(str)) return NaN;
if(!/\d+/.test(num)) return NaN;
var num=eval(num);
if(num>36 || num<2) return NaN;
var the_str="0123456789abcdefghijklmnopqrstuvwxyz";
var str=eval(str);
var residue=0;
var result="";
while(true){
residue=str%num;
result = the_str.charAt(residue) + result;
if(str<num) break;
str=Math.floor(str/num);
}
return(result);
}

function get_color(the_num){
if(the_num > 255) the_num = 255;
if(the_num < 0) the_num = 0;
var the_color = Dec2Any(the_num,16);
if(the_color.length==1) the_color = "0" + the_color;
return the_color;
}

function build_text(str,C_start,C_end){
var the_len = str.length;
var R_start = eval("0x" + C_start.substr(0,2));
var R_end = eval("0x" + C_end.substr(0,2));
var R_unit = Math.floor((R_start - R_end)/the_len);
var G_start = eval("0x" + C_start.substr(2,2));
var G_end = eval("0x" + C_end.substr(2,2));
var G_unit = Math.floor((G_start - G_end)/the_len);
var B_start = eval("0x" + C_start.substr(4,2));
var B_end = eval("0x" + C_end.substr(4,2));
var B_unit = Math.floor((B_start - B_end)/the_len);
var CurColorStr = "";
var ResultStr = "";
var tmp;
show.value = "";
for(var i=0;i<the_len;i++){
CurColorStr = "#";
CurColorStr += get_color(R_start - i * R_unit);
CurColorStr += get_color(G_start - i * G_unit);
CurColorStr += get_color(B_start - i * B_unit);
ResultStr += "<font color='"+CurColorStr+"'>"+str.substr(i,1)+"</font>";
show.value += "<font color='"+CurColorStr+"'>"+str.substr(i,1)+"</font>\n";
}
return ResultStr;
}

function BuildIt(){
clearInterval(flash_timer);
ShowText.innerHTML = build_text(the_text.value,color_start.value,color_end.value);
if(flash.checked) Flash_text();
}

var flash_timer = null;
var color_list = null;

function Flash_text(){
var obj_list = ShowText.children;
color_list = new Array();
for(var i=0;i<obj_list.length;i++){
color_list[color_list.length] = ShowText.children[i].color;
}
flash_timer = setInterval("FlashIt()",50);
}

function FlashIt(){
var tmp_arr = new Array();
for(var i=0;i<color_list.length-1;i++){
tmp_arr[i+1] = color_list[i];
}
tmp_arr[0] = color_list[i];
color_list = tmp_arr;
for(var i=0;i<color_list.length;i++){
ShowText.children[i].color = color_list[i];
}
}

</script>

<table>
<tr>
<td colspan=3>显示文字： <input id=the_text type=text size=50 value="彩虹文字彩虹文字彩虹文字彩虹文字彩虹文字"></td>
</tr>
<tr>
<td>起始颜色： <select id="color_start" onChange="BuildIt();the_text.focus()"></select></td>
<td> ---- </td>
<td>结束颜色： <select id="color_end" onChange="BuildIt();the_text.focus()"></select></td>
</tr>
<tr>
<td colspan=3><input id=flash type=checkbox onclick="this.checked?Flash_text():clearInterval(flash_timer)"><label for=flash>闪烁</label></td>
</tr>
</table>
<span id=ShowText style=""></span>
<br>
<textarea id=show rows=15 cols=50></textarea>

[wxcyz]

標記

[okook]

谢谢BlueDestiny。也许我没有把问题描述清楚。

所以我想在重新说一下。

比如有这么几行字。现在有个要求：

就是把现在这几行字整句整句循环变颜色。轮到谁谁变颜色。

比如全部字是黑色，轮到哪行，那行就变成红色。其他行仍然是黑色。

谢谢！

[okook]

谢谢，因为我原来没有写过脚本程序，所以请大家给点代码例子来参考，谢谢了

[fwqlove]

<HTML>
<HEAD>
<script>
function disp(){
var d = document.getElementById('disp');
d.innerHTML = '';

var t = "<table border=0 cellSpacing=0 width=100%>";

var v = document.getElementById('content').value;
var va = v.split("\r\n");

var c1 = document.getElementById('f_color').value;
var c2 = document.getElementById('b_color').value;

for(i=0 ; i<va.length; i++){
if(i%2==1) t += '<tr bgcolor=' + c1 + '><td>' + va[i] + '</td></tr>';
else t += '<tr bgcolor=' + c2 + '><td>' + va[i] + '</td></tr>';
}
d.innerHTML = t + '</table>';
}
</script>
</HEAD>

<BODY>
第一种色：<input type=text id=f_color name=f_color value=#EEEEEE>
第二种色：<input type=text id=b_color name=b_color value=#DDDDDD><br>

请输入内容，第一行表示一句话
<textarea name=content id=content onkeyup=disp()></textarea><br>

<BR>内容显示区：<BR>
<div id=disp></div>

</BODY>
</HTML>

[孟子E章]

遍历表格行即可

[okook]

to:net_lover(孟子E章) 谢谢，因为我原来没有写过脚本程序，所以请给点代码例子来参考，谢谢了

[孟子E章]

<script>
var i = 0
function ColorMe()
{
ot = document.getElementById("mxh")
if(i == ot.rows.length)
{
i = 0
}
if(i ==0)
{
ot.rows[ot.rows.length-1].style.color="#000000"
}
else
{
ot.rows[i-1].style.color="#000000"
}
ot.rows[i].style.color="red"
i++
}
</script>
<body onload="setInterval('ColorMe()',2000)">
<table id=mxh>
<tr>
<td>文字内容文字内容文字内容文字内容</td>
</tr><tr>
<td>文字内容文字内容文字内容文字内容</td>
</tr><tr>
<td>文字内容文字内容文字内容文字内容</td>
</tr><tr>
<td>文字内容文字内容文字内容文字内容</td>
</tr><tr>
<td>文字内容文字内容文字内容文字内容</td>
</tr><tr>
<td>文字内容文字内容文字内容文字内容</td>
</tr>
</table>

[okook]

谢谢net_lover(孟子E章)，看了你的回复，我明白很多了。真的很感谢呀。

另外如果想在这个基础上，实现想用鼠标点击哪行，就从哪行开始换颜色，该如何实现呢？
我想在每行控制执行时间间隔不同，该如何处理呢？谢谢

[okook]

也可以把一整个表格换成单独的一个一个小表格来处理。这样是否方便识别处理呢？

[myk900]

QQ群： 25293866
IT技术联盟群，欢迎大家加入

[jzsh2000]

你是不是想做一个歌词同步显示的效果？
推荐你研究一下百度的歌词同步显示

[okook]

谢谢，jzsh2000(瘦猫) ，我的需求确实和百度的歌词同步显示有些相似。不过我们这边不需要播放MP3，其他的比如控制颜色显示基本和这个相同。另外我想能单击任何一行开始变换行颜色效果。



另外我看了百度的这个系统，确实不错，不过试听后效果并不太理想呀。呵呵

[okook]

谢谢jzsh2000(瘦猫)，你分析的很对。
我不想搞的这么复杂。另外我把百度上的内容代码直接拷贝到Microsoft FrontPage上也不能正常运行。不过确实是个很好的参考。

[jzsh2000]

其实你这个需求跟歌词同步显示已经非常相似了，你想“实现想用鼠标点击哪行，就从哪行开始换颜色”这个事件就是播放器的拖动事件，而你“在每行控制执行时间间隔不同”这就是歌词的显示时间（这个时间是不确定的），也就是说你的控制中必须得有个时间标记来确定哪一行该在哪个时间来变色，变色的事件就不用说了，百度用了20种颜色变化，估计你一看就会，点击事件应该也不难，首先判断一下时间段然后执行变色就可以了。