电子管显示

下面为效果显示区!

脚本说明:
把如下代码加入<body>区域中
<SCRIPT LANGUAGE="JavaScript">
<!--

var messages = new Array()

messages[0] = "welcome to the led sign"
messages[1] = "i hope you enjoy it!"
messages[2] = "do not forget to tell..."
messages[3] = "...your friends about..."
messages[4] = "javascript planet!"

// set normal spacing between two characters (no whitespace inbetween)
var space = 1

// set height width of each character
var height = 5
var width = 3

// create object of all supported characters in font
var letters = new letterArray()

// initialize image variables
var on = new Image(5, 5)
var off = new Image(5, 5)

// set image URLs
on.src = "ledon.gif"
off.src = "ledoff.gif"

// get number of images already layed out in page
var imageNum = document.images.length

// set maximum message length in characters
var boardWidth = 0

for (var i = 0; i < messages.length; ++i) {	
	var lengthWithNoSpaces = messages[i].split(" ").join("").length	
	var numberOfSpaces = messages[i].length - lengthWithNoSpaces	
	var currentBoardWidth = lengthWithNoSpaces * (width + space) - space + numberOfSpaces * space * 2	
	if (boardWidth < currentBoardWidth)		
		boardWidth = currentBoardWidth
}
// sign is currently not running
var running = false
var timerID = null

function letterArray() {	
	this.a = new Array(height)	
	this.a[0] = " * "	
	this.a[1] = "* *"	
	this.a[2] = "***"	
	this.a[3] = "* *"	
	this.a[4] = "* *"	
	
	this.b = new Array(height)	
	this.b[0] = "** "	
	this.b[1] = "* *"	
	this.b[2] = "**"	
	this.b[3] = "* *"	
	this.b[4] = "**"	
	
	this.c = new Array(height)	
	this.c[0] = "***"	
	this.c[1] = "*  "	
	this.c[2] = "*  "	
	this.c[3] = "*  "	
	this.c[4] = "***"

this.d = new Array(height)	
	this.d[0] = "** "	
	this.d[1] = "* *"	
	this.d[2] = "* *"	
	this.d[3] = "* *"	
	this.d[4] = "** "

this.e = new Array(height)	
	this.e[0] = "*** "	
	this.e[1] = "*  "	
	this.e[2] = "***"	
	this.e[3] = "*  "	
	this.e[4] = "***"	
	
	this.f = new Array(height)	
	this.f[0] = "***"	
	this.f[1] = "*  "	
	this.f[2] = "***"	
	this.f[3] = "*  "	
	this.f[4] = "*  "

this.g = new Array(height)	
	this.g[0] = "***"	
	this.g[1] = "*  "	
	this.g[2] = "***"	
	this.g[3] = "* *"	
	this.g[4] = "***"

this.h = new Array(height)	
	this.h[0] = "* *"	
	this.h[1] = "* *"	
	this.h[2] = "***"	
	this.h[3] = "* *"	
	this.h[4] = "* *"

this.i = new Array(height)	
	this.i[0] = "***"	
	this.i[1] = " * "	
	this.i[2] = " * "	
	this.i[3] = " * "	
	this.i[4] = "***"

this.j = new Array(height)	
	this.j[0] = "  *"	
	this.j[1] = "  *"	
	this.j[2] = "  *"	
	this.j[3] = "* *"	
	this.j[4] = "***"

this.k = new Array(height)	
	this.k[0] = "* *"	
	this.k[1] = "* *"	
	this.k[2] = "**"	
	this.k[3] = "* *"	
	this.k[4] = "* *"

this.l = new Array(height)	
	this.l[0] = "*  "	
	this.l[1] = "*  "	
	this.l[2] = "*  "	
	this.l[3] = "*  "	
	this.l[4] = "***"	
	
	this.m = new Array(height)	
	this.m[0] = "* *"	
	this.m[1] = "***"	
	this.m[2] = "***"	
	this.m[3] = "* *"	
	this.m[4] = "* *"

this.n = new Array(height)	
	this.n[0] = "* *"	
	this.n[1] = "***"	
	this.n[2] = "***"	
	this.n[3] = "***"	
	this.n[4] = "* *"

this.o = new Array(height)	
	this.o[0] = "***"	
	this.o[1] = "* *"	
	this.o[2] = "* *"	
	this.o[3] = "* *"	
	this.o[4] = "***"	
	
	this.p = new Array(height)	
	this.p[0] = "** "	
	this.p[1] = "* *"	
	this.p[2] = "** "	
	this.p[3] = "*  "	
	this.p[4] = "*  "

this.q = new Array(height)	
	this.q[0] = "***"	
	this.q[1] = "* *"	
	this.q[2] = "* *"	
	this.q[3] = "***"	
	this.q[4] = "***"

this.r = new Array(height)	
	this.r[0] = "** "	
	this.r[1] = "* *"	
	this.r[2] = "** "	
	this.r[3] = "* *"	
	this.r[4] = "* *"

this.s = new Array(height)	
	this.s[0] = "***"	
	this.s[1] = "*  "	
	this.s[2] = "***"	
	this.s[3] = "  *"	
	this.s[4] = "***"	
	
	this.t = new Array(height)	
	this.t[0] = "***"	
	this.t[1] = " * "	
	this.t[2] = " * "	
	this.t[3] = " * "	
	this.t[4] = " * "

this.u = new Array(height)	
	this.u[0] = "* *"	
	this.u[1] = "* *"	
	this.u[2] = "* *"	
	this.u[3] = "* *"	
	this.u[4] = "***"

this.v = new Array(height)	
	this.v[0] = "* *"	
	this.v[1] = "* *"	
	this.v[2] = "* *"	
	this.v[3] = "* *"	
	this.v[4] = " * "

this.w = new Array(height)	
	this.w[0] = "* *"	
	this.w[1] = "* *"	
	this.w[2] = "***"	
	this.w[3] = "***"	
	this.w[4] = "***"

this.x = new Array(height)	
	this.x[0] = "* *"	
	this.x[1] = "* *"	
	this.x[2] = " * "	
	this.x[3] = "* *"	
	this.x[4] = "* *"

this.y = new Array(height)	
	this.y[0] = "* *"	
	this.y[1] = "* *"	
	this.y[2] = "***"	
	this.y[3] = " * "	
	this.y[4] = " * "

this.z = new Array(height)	
	this.z[0] = "***"	
	this.z[1] = "  *"	
	this.z[2] = " *"	
	this.z[3] = "*  "	
	this.z[4] = "***"

this['!'] = new Array(height)	
	this['!'][0] = " * "	
	this['!'][1] = " * "	
	this['!'][2] = " * "	
	this['!'][3] = "   "	
	this['!'][4] = " * "

this[':'] = new Array(height)	
	this[':'][0] = "   "	
	this[':'][1] = " * "	
	this[':'][2] = "   "	
	this[':'][3] = " * "	
	this[':'][4] = "   "

this['.'] = new Array(height)	
	this['.'][0] = "   "	
	this['.'][1] = "   "	
	this['.'][2] = "   "	
	this['.'][3] = "   "	
	this['.'][4] = " * "

this['='] = new Array(height)	
	this['='][0] = "   "	
	this['='][1] = "***"	
	this['='][2] = "   "	
	this['='][3] = "***"	
	this['='][4] = "   "	
	
	this['='] = new Array(height)	
	this['='][0] = "   "	
	this['='][1] = "***"	
	this['='][2] = "   "	
	this['='][3] = "***"	
	this['='][4] = "   "

this['+'] = new Array(height)	
	this['+'][0] = "   "	
	this['+'][1] = " * "	
	this['+'][2] = "***"	
	this['+'][3] = " * "	
	this['+'][4] = "   "

this['-'] = new Array(height)	
	this['-'][0] = "   "	
	this['-'][1] = "   "	
	this['-'][2] = "***"	
	this['-'][3] = "   "	
	this['-'][4] = "   "

this['/'] = new Array(height)	
	this['/'][0] = "  *"	
	this['/'][1] = "  *"	
	this['/'][2] = " * "	
	this['/'][3] = "*  "	
	this['/'][4] = "*  "	
	
	this['\\'] = new Array(height)	
	this['\\'][0] = "*  "	
	this['\\'][1] = "*  "	
	this['\\'][2] = " * "	
	this['\\'][3] = "  *"	
	this['\\'][4] = "  *"

this['\\'] = new Array(height)	
	this['\\'][0] = "*  "	
	this['\\'][1] = "*  "	
	this['\\'][2] = " * "	
	this['\\'][3] = "  *"	
	this['\\'][4] = "  *"

this['"'] = new Array(height)	
	this['"'][0] = "* *"	
	this['"'][1] = "* *"	
	this['"'][2] = "* *"	
	this['"'][3] = "   "	
	this['"'][4] = "   "	
	
	this["'"] = new Array(height)	
	this["'"][0] = " * "	
	this["'"][1] = " * "	
	this["'"][2] = " * "	
	this["'"][3] = "   "	
	this["'"][4] = "   "

this['('] = new Array(height)	
	this['('][0] = "  *"	
	this['('][1] = " * "	
	this['('][2] = " * "	
	this['('][3] = " * "	
	this['('][4] = "  *"

this[')'] = new Array(height)	
	this[')'][0] = "*  "	
	this[')'][1] = " * "	
	this[')'][2] = " * "	
	this[')'][3] = " * "	
	this[')'][4] = "*  "	
	
	this['*'] = new Array(height)	
	this['*'][0] = "   "	
	this['*'][1] = "***"	
	this['*'][2] = "***"	
	this['*'][3] = "***"	
	this['*'][4] = "   "

this['?'] = new Array(height)	
	this['?'][0] = "** "	
	this['?'][1] = "  *"	
	this['?'][2] = " * "	
	this['?'][3] = "   "	
	this['?'][4] = " * "

this['0'] = new Array(height)	
	this['0'][0] = " * "	
	this['0'][1] = "* *"	
	this['0'][2] = "* *"	
	this['0'][3] = "* *"	
	this['0'][4] = " * "	
	
	this['1'] = new Array(height)	
	this['1'][0] = " * "	
	this['1'][1] = " * "	
	this['1'][2] = " * "	
	this['1'][3] = " * "	
	this['1'][4] = " * "

this['2'] = new Array(height)	
	this['2'][0] = "***"	
	this['2'][1] = "  *"	
	this['2'][2] = "***"	
	this['2'][3] = "*  "	
	this['2'][4] = "***"	
	
	this['3'] = new Array(height)	
	this['3'][0] = "***"	
	this['3'][1] = "  *"	
	this['3'][2] = "***"	
	this['3'][3] = "  *"	
	this['3'][4] = "***"	
	
	this['4'] = new Array(height)	
	this['4'][0] = "* *"	
	this['4'][1] = "* *"	
	this['4'][2] = "***"	
	this['4'][3] = "  *"	
	this['4'][4] = "  *"

this['5'] = new Array(height)	
	this['5'][0] = "***"	
	this['5'][1] = "*  "	
	this['5'][2] = "***"	
	this['5'][3] = "  *"	
	this['5'][4] = "** "

this['6'] = new Array(height)	
	this['6'][0] = "** "	
	this['6'][1] = "*  "	
	this['6'][2] = "***"	
	this['6'][3] = "* *"	
	this['6'][4] = "***"

this['7'] = new Array(height)	
	this['7'][0] = "***"	
	this['7'][1] = "  *"	
	this['7'][2] = " * "	
	this['7'][3] = "*  "	
	this['7'][4] = "*  "

this['8'] = new Array(height)	
	this['8'][0] = "***"	
	this['8'][1] = "* *"	
	this['8'][2] = "***"	
	this['8'][3] = "* *"	
	this['8'][4] = "***"

this['9'] = new Array(height)	
	this['9'][0] = "***"	
	this['9'][1] = "* *"	
	this['9'][2] = "***"	
	this['9'][3] = "  *"	
	this['9'][4] = "***"

}
function drawBlank() {	
	// assign greater than symbol to variable	
	var gt = unescape("%3e")	
	document.write('<TABLE BORDER=2 CELLPADDING=8' + gt + '<TR' + gt + '<TD WIDTH=468 BGCOLOR ALIGN="center" VALIGN="center"' + gt)	
	// print entire board of off images	
	for (var y = 0; y < height; ++y) {		
		for (var x = 0; x < boardWidth; ++x) {			
			document.write('<IMG SRC="' + off.src + '" HEIGHT=5 WIDTH=5' + gt)		
		}		
		document.write('<BR' + gt)	
	}	
	document.write('</TD' + gt + '</TR' + gt + '</TABLE' + gt)
}

function setLight(state, x, y) {	
	// set a specific light in sign to on (true) or off (false)	
	if (state)		
		document.images[computeIndex(x, y)].src = on.src	
	else		
		document.images[computeIndex(x, y)].src = off.src
}

function computeIndex(x, y) {	
	// compute the document index of an image in the sign, based on the x-y coordinates 	
	return (y * boardWidth + x) + imageNum
}

function floodBoard(startX) {	
	// set all lights from startX to off	
	for (var x = startX; x < boardWidth; ++x) {		
		for (var y = 0; y < height; ++y) {			
			setLight(false, x, y)		
		}	
	}
}

function drawMessage(num) {	
	// initialize variable to current message	
	var text = messages[num]		
	// initialize two counters (j - current character in message, i - current x coordinate)	
	var i = 0	
	var j = 0	
	while (1) {		
		if (text.charAt(j) != " ") {			
			// draw current letter			
			drawLetter(text.charAt(j), i)				
			// increment i by the constant width of an image			
			i += width		
		} 
		else {			
			// add an extra space (do not advance j yet)			
			drawSpace(i)			
			i += space		
		}		
		// if j is less that index of last character		
		if (j < text.length - 1) {			
			drawSpace(i)			
			i += space		
		} 
		else 
			// j is the index of the last character (lsat character already printed)
			break		
			// increment j by one because one letter was printed		
			++j	
		}	
		// flood the remaining piece of the sign (turn it off)	
		floodBoard(i)	
		// if message printed this time was not the last one in the array	
		if (num < messages.length - 1)		
			// val *must* be a global variable for use with the timeout		
			val = ++num	
		else		
			val = 0 // start cycle over again		
			// recursive call after waiting 3 seconds (some of the time already passed during printing)	
			timerID = setTimeout("drawMessage(val)", 3000)
		}
		// open form
		document.write('<FORM>')
		// create initial sign (all sign is off)
		drawBlank()

function startSign() {  
	// wait 3 seconds and then call function to print first message  
	drawMessage(0)  
	running = true
}

function stopSign() {  
	if(running)    
		clearTimeout(timerID)  
		running = false
	}
	document.write('<INPUT TYPE="button" VALUE="start" onClick="startSign()">')
	document.write('<INPUT TYPE="button" VALUE="stop" onClick="stopSign(); floodBoard(0)">')
	document.write('</FORM>')
// -->
</SCRIPT>