<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<!--meta http-equiv="content-type" content="text/html; charset=UTF-8"-->
<title>MyNeon</title>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body bgcolor='#000000'>
<script type="text/javascript">
/**
* 霓虹灯
*
* @param {}
* r 圆盘半径
*/
Neon = function(r) {
this.r = r;
this.pointTexts = ['○', '●', '★', '■', '◆', '▲'];
this.colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple', 'pink'];
this.pointWidth = 20;
this.pointHeight = 20;
this.blankLength = this.r / 3;
this.o = [document.body.clientWidth / 2, document.body.clientHeight / 2];
this.points = [];
this.theta = 2 * Math.asin(this.pointWidth / this.blankLength / 2);
this.col = Math.floor((this.r - this.blankLength) / this.pointWidth);
this.row = Math.floor(2 * Math.PI / this.theta);
this.init();
}
Neon.prototype = {
init : function() {
this.theta = (this.theta > 0) ? this.theta : Math.PI / 12;
for (var i = 0; i <= this.row; i++) {
var ps = [];
for (var j = 0; j < this.col; j++) {
var p = document.createElement('div');
p.style.position = 'absolute';
p.style.height = this.pointHeight+'px';
p.style.width = this.pointWidth+'px';
p.style.left = Math.floor(this.o[0]
+ (this.blankLength + j * this.pointWidth)
* Math.cos(i * this.theta) - this.pointWidth / 2)+'px';
p.style.top = Math.floor(this.o[1]
- (this.blankLength + j * this.pointHeight)
* Math.sin(i * this.theta) - this.pointHeight / 2)+'px';
p.innerHTML = this.randomTextAndColor(Math.floor(Math.random()
* this.colors.length), this.pointTexts[Math.floor(Math
.random()
* this.pointTexts.length)]);
document.body.appendChild(p);
ps[j] = p;
}
this.points[i] = ps;
}
},
start : function() {
var self = this;
var i = 0;
var times = 0;
var text = this.pointTexts[Math.floor(Math.random()
* this.pointTexts.length)];
setInterval(function() {
for (var j = 0; j < self.col; j++) {
self.points[i][j].innerHTML = self.randomTextAndColor(Math
.floor(Math.random() * self.colors.length),
self.pointTexts[Math.floor(Math.random()
* self.pointTexts.length)]);
}
if (i == self.row - times) {
var ci = Math.floor(Math.random() * self.colors.length);
for (var j = 0; j < self.col; j++) {
self.points[i][j].innerHTML = self.randomTextAndColor(ci,
text);
}
times++;
if (self.row == times) {
text = self.pointTexts[Math.floor(Math.random()
* self.pointTexts.length)];
times = 0;
}
i = 0;
} else {
i++;
}
}, 5);
},
randomTextAndColor : function(ci, text) {
return '<span style="color:' + this.colors[ci] + ';">' + text
+ '</span>';
}
}
window.onload = function() {
var neon = new Neon(400);
neon.start();
}
</script>
</body>
</html>
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/zswang/archive/2010/01/12/5181874.aspxs