led-lauflicht.php
Quell Code
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id='wrapper'>
<div id='theMarquee'>
<div class='0_0 light off'></div>
<div class='0_1 light off'></div>
<div class='0_2 light off'></div>
<div class='0_3 light off'></div>
<div class='0_4 light off'></div>
<div class='0_5 light off'></div>
<div class='0_6 light off'></div>
<div class='0_7 light off'></div>
<div class='0_8 light off'></div>
<div class='0_9 light off'></div>
<div class='0_10 light off'></div>
<div class='0_11 light off'></div>
<div class='0_12 light off'></div>
<div class='0_13 light off'></div>
<div class='0_14 light off'></div>
<div class='0_15 light off'></div>
<div class='0_16 light off'></div>
<div class='0_17 light off'></div>
<div class='0_18 light off'></div>
<div class='0_19 light off'></div>
<div class='0_20 light off'></div>
<div class='0_21 light off'></div>
<div class='0_22 light off'></div>
<div class='0_23 light off'></div>
<div class='0_24 light off'></div>
<div class='0_25 light off'></div>
<div class='0_26 light off'></div>
<div class='0_27 light off'></div>
<div class='0_28 light off'></div>
<div class='0_29 light off'></div>
<div class='0_30 light off'></div>
<div class='0_31 light off'></div>
<div class='0_32 light off'></div>
<div class='0_33 light off'></div>
<div class='0_34 light off'></div>
<div class='0_35 light off'></div>
<div class='0_36 light off'></div>
<div class='0_37 light off'></div>
<div class='0_38 light off'></div>
<div class='0_39 light off'></div>
<div class='0_40 light off'></div>
<div class='0_41 light off'></div>
<div class='0_42 light off'></div>
<div class='0_43 light off'></div>
<div class='0_44 light off'></div>
<div class='0_45 light off'></div>
<div class='0_46 light off'></div>
<div class='0_47 light off'></div>
<div class='0_48 light off'></div>
<div class='0_49 light off'></div>
<div class='0_50 light off'></div>
<div class='0_51 light off'></div>
<div class='0_52 light off'></div>
<div class='0_53 light off'></div>
<div class='0_54 light off'></div>
<div class='0_55 light off'></div>
<div class='0_56 light off'></div>
<div class='0_57 light off'></div>
<div class='0_58 light off'></div>
<div class='0_59 light off'></div>
<div class='1_0 light off'></div>
<div class='1_1 light off'></div>
<div class='1_2 light off'></div>
<div class='1_3 light off'></div>
<div class='1_4 light off'></div>
<div class='1_5 light off'></div>
<div class='1_6 light off'></div>
<div class='1_7 light off'></div>
<div class='1_8 light off'></div>
<div class='1_9 light off'></div>
<div class='1_10 light off'></div>
<div class='1_11 light off'></div>
<div class='1_12 light off'></div>
<div class='1_13 light off'></div>
<div class='1_14 light off'></div>
<div class='1_15 light off'></div>
<div class='1_16 light off'></div>
<div class='1_17 light off'></div>
<div class='1_18 light off'></div>
<div class='1_19 light off'></div>
<div class='1_20 light off'></div>
<div class='1_21 light off'></div>
<div class='1_22 light off'></div>
<div class='1_23 light off'></div>
<div class='1_24 light off'></div>
<div class='1_25 light off'></div>
<div class='1_26 light off'></div>
<div class='1_27 light off'></div>
<div class='1_28 light off'></div>
<div class='1_29 light off'></div>
<div class='1_30 light off'></div>
<div class='1_31 light off'></div>
<div class='1_32 light off'></div>
<div class='1_33 light off'></div>
<div class='1_34 light off'></div>
<div class='1_35 light off'></div>
<div class='1_36 light off'></div>
<div class='1_37 light off'></div>
<div class='1_38 light off'></div>
<div class='1_39 light off'></div>
<div class='1_40 light off'></div>
<div class='1_41 light off'></div>
<div class='1_42 light off'></div>
<div class='1_43 light off'></div>
<div class='1_44 light off'></div>
<div class='1_45 light off'></div>
<div class='1_46 light off'></div>
<div class='1_47 light off'></div>
<div class='1_48 light off'></div>
<div class='1_49 light off'></div>
<div class='1_50 light off'></div>
<div class='1_51 light off'></div>
<div class='1_52 light off'></div>
<div class='1_53 light off'></div>
<div class='1_54 light off'></div>
<div class='1_55 light off'></div>
<div class='1_56 light off'></div>
<div class='1_57 light off'></div>
<div class='1_58 light off'></div>
<div class='1_59 light off'></div>
<div class='2_0 light off'></div>
<div class='2_1 light off'></div>
<div class='2_2 light off'></div>
<div class='2_3 light off'></div>
<div class='2_4 light off'></div>
<div class='2_5 light off'></div>
<div class='2_6 light off'></div>
<div class='2_7 light off'></div>
<div class='2_8 light off'></div>
<div class='2_9 light off'></div>
<div class='2_10 light off'></div>
<div class='2_11 light off'></div>
<div class='2_12 light off'></div>
<div class='2_13 light off'></div>
<div class='2_14 light off'></div>
<div class='2_15 light off'></div>
<div class='2_16 light off'></div>
<div class='2_17 light off'></div>
<div class='2_18 light off'></div>
<div class='2_19 light off'></div>
<div class='2_20 light off'></div>
<div class='2_21 light off'></div>
<div class='2_22 light off'></div>
<div class='2_23 light off'></div>
<div class='2_24 light off'></div>
<div class='2_25 light off'></div>
<div class='2_26 light off'></div>
<div class='2_27 light off'></div>
<div class='2_28 light off'></div>
<div class='2_29 light off'></div>
<div class='2_30 light off'></div>
<div class='2_31 light off'></div>
<div class='2_32 light off'></div>
<div class='2_33 light off'></div>
<div class='2_34 light off'></div>
<div class='2_35 light off'></div>
<div class='2_36 light off'></div>
<div class='2_37 light off'></div>
<div class='2_38 light off'></div>
<div class='2_39 light off'></div>
<div class='2_40 light off'></div>
<div class='2_41 light off'></div>
<div class='2_42 light off'></div>
<div class='2_43 light off'></div>
<div class='2_44 light off'></div>
<div class='2_45 light off'></div>
<div class='2_46 light off'></div>
<div class='2_47 light off'></div>
<div class='2_48 light off'></div>
<div class='2_49 light off'></div>
<div class='2_50 light off'></div>
<div class='2_51 light off'></div>
<div class='2_52 light off'></div>
<div class='2_53 light off'></div>
<div class='2_54 light off'></div>
<div class='2_55 light off'></div>
<div class='2_56 light off'></div>
<div class='2_57 light off'></div>
<div class='2_58 light off'></div>
<div class='2_59 light off'></div>
<div class='3_0 light off'></div>
<div class='3_1 light off'></div>
<div class='3_2 light off'></div>
<div class='3_3 light off'></div>
<div class='3_4 light off'></div>
<div class='3_5 light off'></div>
<div class='3_6 light off'></div>
<div class='3_7 light off'></div>
<div class='3_8 light off'></div>
<div class='3_9 light off'></div>
<div class='3_10 light off'></div>
<div class='3_11 light off'></div>
<div class='3_12 light off'></div>
<div class='3_13 light off'></div>
<div class='3_14 light off'></div>
<div class='3_15 light off'></div>
<div class='3_16 light off'></div>
<div class='3_17 light off'></div>
<div class='3_18 light off'></div>
<div class='3_19 light off'></div>
<div class='3_20 light off'></div>
<div class='3_21 light off'></div>
<div class='3_22 light off'></div>
<div class='3_23 light off'></div>
<div class='3_24 light off'></div>
<div class='3_25 light off'></div>
<div class='3_26 light off'></div>
<div class='3_27 light off'></div>
<div class='3_28 light off'></div>
<div class='3_29 light off'></div>
<div class='3_30 light off'></div>
<div class='3_31 light off'></div>
<div class='3_32 light off'></div>
<div class='3_33 light off'></div>
<div class='3_34 light off'></div>
<div class='3_35 light off'></div>
<div class='3_36 light off'></div>
<div class='3_37 light off'></div>
<div class='3_38 light off'></div>
<div class='3_39 light off'></div>
<div class='3_40 light off'></div>
<div class='3_41 light off'></div>
<div class='3_42 light off'></div>
<div class='3_43 light off'></div>
<div class='3_44 light off'></div>
<div class='3_45 light off'></div>
<div class='3_46 light off'></div>
<div class='3_47 light off'></div>
<div class='3_48 light off'></div>
<div class='3_49 light off'></div>
<div class='3_50 light off'></div>
<div class='3_51 light off'></div>
<div class='3_52 light off'></div>
<div class='3_53 light off'></div>
<div class='3_54 light off'></div>
<div class='3_55 light off'></div>
<div class='3_56 light off'></div>
<div class='3_57 light off'></div>
<div class='3_58 light off'></div>
<div class='3_59 light off'></div>
<div class='4_0 light off'></div>
<div class='4_1 light off'></div>
<div class='4_2 light off'></div>
<div class='4_3 light off'></div>
<div class='4_4 light off'></div>
<div class='4_5 light off'></div>
<div class='4_6 light off'></div>
<div class='4_7 light off'></div>
<div class='4_8 light off'></div>
<div class='4_9 light off'></div>
<div class='4_10 light off'></div>
<div class='4_11 light off'></div>
<div class='4_12 light off'></div>
<div class='4_13 light off'></div>
<div class='4_14 light off'></div>
<div class='4_15 light off'></div>
<div class='4_16 light off'></div>
<div class='4_17 light off'></div>
<div class='4_18 light off'></div>
<div class='4_19 light off'></div>
<div class='4_20 light off'></div>
<div class='4_21 light off'></div>
<div class='4_22 light off'></div>
<div class='4_23 light off'></div>
<div class='4_24 light off'></div>
<div class='4_25 light off'></div>
<div class='4_26 light off'></div>
<div class='4_27 light off'></div>
<div class='4_28 light off'></div>
<div class='4_29 light off'></div>
<div class='4_30 light off'></div>
<div class='4_31 light off'></div>
<div class='4_32 light off'></div>
<div class='4_33 light off'></div>
<div class='4_34 light off'></div>
<div class='4_35 light off'></div>
<div class='4_36 light off'></div>
<div class='4_37 light off'></div>
<div class='4_38 light off'></div>
<div class='4_39 light off'></div>
<div class='4_40 light off'></div>
<div class='4_41 light off'></div>
<div class='4_42 light off'></div>
<div class='4_43 light off'></div>
<div class='4_44 light off'></div>
<div class='4_45 light off'></div>
<div class='4_46 light off'></div>
<div class='4_47 light off'></div>
<div class='4_48 light off'></div>
<div class='4_49 light off'></div>
<div class='4_50 light off'></div>
<div class='4_51 light off'></div>
<div class='4_52 light off'></div>
<div class='4_53 light off'></div>
<div class='4_54 light off'></div>
<div class='4_55 light off'></div>
<div class='4_56 light off'></div>
<div class='4_57 light off'></div>
<div class='4_58 light off'></div>
<div class='4_59 light off'></div>
<div class='5_0 light off'></div>
<div class='5_1 light off'></div>
<div class='5_2 light off'></div>
<div class='5_3 light off'></div>
<div class='5_4 light off'></div>
<div class='5_5 light off'></div>
<div class='5_6 light off'></div>
<div class='5_7 light off'></div>
<div class='5_8 light off'></div>
<div class='5_9 light off'></div>
<div class='5_10 light off'></div>
<div class='5_11 light off'></div>
<div class='5_12 light off'></div>
<div class='5_13 light off'></div>
<div class='5_14 light off'></div>
<div class='5_15 light off'></div>
<div class='5_16 light off'></div>
<div class='5_17 light off'></div>
<div class='5_18 light off'></div>
<div class='5_19 light off'></div>
<div class='5_20 light off'></div>
<div class='5_21 light off'></div>
<div class='5_22 light off'></div>
<div class='5_23 light off'></div>
<div class='5_24 light off'></div>
<div class='5_25 light off'></div>
<div class='5_26 light off'></div>
<div class='5_27 light off'></div>
<div class='5_28 light off'></div>
<div class='5_29 light off'></div>
<div class='5_30 light off'></div>
<div class='5_31 light off'></div>
<div class='5_32 light off'></div>
<div class='5_33 light off'></div>
<div class='5_34 light off'></div>
<div class='5_35 light off'></div>
<div class='5_36 light off'></div>
<div class='5_37 light off'></div>
<div class='5_38 light off'></div>
<div class='5_39 light off'></div>
<div class='5_40 light off'></div>
<div class='5_41 light off'></div>
<div class='5_42 light off'></div>
<div class='5_43 light off'></div>
<div class='5_44 light off'></div>
<div class='5_45 light off'></div>
<div class='5_46 light off'></div>
<div class='5_47 light off'></div>
<div class='5_48 light off'></div>
<div class='5_49 light off'></div>
<div class='5_50 light off'></div>
<div class='5_51 light off'></div>
<div class='5_52 light off'></div>
<div class='5_53 light off'></div>
<div class='5_54 light off'></div>
<div class='5_55 light off'></div>
<div class='5_56 light off'></div>
<div class='5_57 light off'></div>
<div class='5_58 light off'></div>
<div class='5_59 light off'></div>
<div class='6_0 light off'></div>
<div class='6_1 light off'></div>
<div class='6_2 light off'></div>
<div class='6_3 light off'></div>
<div class='6_4 light off'></div>
<div class='6_5 light off'></div>
<div class='6_6 light off'></div>
<div class='6_7 light off'></div>
<div class='6_8 light off'></div>
<div class='6_9 light off'></div>
<div class='6_10 light off'></div>
<div class='6_11 light off'></div>
<div class='6_12 light off'></div>
<div class='6_13 light off'></div>
<div class='6_14 light off'></div>
<div class='6_15 light off'></div>
<div class='6_16 light off'></div>
<div class='6_17 light off'></div>
<div class='6_18 light off'></div>
<div class='6_19 light off'></div>
<div class='6_20 light off'></div>
<div class='6_21 light off'></div>
<div class='6_22 light off'></div>
<div class='6_23 light off'></div>
<div class='6_24 light off'></div>
<div class='6_25 light off'></div>
<div class='6_26 light off'></div>
<div class='6_27 light off'></div>
<div class='6_28 light off'></div>
<div class='6_29 light off'></div>
<div class='6_30 light off'></div>
<div class='6_31 light off'></div>
<div class='6_32 light off'></div>
<div class='6_33 light off'></div>
<div class='6_34 light off'></div>
<div class='6_35 light off'></div>
<div class='6_36 light off'></div>
<div class='6_37 light off'></div>
<div class='6_38 light off'></div>
<div class='6_39 light off'></div>
<div class='6_40 light off'></div>
<div class='6_41 light off'></div>
<div class='6_42 light off'></div>
<div class='6_43 light off'></div>
<div class='6_44 light off'></div>
<div class='6_45 light off'></div>
<div class='6_46 light off'></div>
<div class='6_47 light off'></div>
<div class='6_48 light off'></div>
<div class='6_49 light off'></div>
<div class='6_50 light off'></div>
<div class='6_51 light off'></div>
<div class='6_52 light off'></div>
<div class='6_53 light off'></div>
<div class='6_54 light off'></div>
<div class='6_55 light off'></div>
<div class='6_56 light off'></div>
<div class='6_57 light off'></div>
<div class='6_58 light off'></div>
<div class='6_59 light off'></div>
</div>
</div>
<input type="text" id="theInput">
<script>
var SCROLLER_LENGTH = 60;
var HEIGHT = 7;
var theInput = $('#theInput');
var fps = 35;
var myMessage = textToLED('Soforhilfe-forum für HTML,PHP,CSS,JAVASCIPT und SQL');
var leftPointer = SCROLLER_LENGTH + 1;
var rightPointer = 0;
var furthestLeftPoint = 0 - myMessage.length;
theInput.change(function(){
clearLights();
myMessage = textToLED(this.value);
furthestLeftPoint = 0 - myMessage.length;
leftPointer = SCROLLER_LENGTH + 1;
});
function clearLights(){
var lightsOn = $('.on');
lightsOn.removeClass('on');
lightsOn.addClass('off');
}
function setLight(row, col, state){
var theLight = $('.'+row+'_'+col);
if(theLight.hasClass('on') && !state){
theLight.removeClass('on');
theLight.addClass('off');
}else if(theLight.hasClass('off') && state){
theLight.removeClass('off');
theLight.addClass('on');
}
}
function drawMessage(messageArray, leftPointer){
var messageLength = messageArray.length;
var totalScrollLength = SCROLLER_LENGTH + messageLength;
if(messageLength>0){
for(var col=0;col<messageLength;col++){
for(var row=0;row<HEIGHT;row++){
var offsetCol = leftPointer + col;
if(offsetCol<SCROLLER_LENGTH || offsetCol >= 0){
setLight(row,offsetCol,messageArray[col][row]);
}
}
}
}
}
function textToLED(theWord){
var theMessage = [];
theWord = theWord.toUpperCase();
for(var i=0;i<theWord.length;i++){
theMessage.push(charToLED(theWord.charAt(i)));
theMessage.push(charToLED());
}
var flatten = [];
flatten = flatten.concat.apply(flatten, theMessage);
return flatten;
}
function charToLED(theChar){
var theLed = [];
switch(theChar){
case ' ' :
theLed = [[false, false, false, false, false, false, false],
[false, false, false, false, false, false, false],
[false, false, false, false, false, false, false],
[false, false, false, false, false, false, false],
[false, false, false, false, false, false, false]];
break;
case 'A' :
theLed = [[false, false, true, true, true, true, true],
[false, true, false, false, true, false, false],
[true, false, false, false, true, false, false],
[false, true, false, false, true, false, false],
[false, false, true, true, true, true, true]];
break;
case 'Ä' :
theLed = [[true, false, true, true, true, true, true],
[false, true, false, false, true, false, false],
[false, true, false, false, true, false, false],
[false, true, false, false, true, false, false],
[true, false, true, true, true, true, true]];
break;
case 'B' :
theLed = [[true, true, true, true, true, true, true],
[true, false, false, true, false, false, true],
[true, false, false, true, false, false, true],
[true, false, false, true, false, false, true],
[false, true, true, false, true, true, false]];
break;
case 'C' :
theLed = [[false, true, true, true, true, true, false],
[true, false, false, false, false, false, true],
[true, false, false, false, false, false, true],
[true, false, false, false, false, false, true],
[false, true, false, false, false, true, false]];
break;
case 'D' :
theLed = [[true, true, true, true, true, true, true],
[true, false, false, false, false, false, true],
[true, false, false, false, false, false, true],
[true, false, false, false, false, false, true],
[false, true, true, true, true, true, false]];
break;
case 'E' :
theLed = [[true, true, true, true, true, true, true],
[true, false, false, true, false, false, true],
[true, false, false, true, false, false, true],
[true, false, false, true, false, false, true],
[true, false, false, false, false, false, true]];
break;
case 'F' :
theLed = [[true, true, true, true, true, true, true],
[true, false, false, true, false, false, false],
[true, false, false, true, false, false, false],
[true, false, false, true, false, false, false],
[true, false, false, false, false, false, false]];
break;
case 'G' :
theLed = [[false, true, true, true, true, true, false],
[true, false, false, false, false, false, true],
[true, false, false, false, false, false, true],
[true, false, false, false, true, false, true],
[true, true, false, false, true, true, true]];
break;
case 'H' :
theLed = [[true, true, true, true, true, true, true],
[false, false, false, true, false, false, false],
[false, false, false, true, false, false, false],
[false, false, false, true, false, false, false],
[true, true, true, true, true, true, true]];
break;
case 'I' :
theLed = [[false, false, false, false, false, false, false],
[true, false, false, false, false, false, true],
[true, true, true, true, true, true, true],
[true, false, false, false, false, false, true],
[false, false, false, false, false, false, false]];
break;
case 'J' :
theLed = [[false, false, false, false, false, true, false],
[false, false, false, false, false, false, true],
[true, false, false, false, false, false, true],
[true, true, true, true, true, true, false],
[true, false, false, false, false, false, false]];
break;
case 'K' :
theLed = [[true, true, true, true, true, true, true],
[false, false, false, true, false, false, false],
[false, false, true, false, true, false, false],
[false, true, false, false, false, true, false],
[true, false, false, false, false, false, true]];
break;
case 'L' :
theLed = [[true, true, true, true, true, true, true],
[false, false, false, false, false, false, true],
[false, false, false, false, false, false, true],
[false, false, false, false, false, false, true],
[false, false, false, false, false, false, true]];
break;
case 'M' :
theLed = [[true, true, true, true, true, true, true],
[false, true, false, false, false, false, false],
[false, false, true, false, false, false, false],
[false, true, false, false, false, false, false],
[true, true, true, true, true, true, true]];
break;
case 'N' :
theLed = [[true, true, true, true, true, true, true],
[false, false, true, false, false, false, false],
[false, false, false, true, false, false, false],
[false, false, false, false, true, false, false],
[true, true, true, true, true, true, true]];
break;
case 'O' :
theLed = [[false, true, true, true, true, true, false],
[true, false, false, false, false, false, true],
[true, false, false, false, false, false, true],
[true, false, false, false, false, false, true],
[false, true, true, true, true, true, false]];
break;
case 'Ö' :
theLed = [[true, false, true, true, true, true, false],
[false, true,false, false, false, false, true],
[false, true,false, false, false, false, true],
[false, true,false, false, false, false, true],
[true, false, true, true, true, true, false]];
break;
case 'P' :
theLed = [[true, true, true, true, true, true, true],
[true, false, false, true, false, false, false],
[true, false, false, true, false, false, false],
[true, false, false, true, false, false, false],
[false, true, true, false, false, false, false]];
break;
case 'Q' :
theLed = [[false, true, true, true, true, true, false],
[true, false, false, false, false, false, true],
[true, false, false, false, true, false, true],
[true, false, false, false, false, true, false],
[false, true, true, true, true, false, true]];
break;
case 'R' :
theLed = [[true, true, true, true, true, true, true],
[true, false, false, true, false, false, false],
[true, false, false, true, false, false, false],
[true, false, false, true, false, false, false],
[false, true, true, false, true, true, true]];
break;
case 'S' :
theLed = [[false, true, true, false, false, false, true],
[true, false, false, true, false, false, true],
[true, false, false, true, false, false, true],
[true, false, false, true, false, false, true],
[true, false, false, false, true, true, false]];
break;
case 'T' :
theLed = [[true, false, false, false, false, false, false],
[true, false, false, false, false, false, false],
[true, true, true, true, true, true, true],
[true, false, false, false, false, false, false],
[true, false, false, false, false, false, false]];
break;
case 'U' :
theLed = [[true, true, true, true, true, true, false],
[false, false, false, false, false, false, true],
[false, false, false, false, false, false, true],
[false, false, false, false, false, false, true],
[true, true, true, true, true, true, false]];
break;
case 'Ü' :
theLed = [[true, false, true, true, true, true, false],
[false, false, false, false, false, false, true],
[false, false, false, false, false, false, true],
[false, false, false, false, false, false, true],
[true, false, true, true, true, true, false]];
break;
case 'V' :
theLed = [[true, true, true, true, true, false, false],
[false, false, false, false, false, true, false],
[false, false, false, false, false, false, true],
[false, false, false, false, false, true, false],
[true, true, true, true, true, false, false]];
break;
case 'W' :
theLed = [[true, true, true, true, true, true, false],
[false, false, false, false, false, false, true],
[false, false, false, false, true, true, false],
[false, false, false, false, false, false, true],
[true, true, true, true, true, true, false]];
break;
case 'X' :
theLed = [[true, false, false, false, false, false, true],
[false, true, true, false, true, true, false],
[false, false, false, true, false, false, false],
[false, true, true, false, true, true, false],
[true, false, false, false, false, false, true]];
break;
case 'Y' :
theLed = [[true, false, false, false, false, false, false],
[false, true, false, false, false, false, false],
[false, false, true, true, true, true, true],
[false, true, false, false, false, false, false],
[true, false, false, false, false, false, false]];
break;
case 'Z' :
theLed = [[true, false, false, false, false, true, true],
[true, false, false, false, true, false, true],
[true, false, false, true, false, false, true],
[true, false, true, false, false, false, true],
[true, true, false, false, false, false, true]];
break;
default:
theLed = [[false, false, false, false, false, false, false]];
}
return theLed;
}
function draw() {
setTimeout(function() {
requestAnimationFrame(draw);
if(leftPointer==furthestLeftPoint){
leftPointer = SCROLLER_LENGTH + 1;
}
drawMessage(myMessage, leftPointer);
leftPointer--;
}, 1000 / fps);
}
draw();
</script>
Comments