Service Tipps HTML CSS JavaScript PHP MySQL Webdesign Linkliste SiteMap

Senden Sie uns Ihren JavaScript-Baustein zu  

• JavaScript-Bausteine 9
  
• Kleine Bilderschau
  
• Großbuchstaben Test - Es wird ermittelt wieviele Großbuchstaben in einem Text vorhanden sind.
  
• Drehregler - Dieses Script erhöht oder veringert Zahlen, nach einem Button-Klick.
  
• Nur einmal senden - Dieses Script verhindert das doppelte senden von Formularen.
  
• Trinitätsoperator
  
• Wechselnder Bilderbutton
  
• Wechselnder Bilderbutton (2)
  
• Eingabefeld automatisch ändern - Eingabefeld ändert bei 'onFocus' den Inhalt und die Textfarbe.
  
• Zahlen autom. addieren - Die Zahlen werden bei einer Eingabe sofort zusammengezählt.
  
• Text mit Link markieren
  
• Eingabefeld löschen/einfügen
  
• Mit einem Klick markieren
  
• Anzahl der HTML-Tags - Anzahl der HTML-Tags einer Webseite ausgeben.
  
• Eingabefeld automatisch fokusieren
  
• Hintergrundfarbe ein- und ausschalten
  
• PopUp Blocker Test
  
• Zahlenwerte überprüfen und korrigieren
  
  

SiteMap - Alle 229 JavaScript Bausteine anzeigen

 

• Kleine Bilderschau [IE|M|O]

Das erste Bild wird gerade angezeigt!
Das zweite, wenn der Mauszeiger über dem Bild ist.
Das dritte Bild, wenn einmal darauf geklickt wird.
Und das vierte Bild bei einem Doppelklick.

<img id="dummy" src="bild1.gif" 
 onMouseOut="document.images.dummy.src='bild1.gif';"
 onMouseOver="document.images.dummy.src='bild2.gif';"
 onClick="document.images.dummy.src='bild3.gif';"
 onDblClick="document.images.dummy.src='bild4.gif';">

 

• Großbuchstaben Test [IE|M|O]

Das JavaScript ermittelt wie viele Großbuchstaben im Text vorhanden sind.

<script type="text/javascript">
// Großbuchstaben Test
function test() {
 var Feld = new Array("A","B","C","D","E","F","G","H","I","J","K","L",
"M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");
 var test = document.Form.Eingabe.value;
 var wert = 0;

 for (var i = 0; i < test.length; i++) {
  for (var r = 0; r < Feld.length; r++) {
   if ( test.substr(i,1)  ==  Feld[r]) {
    wert++;
   }
  }
 }
 alert("Dieser Text enthält " + wert + " große Buchstaben.");
}
</script>

<form name=Form>
 <textarea rows="5" cols="50" name="Eingabe">
    Als es die ersten Hügel des Kursivgebirges erklommen hatte ...
 </textarea>
 <input type="button" value="   Test   " onClick="test();">
</form>

Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse.

 

• Drehregler [IE|M|O]

Dieses Script erhöht oder verringert Zahlen, nach einem Button-Klick.
Der Startwert, der Endwert und die Schrittweite lassen sich einstellen.

<script type="text/javascript">
// Drehregler
function minus(Name , Startwert  , Schrittweite){
 var nWert = parseInt(document.Form.elements[Name].value);
 if (nWert > Startwert) {
  nWert -= Schrittweite;
 }
  document.Form.elements[Name].value=nWert;
}

function plus(Name , Endwert , Schrittweite){
 var nWert = parseInt(document.Form.elements[Name].value);
 if (nWert < Endwert) {
  nWert += Schrittweite;
 }
  document.Form.elements[Name].value=nWert;
}

</script>

<form name="Form">
<input size=3 type=text name="eins" value="1"> 
<input type=button value="-" onClick="minus('eins' , 1 ,  1);">
<input type=button value="+" onClick="plus('eins' , 10 ,  1);">
 (Wert von 1 bis 10, Schrittweite 1) <br>

<input size=3 type=text name="zwei" value="2"> 
<input type=button value="-" onClick="minus('zwei' , 2 , 2);">
<input type=button value="+" onClick="plus('zwei' , 26 , 2);">
 (Wert von 2 bis 26, Schrittweite 2) <br>

<input size=3 type=text name="drei" value="100"> 
<input type=button value="-" onClick="minus('drei' , 100 , 5);">
<input type=button value="+" onClick="plus('drei' , 150 , 5);">
 (Wert von 100 bis 150, Schrittweite 5)

(Wert von 1 bis 10, Schrittweite 1) (Wert von 2 bis 26, Schrittweite 2) (Wert von 100 bis 150, Schrittweite 5)

 

• Nur einmal senden [IE|M|O]

Dieses JavaScript verhindert das doppelte senden von Formularen.

<script type="text/javascript">
// Nur einmal senden
function einmal_senden() {
 document.Formular.elements["absenden"].value="Formular gesendet";
 document.Formular.elements["absenden"].disabled="disabled";
 return true;
}
</script>

<form name="Formular" action="" method="post" onSubmit="return einmal_senden();">
<input type="submit" name="absenden">
</form>

Beispiel: 

 

• Trinitätsoperator [IE|M|O]

Trinitätsoperator (Short Conditional if-Anweisungen)

<script type="text/javascript">
// Trinitätsoperator
function test3() {
 var Zahl1 = 55;
 var Zahl2 = 50;
 var Summe = Zahl1 + Zahl2;
 var meldung = (Summe > 100) ? "Die Summe ist größer als 100." : "Die Summe ist kleiner als 100.";
 alert(meldung);
}
</script>
<a href="javascript:test3();">Summe</a>

 

• Wechselnder Bilderbutton [IE|M|O]

Dieses JavaScript tauscht Bilder nach dem anklicken aus.

<script type="text/javascript">
// Wechselnder Bilderbutton
function a() {
 document.images.dummy.src="collapse.gif";
 document.getElementById("Ziel").href = "javascript:b();";
}

function b() {
 document.images.dummy.src="expand.gif";
 document.getElementById("Ziel").href = "javascript:a();";
}
</script>

<a href="javascript:a();" id="Ziel"><img src="expand.gif" name="dummy" border=0></a>

 

• Wechselnder Bilderbutton (2) [IE|M|O]

<script type="text/javascript">
// Wechselnder Bilderbutton (2)
function plus() {
 document.images.dummy2.src="collapse.gif";
 document.getElementById("script").href = "javascript:minus();";
 document.getElementById("mehr").style.display='inline'; 
 }

function minus() {
 document.images.dummy2.src="expand.gif";
 document.getElementById("script").href = "javascript:plus();";
 document.getElementById("mehr").style.display='none';
}
</script>

<img src="Bild1.gif"> 
<a href="javascript:plus();" id="script"><img src="expand.gif" name="dummy2" border=0></a> 
<span style="display: none" id=mehr>
 <img src="Bild2.gif">
</span>

 

• Eingabefeld automatisch ändern [IE|M|O]

Das Eingabefeld ändert bei „onFocus“ (Event-Handler)
automatisch den Inhalt und die Textfarbe.

<input type="text"  value="Ihr Name"
 onFocus="if(this.value=='Ihr Name'){
 this.value='';
 this.style.color='#FF0000'}"
 style="color: #B0B0B0;">

Beispiel für ein Textfeld
<textarea rows="3" cols="25"
 onFocus="if(this.value=='Kommentar'){
 this.value='';
 this.style.color='#458787'}"
 style="color: #a5d1d1;">Kommentar</textarea>

Beispiele:
		Kommentar

 

• Zahlen autom. addieren[IE|M|O]

Die Zahlen werden bei einer Eingabe sofort zusammengezählt.

<script type="text/javascript">
// Zahlen autom. addieren
 function zaehler() {
   var WertA = document.Form5.zahl1.value;
   var WertB = document.Form5.zahl2.value;
   var WertC = document.Form5.zahl3.value;
   document.Form5.ausgabe.value=WertA*1 + WertB*1 + WertC*1;
 }
</script>

<form name="Form5">
 Kaffee <input type=text name="zahl1" value="" size=3 onKeyUp="zaehler();"> € <br>
 Bier  <input type=text name="zahl2" value="" size=3 onKeyUp="zaehler();"> € <br>
 Saft  <input type=text name="zahl3" value="" size=3 onKeyUp="zaehler();"> € <br>
 Summe: <input type=text name="ausgabe" value="" size=3> €
</form>

Kaffee	€
Bier	€
Saft	€
Summe: €

 

• Text mit Link markieren[IE|M|O]

Dieses JavaScript markiert einen Text über einen Link.

<script type="text/javascript">
// Text mit Link markieren
function Markiere(x) {
 var ID = x.split(":");
 for (var r = 0; r < document.getElementsByTagName("dfn").length; r++) {
  document.getElementsByTagName("dfn")[r].style.backgroundColor="#FFFFFF";
 }
 for (var i = 0; i < ID.length; i++) {
  document.getElementById(ID[i]).style.backgroundColor="#FFFFB9";
 }
}
</script>

<a href="javascript:Markiere('a1:a3:a5');"> Markiere 1|3|5 </a> - 
<a href="javascript:Markiere('a2:a4:a6');"> Markiere 2|4|6 </a> - 
<a href="javascript:Markiere('a3');"> Markiere 3 </a> - 
<a href="javascript:Markiere('a2:a5');"> Markiere 2|5 </a> - 
<a href="javascript:Markiere('a1:a2:a3:a4:a5:a6');"> Markiere alles </a> <br><br>

<dfn id="a1"> 1. Äpfel </dfn><br>
<dfn id="a2"> 2. Birnen </dfn><br>
<dfn id="a3"> 3. Bananen </dfn><br>
<dfn id="a4"> 4. Pflaumen </dfn><br>
<dfn id="a5"> 5. Kirschen </dfn><br>
<dfn id="a6"> 6. Orangen </dfn>

Beispiel: Markiere 1|3|5 - Markiere 2|4|6 - Markiere 3 - Markiere 2|5 - Markiere alles 1. Äpfel 2. Birnen 3. Bananen 4. Pflaumen 5. Kirschen 6. Orangen

 

• Eingabefeld löschen/einfügen[IE|M|O]

Inhalt eines Eingabefelds in einem Eingabeformular vor der Eingabe von Daten löschen.
Wenn Ihre Besucher auf eines der Eingabefelder Ihres Online-Formulars klicken, geschieht das, um es auszufüllen. Sie können ihnen die Arbeit erleichtern, indem Sie den Inhalt des Eingabefeldes löschen, wenn ein Besucher darauf klickt.
Das JavaScript löscht bei „onFocus“ automatisch den Inhalt des Eingabefeldes
und fügt bei „onBlur“ den Inhalt, wenn nichts eingegeben wurde, wieder ein.

<input type="text" value="Demotext"
 onFocus="if(this.value=='Demotext'){this.value=''}"
 onBlur="if(this.value==''){this.value='Demotext'}">

In modernen Browsern geht das mittlerweile über das Attribut: Placeholder

<input type="text" placeholder="Demotext">

 

• Mit einem Klick markieren[IE|M|O]

<input type="text" size=82 value="
 Auch aus den Steinen, die einen in den Weg gelegt werden, kann man schönes bauen."
 onFocus="this.select();">

 

• Anzahl der HTML-Tags[IE|M|O]

Anzahl der HTML-Tags einer Webseite ausgeben.
Eingabe ohne HTML-Klammern < >

<input type=button value="Anzahl der HTML-Tags"
 onClick="var x = prompt('HTML-Tag?','br');
 alert('Auf dieser Seite befinden sich '+document.getElementsByTagName(x).length+' <'+x+'>-Tags.');">

 

• Eingabefeld automatisch fokussieren[IE|M|O]

Eingabe von Zeichen in ein Eingabefeld.
Sind z.B: 4 Zeichen eingegeben, so springt
der Fokus (focus()) automatisch zum nächsten Eingabefeld.

<script type="text/javascript">
// Eingabefeld fokussieren
function gehe_zu(x){
 if (x == "eins") {
  if (document.Form.eins.value.length == 4) {document.Form.zwei.focus()}
 }
 if (x == "zwei") {
  if (document.Form.zwei.value.length == 2) {document.Form.drei.focus()}
 }
 if (x == "drei") {
  if (document.Form.drei.value.length == 3) {document.Form.taste.focus()}
 }
}
</script>

<form name="Form">Code: 
<input type=text name="eins" size=4 maxlength=4 onKeyUp="gehe_zu('eins');"> - 
<input type=text name="zwei"  size=2 maxlength=2 onKeyUp="gehe_zu('zwei');"> - 
<input type=text name="drei" size=3 maxlength=3 onKeyUp="gehe_zu('drei');"> 
<input type=button name="taste" value="OK">
</form>

                      (4)          (2)        (3)
Beispiel: Code: - -

 

• Hintergrundfarbe ein- und ausschalten[IE|M|O]

Die Hintergrundfarbe über eine Checkbox verändern.

<form name="Form15">
Farbe ein/aus 
<input type=checkbox name="ok" onClick="
 if (document.Form15.ok.checked) {
  document.getElementById('Farbe').style.backgroundColor = '#FFFFCA';
 }
 else { 
  document.getElementById('Farbe').style.backgroundColor = '#FFFFFF';
 }">

<textarea rows="2" cols="25" id="Farbe"></textarea>
</form>

Beispiel: Farbe ein/aus Das ist ein Text um einen Test zu testen!

 

• PopUp Blocker Test[IE|M|O]

Dieses JavaScript öffnet ein neues Fenster.
Ist das nicht möglich, erfolgt keine Textausgabe!

<script type="text/javascript">
// PopUp Blocker Test
 var PoP = " ";
 var fenster = window.open("","f","width=1,height=1");
 if (fenster.closed != true) {
  PoP = "Der PopUp Blocker ist aus";
 }
 fenster.close();
 document.writeln(PoP);
</script>

 

• Zahlenwerte überprüfen und korrigieren[IE|M|O]

Hier werden Zahlenwerte direkt bei der Eingabe überprüft und gegebenenfalls korrigiert.
Diese Funktion zum überprüfen kann z.B. in einem Formular mehrmals aufgerufen werden,
man muß dazu nur die Werte bei onKeyUp ändern.

<script type="text/javascript">
// Zahlenwerte überprüfen und korrigieren
function Max(maximal,aktuell,Formname){
 if (aktuell > maximal) {
  document.Form17.elements[Formname].value = maximal;
  document.Form17.elements[Formname].select();
 }
}
</script>

<form name="Form17">
<input type=text name="Breite"size=3 class=eingabe
 onKeyUp="Max(1024,document.Form17.Breite.value,'Breite');">
</form>

Beispiel: (max. 1024)