HTML 迷魂灯

<!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">
  
  <title>MyNeon</title>
  
</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