目的是使一句话随时间变化颜色~~初学js的菜鸟求教~比如一句： I want to see you again.
每一秒变一次，随时间变化为
I want to see you again.
I want to see you again.
I want to see you again.
I want to see you again.
I want to see you again.
I want to see you again.
JavaScriptColor
每一秒变一次，随时间变化为
I want to see you again.
I want to see you again.
I want to see you again.
I want to see you again.
I want to see you again.
I want to see you again.
JavaScriptColor
.a{color:blue}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var i=0;
var str="I want to see you again";
var a=str.split(" ");
function show(){
if(i>=a.length){
//alert(123);
clearInterval(t);
return false;
}
var t="<span class='a'>"+a[i]+"</span>";
$("#div1").append(t+"\n");i++;
}
var t;
t=setInterval(show,1000); })
</script>
<div id="div1">
</div>
很简单上下2个div 内容大小一模一样
上面的div 里面的内容是有颜色的上面的div 改变宽度 就是你的 涂色效果
按#5说的做。我以前写过lrc同步歌词就是那样做的
按#5说的做。我以前写过lrc同步歌词就是那样做的我也做过同步歌词，但只能按照时间一行行的显示，具体不知道怎么实现每个字每个字的变色..
按照这说法，有两个DIV叠加么？ 有颜色的DIV慢慢覆盖没有颜色的？
望指教，谢谢··
<head>
<title> lrc歌词播放 演示 </title>
<style>
body, td { font-family: 宋体; font-size: 9pt; }
#bkk { border: #9999FF 1px dotted; }
#lrcollbox td , #lrcollbox font { font-family: 黑体; font-size: 15pt; }
#lrcoll td { color:#66CC99 }
#lrcbox { color:#99CCFF }
#lrcbc { color:#FFFF00 }
#lrcxx { color:#FFFF00 }
#lrcwt1,#lrcwt5 { filter: alpha(opacity=100) }
#lrctext { display:none; }
</style><script language="JavaScript">/*
=====================================================================
程序名称：lrc歌词播放（完美版）
程序件者：海浪
发行网站：http://kongjianzhan.126.com
作者信箱：[email protected]
制作日期：2005年09月12日 说明：本lrc歌词播放程序原是《浩海网络多格式播放器》中的一个组件，
现提取出来加以改进。本程序任何人都可以使用，但无论您转载或
对本程序作任何修改、美化、翻译等工作，请您*必须*保留此段版
权宣告的内容。
=====================================================================
*/// 为了兼容 IE5.0 结果好多正则的语法和处理方式都不能用，所以代码效率不是最高，郁闷。
function lrcClass(tt) //LRC歌词处理 类
{
this.gsh="歌手:~1~\n曲名:~2~\n专辑:~3~\n编者:~4~";
this.inr = []; //行
this.oTime = 0; //余补时间
this.hailang;
this.dts = -1; //当前行显示的s
this.dte = -1; //当前行显示的e
this.dlt = -1; //当前行
this.ddh; //当前行数据
this.fjh;
this.haohaiplay;
this.cnane;
//以上几个属性是为了判断是否还在上次显示的时间范围，以减少循环次数
if(/\[offset\:(\-?\d+)\]/i.test(tt)) //取offset余补时间
this.oTime = RegExp.$1/1000;
this.gsh = this.gsh.replace("~1~",(/\[ar:([^\[\]:]+)\]/i.test(tt))?RegExp.$1:"----");
this.gsh = this.gsh.replace("~2~",(/\[ti:([^\[\]:]+)\]/i.test(tt))?RegExp.$1:"----");
this.gsh = this.gsh.replace("~3~",(/\[al:([^\[\]:]+)\]/i.test(tt))?RegExp.$1:"----");
this.gsh = this.gsh.replace("~4~",(/\[by:([^\[\]:]+)\]/i.test(tt))?RegExp.$1:"----");
lrcxx.innerText = this.gsh;
tt = tt.replace(/\[\:\][^$\n]*(\n|$)/g,"$1"); //去掉注解
tt = tt.replace(/\[[^\[\]\:]*\]/g,"");
tt = tt.replace(/\[[^\[\]]*[^\[\]\d]+[^\[\]]*\:[^\[\]]*\]/g,"");
tt = tt.replace(/\[[^\[\]]*\:[^\[\]]*[^\[\]\d\.]+[^\[\]]*\]/g,"");
tt = tt.replace(/<[^<>]*[^<>\d]+[^<>]*\:[^<>]*>/g,"");
tt = tt.replace(/<[^<>]*\:[^<>]*[^<>\d\.]+[^<>]*>/g,""); //去掉除时间标签的其它标签 while(/\[[^\[\]]+\:[^\[\]]+\]/.test(tt))
{
tt = tt.replace(/((\[[^\[\]]+\:[^\[\]]+\])+[^\[\r\n]*)[^\[]*/,"\n");
var zzzt = RegExp.$1;
/^(.+\])([^\]]*)$/.exec(zzzt);
var ltxt = RegExp.$2;
var eft = RegExp.$1.slice(1,-1).split("][");
for(var ii=0; ii<eft.length; ii++)
{
var sf = eft[ii].split(":");
var tse = parseInt(sf[0],10) * 60 + parseFloat(sf[1]);
var sso = { t:[] , w:[] , n:ltxt }
sso.t[0] = tse-this.oTime;
this.inr[this.inr.length] = sso;
}
}
this.inr = this.inr.sort( function(a,b){return a.t[0]-b.t[0];} ); for(var ii=0; ii<this.inr.length; ii++)
{
while(/<[^<>]+\:[^<>]+>/.test(this.inr[ii].n))
{
this.inr[ii].n = this.inr[ii].n.replace(/<(\d+)\:([\d\.]+)>/,"%=%");
var tse = parseInt(RegExp.$1,10) * 60 + parseFloat(RegExp.$2);
this.inr[ii].t[this.inr[ii].t.length] = tse-this.oTime;
}
lrcbc.innerHTML = "<font>"+ this.inr[ii].n.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/%=%/g,"</font><font>") +" </font>";
var fall = lrcbc.getElementsByTagName("font");
for(var wi=0; wi<fall.length; wi++)
this.inr[ii].w[this.inr[ii].w.length] = fall[wi].offsetWidth;
this.inr[ii].n = lrcbc.innerText;
}
this.print("");
lrcwt1.innerText = "";
lrcwt2.innerText = "";
lrcwt3.innerText = "";
lrcwt4.innerText = "";
lrcwt5.innerText = "";
lrcbc.style.width = 0;
}
lrcClass.prototype.run = function()
{
try {
this.runing(this.haohaiplay.controls.currentPosition, this.haohaiplay.currentMedia.duration);
} catch(hh){}
}lrcClass.prototype.runing = function(tme, plen)
{
if(tme<this.dts || tme>=this.dte)
{
var ii;
for(ii=this.inr.length-1; ii>=0 && this.inr[ii].t[0]>tme; ii--){}
if(ii<0) return;
this.ddh = this.inr[ii].t;
this.fjh = this.inr[ii].w;
this.dts = this.inr[ii].t[0];
this.dte = (ii<this.inr.length-1)?this.inr[ii+1].t[0]:plen; lrcwt1.innerText = this.retxt(ii-3);
lrcwt2.innerText = this.retxt(ii-2);
lrcwt3.innerText = this.retxt(ii-1);
lrcwt4.innerText = this.retxt(ii+1);
lrcwt5.innerText = this.retxt(ii+2);
this.print(this.retxt(ii));
if(this.dlt==ii-1)
{
clearTimeout(this.hailang);
this.golrcoll(0);
}
this.dlt = ii;
}
var bbw = 0;
var ki;
for(ki=0; ki<this.ddh.length && this.ddh[ki]<=tme; ki++)
bbw += this.fjh[ki];
var kt = ki-1;
var sc = ((ki<this.ddh.length)?this.ddh[ki]:this.dte) - this.ddh[kt];
var tc = tme - this.ddh[kt];
bbw -= this.fjh[kt] - tc / sc * this.fjh[kt];
if(bbw>lrcbox.offsetWidth)
bbw = lrcbox.offsetWidth;
lrcbc.style.width = Math.round(bbw);
}lrcClass.prototype.retxt = function(i)
{
return (i<0 || i>=this.inr.length)?"":this.inr[i].n;
}lrcClass.prototype.print = function(txt)
{
lrcbox.innerText = txt;
lrcbc.innerText = txt;
}lrcClass.prototype.golrcoll = function(s)
{
lrcoll.style.top = 27-(s++)*3;
lrcwt1.filters.alpha.opacity = 90-s*10;
lrcwt5.filters.alpha.opacity = 10+s*10;
if(s<=9)
this.hailang = setTimeout(this.cnane+".golrcoll("+s+")",50);
}var lrcobj;function play()
{
lrcobj = new lrcClass(lrctext.innerText);
lrcobj.cnane = "lrcobj";
lrcobj.haohaiplay = mediaPlayerObj;
setInterval("lrcobj.run();",100);
}</script></head>
<body bgcolor="#000000" onload="play()">
<pre id="lrctext">
[ti:爱情的海洋]
[ar:S.H.E.]
[al:美丽新世界]
[by:sunsy]
[offset:500]
[00:00.00]
[00:08.00] LRC工作室
[00:22.68]因为我们
[00:24.71]不会飞翔
[00:27.18]所以幸福
[00:29.33]航程漫长
[00:32.44]难免有风暴埋伏在前方
[00:36.23]想试着拆散我们紧握的手掌
[00:40.39]你不怕
[00:42.18]你不乱
[00:45.67]我就不慌
[03:16.87][02:06.06][00:51.36]等我们越过爱情的海洋
[03:20.56][02:10.64][00:56.96]会庆幸终究没放弃退让
[03:25.16][02:14.97][01:01.61]在繁华的岸上
[03:27.26][02:17.20][01:03.72]把沿途的泪光
[03:29.79][02:19.60][01:06.13]都埋成了宝藏
[03:34.65]最珍贵的宝藏
[02:24.20][01:10.67]爱情这片汹涌的海洋
[02:28.77][01:15.22]有太多太多伤心的波浪
[02:33.44][01:19.90]我们别像那样
[02:35.80][01:22.23]我们不要遗憾
[02:38.55][01:24.55]要一起过海洋
[02:45.54][02:40.75][01:27.28]要一起到对岸
[01:37.31]如果有时
[01:38.41]灰心失望
[01:40.88]那是因为
[01:42.61]太爱对方
[01:45.42]谁能一开始对爱就擅长
[01:49.76]谁能才刚启程就有方向
[01:54.67]不辛苦
[01:56.46]不困难
[01:59.21]何必渴望
</pre>
<center>
<table>
<tr>
<td width="260" height="200">
<object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" id="mediaPlayerObj"
width="250" height="200">
<param name="url" value="D:/taotao/My Music/流行歌曲/S.H.E—爱情的海洋.mp3">
<param name="rate" value="1">
<param name="balance" value="0">
<param name="currentPosition" value="0">
<param name="playCount" value="1">
<param name="autoStart" value="-1">
<param name="volume" value="100">
<param name="currentMarker" value="0">
<param name="invokeURLs" value="-1">
<param name="stretchToFit" value="-1">
<param name="windowlessVideo" value="0">
<param name="enabled" value="-1">
<param name="enableContextMenu" value="0">
<param name="fullScreen" value="0">
<param name="enableErrorDialogs" value="0">
</object>
</td>
<td width="180" height="200" id="lrcxx"></td>
</tr>
</table>
<div id="bkk" style="width:700;">
<div id="lrcollbox" style="overflow:hidden; height:210; width:100%;">
<table border="0" cellspacing="0" cellpadding="0" width="100%" id="lrcoll" style="position:relative; top: 30px;">
<tr><td nowrap height="30" align="center" id="lrcwt1"></td></tr>
<tr><td nowrap height="30" align="center" id="lrcwt2"></td></tr>
<tr><td nowrap height="30" align="center" id="lrcwt3"></td></tr>
<tr><td nowrap height="30" align="center"><table border="0" cellspacing="0" cellpadding="0">
<tr><td nowrap height="30"><span id="lrcbox" style="width:0;"></span></td></tr>
<tr style="position:relative; top: -30px; z-index:6;"><td nowrap height="30"><span id="lrcbc" style="overflow:hidden; width:0;"></span></td>
</tr>
</table></td></tr>
<tr style="position:relative; top: -30px;"><td nowrap height="30" align="center" id="lrcwt4"></td></tr>
<tr style="position:relative; top: -30px;"><td nowrap height="30" align="center" id="lrcwt5"></td></tr>
</table>
</div>
</div>
</center></body>
</html>