JavaScript / Tipps / Bausteine 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 / Archiv

Senden Sie uns Ihren JavaScript-Baustein zu  
SiteMap - Alle 229 JavaScript Bausteine anzeigen

 

• Webseite autom. jede Minute neu laden [IE|M|O]

<script type="text/javascript">
// Webseite autom. jede Minute neu laden
function neu_laden() {
 Heute = new Date();
 if (Heute.getSeconds() == 0) {
  location.href="seite.htm"; // Aktueller Seitenname
 }
}
</script>

<body onLoad="setInterval('neu_laden()', 1000);">

 

• Bildgröße mit dem Mausrad ändern [IE|O]

<script type="text/javascript">
// Bildgröße mit dem Mausrad ändern
function Auswahlrad() { 
 var minus = false; var plus = 1;
 var nWert = parseInt(Form.a.value);
 if(isNaN(nWert)) {nWert = 1}
 if(event.wheelDelta < 1 && (minus || nWert > 1)) {nWert=nWert-plus}
 else if(event.wheelDelta >= 1) {nWert+=plus}
 Form.a.value=nWert;
  document.getElementById("bild").style.height=nWert;
 return false;
}
</script>

<form name="Form">
 <!-- Keine Bild-Größenangabe (width, height) hinzufügen! -->
 <img id="bild" src="color.gif" OnMouseWheel="return Auswahlrad();">
 <input type="hidden" name="a" value="145">   <!-- Hier die Höhe des Bildes angeben! -->
</form>

 

• Wörter in einer Zeichenkette zählen [IE|M|O]

<script type="text/javascript">
// Wörter in einer Zeichenkette zählen
var text = "hab viel probiert aber nix geht";

  var woerter = text.split(" ");
document.write(woerter.length);
// Ausgabe: 6
</script>
Wenn am Anfang oder Ende ein Leerzeichen ist: 
<script type="text/javascript">
// Wörter in einer Zeichenkette zählen
var text = " hab viel probiert aber nix geht ";

if (text.charAt(0) == " ") {
 text = text.slice(1,text.length);
}
if (text.charAt((text.length-1)) == " ") {
 text = text.slice(0,(text.length-1));
}

  var woerter = text.split(" ");
document.write(woerter.length);
// Ausgabe: 6
</script>

 

• Radiobutton mit Auswahl-Hinweis [IE|M|O]

1: <input TYPE="radio" NAME="radio" value="Ihre erste Nachricht" 
onClick="alert(value)">

2: <input TYPE="radio" NAME="radio" value="Ihre zweite Nachricht" 
onClick="alert(value)">
1: 2:

 

• Zufallsfarbe ausgeben [IE|M|O]

<script type="text/javascript">
// Zufallsfarbe ausgeben
function zufallsfarbe() {
 var Zufallsfarbe = "";
 for (var zaehler = 1; zaehler < 7; zaehler++) {
  var Farbe = "0123456789ABCDEF";
  var RND = Math.round(Math.random() * 15);
  Zufallsfarbe += Farbe.substr(RND, 1);
 }
 document.getElementById("wert").value = "#" + Zufallsfarbe;
 document.getElementById("farbe").style.backgroundColor = "#" + Zufallsfarbe;
}
</script>

<input type="text" id="wert" size="7" readonly> 
<span id="farbe">&nbsp; &nbsp; &nbsp; </span>&nbsp;
<input type="button" value="Zufallsfarbe anzeigen" onClick="zufallsfarbe();">
       

 

• Uhrzeit-Ausgabe einmal pro Minute [IE|M|O]

In diesem Script wird die Uhrzeit nur einmal pro Minute aktualisiert. 
<script type="text/javascript">
// Uhrzeit-Ausgabe einmal pro Minute
function uhrzeit(anzeige) {
 Heute = new Date();
 Sekunde = Heute.getSeconds();
 if (Heute.getSeconds() == 0 || anzeige == "jetzt") {
  Stunde  = Heute.getHours();
  Minute  = Heute.getMinutes();
  document.getElementById("uhr").innerHTML=Stunde+"."+Minute+" Uhr";
 }
}
</script>

 </head>
<body onLoad="uhrzeit('jetzt'); setInterval('uhrzeit()', 1000)">

<b id="uhr"></b>

 

• Überprüfen ob ein Formularfeld vorhanden ist [IE|M|O]

<script type="text/javascript">
//  Überprüfen ob ein Formularfeld vorhanden ist
if (document.Form.Name != null) {
 ... Anweisung ...
}
</script>

 

• Formular über JavaScript absenden [IE|M|O]

<script type="text/javascript">
//  Formular über JavaScript versenden
function senden() {
 document.Form.submit();
}
</script>

<form name="Form" action="">
Name: <input type="text" name="name">
<input type="button" value="senden" onClick="senden()">
</form>

 

• Geburtstag anzeigen [IE|M|O]

<script type="text/javascript">
// Geburtstag anzeigen
tag = 25 ; // Hier den Tag eintragen
monat = 9 ; // Hier den Monat eintragen

aktuell_datum = new Date();
aktuell_tag = aktuell_datum.getDate();
aktuell_monat = aktuell_datum.getMonth();

if (aktuell_tag == tag && (aktuell_monat+1) == monat) {
 alert(" Heute habe ich Geburtstag! ");
}
</script>

 

• Formularfelder farbig markieren [IE|M|O]

Dieses Script markiert alle Input-Tags in einem Formular farbig. 
<style type="text/css">
input.markiert {
  background-color: #FFFF82;
}
</style>

<script type="text/javascript">
// Formularfelder farbig markieren
function markieren() {
  var inputs = document.getElementsByTagName('INPUT');

  for (var zaehler = 0; zaehler < inputs.length; zaehler++) {
   inputs[zaehler].className = 'markiert';
  }
}
</script>

<button type="button" onclick="markieren();">Felder markieren</button>

 

• Checkboxen mit gleichem Namen überprüfen [IE|M|O]

Checkbox-Auswahl senden und mit PHP die Auswahl anzeigen 
<script type="text/javascript">
// Checkboxen mit gleichem Namen überprüfen
  function check_auswahl() {
   var check = 0;
   for (var zaehler = 0; zaehler < (document.getElementsByName("id[]").length); zaehler++) {
    if (document.getElementsByName("id[]")[zaehler].checked) {
     check++;
    }
   }
   document.getElementById("status").innerHTML = check;
  }
</script>

<form action="demo.php" method="post">
 <input type="checkbox" name="id[]" value="Pizza" onClick="check_auswahl();"> Pizza <br>
 <input type="checkbox" name="id[]" value="Chips" onClick="check_auswahl();"> Chips <br>
 <input type="checkbox" name="id[]" value="Cola" onClick="check_auswahl();"> Cola <br>
 Ausgewählt: <span id="status">0</span> <br><br>
 <input type="submit" value="Auswahl anzeigen">
</form>

<?php
// Datei: demo.php
if (isset($_POST["id"])) {
 echo "Auswahl: <br>";
 foreach ($_POST["id"] as $element) {
  echo $element . "<br>";
 }
}
else {
 echo "Es wurde nichts ausgewählt!";
}
?>
Pizza
Chips
Cola
Ausgewählt: 0

 

• Formular mit Button Zurücksetzen und Funktion aufrufen[IE|M|O]

Bei einem Reset-Button wird der Event-Handler 'onClick' nicht ausgeführt. 
<input type="reset" value="Zurücksetzen" onClick="funktionsaufruf();">
Es bietet sich eine einfache Lösung an: 
<input type="button" value="Zurücksetzen" onClick="reset(); funktionsaufruf();">

 

• Iframe alle 10 Sekunden neu laden [IE|M|O]

Um den Inhalt eines IFrame-Fensters immer Aktuell zu halten
können Sie dieses JavaScript verwenden.
<script type="text/javascript">
// Iframe alle 10 Sekunden neu laden

function neu_laden() {
 var Heute = new Date();
 if (Heute.getSeconds() == 0 ||
    Heute.getSeconds() == 10 ||
    Heute.getSeconds() == 20 ||
    Heute.getSeconds() == 30 ||
    Heute.getSeconds() == 40 ||
    Heute.getSeconds() == 50) {
  parent.fenster.location.href="aktuell.htm";
 }
}
window.setInterval('neu_laden()', 1000);
</script>
...
<iframe name="fenster" src="aktuell.htm" width="200" height="300"></iframe>

 

• Formularfelder dynamisch hinzufügen [IE|M|O]

<script type="text/JavaScript">
// Formularfelder dynamisch hinzufügen

var feld = 1;
var feldm = 1;

function feld_plus() {
 if (feld <= 10) {
  var inhalt = "Feld " + feld;
  document.getElementById('dynamic_input').innerHTML +=
  "<input type='text' name='n_" + feld + "' value='" + inhalt + "'><br>";
  feld++;
 }
}

function feld_minus() {
 if (feld > feldm) {
 feld--;
  document.getElementById('dynamic_input').innerHTML = "";
  for (var zaehler = feldm; zaehler < feld; zaehler++) {
    var inhalt = "Feld " + zaehler;
    document.getElementById('dynamic_input').innerHTML +=
     "<input type='text' name='n_" + zaehler + "' value='" +
      inhalt + "'><br>";
  }
 }
}
</script>

Felder hinzufügen <input type="button" value="-" onClick="feld_minus();">
<input type="button" value="+" onClick="feld_plus();"> <br><br>

<div id="dynamic_input"></div>
Beispiel:   Felder hinzufügen


Mit PHP kann man den Feldinhalt dann so auswerten:
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
 for ($zaehler = 1; $zaehler <= 10; $zaehler++) {
  if (isset($_POST["n_" . $zaehler])) {
   echo $_POST["n_" . $zaehler];
  }
 }
}
?>

 

JavaScript Bausteine 10   [11]   JavaScript Bausteine 12

 

© 2000-2012 Homepage-Total.de         Kontakt — Impressum — Banner