html随机产生文字的颜色,彩虹在HTML页面上的文本...每个字符是一个不同的随机生成的颜色...

这里是我的代码:

function toSpans(span) {

var str = span.firstChild.data;

var a = str.length;

span.removeChild(span.firstChild);

for (var i = 0; i < a; i++) {

var theSpan = document.createElement("SPAN");

theSpan.appendChild(document.createTextNode(str.charAt(i)));

span.appendChild(theSpan);

}

}

function RainbowSpan(span, hue, deg, brt, spd, hspd) {

this.deg = (deg == null ? 360 : Math.abs(deg));

this.hue = (hue == null ? 0 : Math.abs(hue) % 360);

this.hspd = (hspd == null ? 3 : Math.abs(hspd) % 360);

this.length = span.firstChild.data.length;

this.span = span;

this.speed = (spd == null ? 50 : Math.abs(spd));

this.hInc = this.deg/this.length;

this.brt = (brt == null ? 255 : Math.abs(brt) % 256);

this.timer = null;

toSpans(span);

this.moveRainbow();

}

RainbowSpan.prototype.moveRainbow = function() {

if (this.hue > 359) this.hue -= 360;

var color;

var b = this.brt;

var a = this.length;

var h = this.hue;

for (var i = 0; i < a; i++) {

if (h > 359) h -= 360;

if (h < 60) {

color = Math.floor(((h)/60) * b);

red = b;

grn = color;

blu = 0;

} else if (h < 120) {

color = Math.floor(((h - 60)/60) * b);

red = b - color;

grn = b;

blu = 0;

} else if (h < 180) {

color = Math.floor(((h - 120)/60) * b);

red = 0;

grn = b;

blu = color;

} else if (h < 240) {

color = Math.floor(((h - 180)/60) * b);

red = 0;

grn = b - color;

blu = b;

} else if (h < 300) {

color = Math.floor(((h - 240)/60) * b);

red = color;

grn = 0;

blu = b;

} else {

color = Math.floor(((h - 300)/60) * b);

red = b;

grn = 0;

blu = b - color;

}

h += this.hInc;

this.span.childNodes[i].style.color = "rgb(" + red + ", " + grn + ", " + blu + ")";

}

this.hue += this.hspd;

}

&copy Copyright 2013 by K45KMT

var r3 = document.getElementById("r3");

var myRainbowSpan2 = new RainbowSpan(r3, 0, 360, 255, 50, 348);

myRainbowSpan2.timer = window.setInterval("myRainbowSpan2.moveRainbow()", myRainbowSpan2.speed);

var colour = "#FF2535";

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值