【编程游戏】贺岁霓虹灯。（参观187楼xuyiazl的霓虹灯，荧光效果目前只在IE有效）

来源：互联网发布：手写笔软件编辑：程序博客网时间：2024/04/30 03:52

【编程游戏】贺岁霓虹灯。（第一名奖励10000可用分）

效果图

[目前Firefox中好使，其他浏览器需复制到本地，存为html文件看效果]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title></head><body style="background-color: #000000"><script type="text/javascript">var $ = function(s) { return typeof s === 'string' ? document.getElementById(s) : s; };var ad = function() {this.colours = ['#ff0000', '#00ff00', '#3366ff', '#ff00ff', '#ffa500', '#ffffff', '#fff000', '#ff00ff', '#00ff00','#3366ff', '#ff00ff', '#ff00ff', '#ff0000', '#ff00ff', '#ffffff', '#00ff00', '#fff000', '#00ff00','#ff0000', '#00ff00', '#3366ff', '#ff00ff', '#ffffff', '#ffa500', '#fff000', '#ff00ff', '#00ff00' ];this.txts = ['新年快乐', '恭喜发财', '万事如意', '身体健康'];this.YgetDelay = 0;this.XgetDelay = 0;this.Ydelay = 0;this.Xdelay = 0;this.step = 0.2;this.currStep = 0;this.mx = 0;this.ini = 1;this.gstep = 1;this.getColor = function() { return this.colours[Math.round(Math.random() * (this.colours.length - 1))] };this.getText = function() { return this.txts[Math.round(Math.random() * (this.txts.length - 1))] };this.pos = { x: document.documentElement.clientWidth / 2, y: document.documentElement.clientHeight / 2 };}ad.prototype.init = function() {var amount = this.colours.length;var box = document.createElement("div");box.style.position = 'absolute';box.style.top = this.pos.y + "px";box.style.left = this.pos.x + "px";document.body.appendChild(box);this.items = [];for (i = 0; i < amount; i++) {var item = document.createElement("div");this.items.push(item);item.id = 'items';item.style.position = 'absolute';item.style.top = '0px';item.style.left = '0px';item.style.height = '50px';item.style.width = '50px';item.style.color = this.colours[i];item.style.paddingTop = '20px';item.style.fontFamily = 'Courier New';item.style.fontSize = '5px';item.style.textAlign = 'center';item.innerHTML = '.';box.appendChild(item);}this.drawTxt();this.changeTxt();this.start();this.glow();}ad.prototype.drawTxt = function() {var txt = document.createElement("div");txt.style.position = 'absolute';txt.style.left = (this.pos.x - txt.offsetWidth / 2) + 'px';txt.style.top = (this.pos.y - txt.offsetHeight / 2) + 'px';document.body.appendChild(txt);this.txt = txt;}ad.prototype.changeTxt = function() {this.txt.style.color = this.getColor();this.txt.innerHTML = this.getText();this.txt.style.left = (this.pos.x - this.txt.offsetWidth / 3) + 'px';this.txt.style.top = (this.pos.y - this.txt.offsetHeight / 4) + 'px';var m = this;setTimeout(function() { m.changeTxt(); }, 2000);}ad.prototype.dim = function() {this.ini -= this.gstep;var m = this;var dt = setTimeout(function() { m.dim(); }, 10);if (this.ini < 2) {clearTimeout(dt);this.glow();}}ad.prototype.glow = function() {this.ini += this.gstep;var m = this;var gt = setTimeout(function() { m.glow(); }, 10);if (this.ini > 14) {clearTimeout(gt);this.dim();}}ad.prototype.delay = function() {for (i = 0; i < this.colours.length; i++) {var layer = this.items[i].style;layer.filter = 'glow(color=' + this.colours[i] + ', strength=' + this.ini + ')';layer.top = this.Ydelay + 50 * Math.sin((5 * Math.sin((this.currStep - 15.99) / 10)) + i * 70) + "px";layer.left = this.Xdelay + 180 * Math.cos((5 * Math.sin((this.currStep - 15.99) / 10)) + i * 70) + "px";}this.currStep += this.step;}ad.prototype.start = function() {this.Ydelay = this.YgetDelay += (this.YgetDelay) * 1 / 20;this.Xdelay = this.XgetDelay += (this.XgetDelay) * 1 / 20;this.delay();var m = this;setTimeout(function() { m.start(); }, 10);}var a = new ad();a.init();</script></body></html>
[目前Firefox中好使，其他浏览器需复制到本地，存为html文件看效果]