Simple script to display LED type text using javascript
Add this line @ the head section of your webpage
The JS file [LED.JS]
// the number of characters in the display
mwidth=20;
// delay in milliseconds between character shifts
mdelay=200;
// set to true if you want to reduce multiple spaces to a single space
dumpExtraSpaces=false;
mpos=0;
chars=" 0123456789abcdefghijklmnopqrstuvwxyz+-*/=?^&().,'!~$";
content=new Array();
color=new Array();
colors=new Array();
colors['green']=0;
colors['yellow']=-27;
colors['red']=-54;
colors['blue']=-81;
colorind=new Array();
colorind[0]='green';
var mtxt;
function marqueeInit(){
mtxt=document.getElementById("ledmarquee").innerHTML.toLowerCase();
mtxt=mtxt.replace(/\.\.\./g,'~');
mtxt=mtxt.replace(/&/g,'&');
mtxt=mtxt.replace(/"/g,"'");
mtxt=mtxt.replace(/\[/g,'(');
mtxt=mtxt.replace(/\]/g,')');
mtxt=mtxt.replace(/\{/g,'(');
mtxt=mtxt.replace(/\}/g,')');
mtxt=mtxt.replace(/[\n\r]/g,' ');
if(dumpExtraSpaces) mtxt=mtxt.replace(/\s{2,}/g,' ');
bpos=mtxt.indexOf('< ');
attempt=0;
while(bpos>=0){
mtxt.search(/< ([^>]*)>/);
ctmp=RegExp.$1;
colorind[bpos]=ctmp;
mtxt=mtxt.replace(/< [^>]*>/,'');
bpos=mtxt.indexOf('< ');
attempt++;
if(attempt>500){
// prevent browser lockups if something goes fishy (open < )
alert('parse failure');
return false;
}
}
mcont="<div style='display:none'>"+mtxt+"<p> </p>";
for(i=0;i<mwidth ;i++){
mcont+="<div class='digit' id='js_dig"+i+"'>\n";
mtxt=' '+mtxt+' ';
}
curcolor=0;
for(i=0;i<mtxt .length;i++){
if(colorind[i-mwidth]!=null){
curcolor=colors[colorind[i-mwidth]]||0;
}
color[i]=curcolor;
content[i]=-16*chars.indexOf(mtxt.substr(i,1));
}
document.getElementById("ledmarquee").style.width=(mwidth*16)+'px';
document.getElementById("ledmarquee").innerHTML=mcont;
document.getElementById("ledmarquee").style.visibility='visible';
mtimer=setInterval('marqueeScroll()',mdelay);
}
function marqueeScroll(){
for(i=0;i<mwidth;i++){
document.getElementById('js_dig'+i).style.backgroundPosition=content[i+mpos]+'px '+color[i+mpos]+'px';
}
mpos++;
if(mpos==mtxt.length-mwidth) mpos=0;
}
function onloadAppend(func){
var oldonload=window.onload;
if(typeof window.onload!='function'){
window.onload=func;
} else {
window.onload=function(){
if(oldonload) {
oldonload();
}
func();
}
}
}
onloadAppend(marqueeInit);
CSS
.digit {
float: left;
width: 14px;
height: 26px;
margin-right: 2px;
background: #000 url(ledmarquee.gif) 0px 0px;
}
#ledmarquee {
height: 26px;
visibility: hidden;
background-color: #000;
}
HTML
<div id="ledmarquee"> Multi-<red>C<blue>o<yellow>l<green>o<red>r<green> JavaScript LED marquee - IE & FF compatible - <yellow>no fonts required<green>simply superb
Thanks to http://javascript.internet.com/text-effects/led-marquee.html
Incoming search terms:
- jquery led display (45)
- Javascript LED display (29)
- jquery led marquee (29)
- javascript led scroller (22)
- javascript LED (19)
- jquery led scroller (17)
- jquery led text (17)
- led display javascript (14)
- led scroller javascript (13)
- jquery marqueeInit (11)
- LED javascript (10)
- led marquee javascript (8)
- javascript led marquee (8)
- jquery text led (7)
- LED Scroller java (6)
- led display using javascript (5)
- displaying LED text on a web page using jquery (5)
- led scroll javascript (5)
- led javascript script (4)
- jquery led text scroller (4)
- led scroller jquery (4)
- red led digit display jquery (4)
- javascript led digits (4)
- jquery scrolling text led (4)
- LED SCROLLING TEXT script (4)
- display led javascript (4)
- led panel jquery (4)
- scrolling led jquery (4)
- scrolling led text jquery (3)
- jquery led screen (3)
- led scrolling text javascript (3)
- jquery marquee tutorial (3)
- jquery led number (3)
- jquery marquee led (3)
- led java script (3)
- led scroller script (3)
- jquery Text Marquee led (3)
- led numbers javascript (3)
- javascript LED text scroller (3)
- LED marquee script (3)
You will also be interested in ,
- View webpage source using javascript
- Jquery Basics, How to use jquery?
- Simple Javascript Clock
- Get IP address using javascript And SSI
- Javascript Popup Chromeless Window
- Random images per day using javascript and jquery
- Banner rotator with preference using javascript
- Disabling right click menu using javascript Enhanced Version
- A single link that cycles through several webpage background color using javascript

