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

 

• Rechner [IE|M|O]




<FORM NAME=Calc><br>
<TABLE BORDER bgcolor=black cellpadding=3 cellspacing=0 align=center><TR><TD>
<INPUT TYPE=text NAME=Input Size=15></TD></TR>
<TR><TD align=center>
<INPUT TYPE=button VALUE=" 1" OnClick="Calc.Input.value += '1'">
<INPUT TYPE=button VALUE=" 2" OnCLick="Calc.Input.value += '2'">
<INPUT TYPE=button VALUE=" 3" OnClick="Calc.Input.value += '3'">
<INPUT TYPE=button VALUE=" +" OnClick="Calc.Input.value += '+'">
<INPUT TYPE=button VALUE=" C" OnClick="Calc.Input.value = ''"><br>
<INPUT TYPE=button VALUE=" 4" OnClick="Calc.Input.value += '4'">
<INPUT TYPE=button VALUE=" 5" OnCLick="Calc.Input.value += '5'">
<INPUT TYPE=button VALUE=" 6" OnClick="Calc.Input.value += '6'">
<INPUT TYPE=button VALUE=" -" OnClick="Calc.Input.value += '-'">
<INPUT TYPE=button VALUE=" (" OnClick="Calc.Input.value += '('"><br>
<INPUT TYPE=button VALUE=" 7" OnClick="Calc.Input.value += '7'">
<INPUT TYPE=button VALUE=" 8" OnCLick="Calc.Input.value += '8'">
<INPUT TYPE=button VALUE=" 9" OnClick="Calc.Input.value += '9'">
<INPUT TYPE=button VALUE=" x" OnClick="Calc.Input.value += '*'">
<INPUT TYPE=button VALUE=" )" OnClick="Calc.Input.value += ')'"><br>
<INPUT TYPE=button VALUE=" C" OnClick="Calc.Input.value = ''">
<INPUT TYPE=button VALUE=" 0" OnClick="Calc.Input.value += '0'">
<INPUT TYPE=button VALUE=" ." OnClick="Calc.Input.value += '.'">
<INPUT TYPE=button VALUE=" /" OnClick="Calc.Input.value += '/'">
<INPUT TYPE=button VALUE=" =" OnClick="Calc.Input.value = eval(Calc.Input.value)">
</TD></TR></TABLE></FORM>
zur Formatierung der Buttons wird noch folgender CSS-Code benötigt: 
<style type="text/css">
  INPUT{color: Black; font-size: 9pt; font-family: courier new,helvetica}
</style>

 

• Minirechner [IE|M|O]

Eingabe z.B.: 5874 - 2568  
<form>
<input size=25 name="Eingabe">
<input type=button value="Berechnen" onClick="alert(eval(this.form.Eingabe.value))">
</form>

 

• Celsius / Fahrenheit Rechner [IE|M|O]

Geben Sie eine Zahl ein und drücken Sie auf "Los".
°C   °F  * 
<script type="text/javascript">
// Celsius Fahrenheit Rechner
function celtofar (form)
{
 var temperatur = document.formx.f[0].checked ? 1 : 0 || document.formx.f[1].checked ? 2 : 0;
 if (temperatur == 1)  {form.celsius.value = form.celsius.value +
 "°C = " + Math.round(form.celsius.value*1.8+32) + "°F" };
 if (temperatur == 2) { form.celsius.value = form.celsius.value +
 "°F = " + Math.round((form.celsius.value-32)/1.8) + "°C" };
}
</script>

<form name=formx>
 <TABLE BORDER cellpadding=3 cellspacing=0 align=center style="background-color:menu"><TR><TD>
  <input type="radio" name="f" checked>°C   
  <input type="radio" name="f">°F
  <input type ="text" name="celsius"> 
  <input type ="button" value=" Los " onclick="celtofar(this.form)"> * 
  <input type ="reset" value=" Reset ">
 </TD></TR></TABLE>
</form>

 

• Uhrzeit [IE|M|O]

<script type="text/javascript">
function Uhrzeit() {
 var Heute = new Date();
 var Stunde  = Heute.getHours();
 var Minute  = Heute.getMinutes();
 var Sekunde = Heute.getSeconds();
 document.zeit.uhr.value= Stunde + ":" + Minute + ":" + Sekunde;
 window.setTimeout('Uhrzeit()',1000);
}
</script>

<body onLoad="window.setTimeout('Uhrzeit()',1000)">

<form name="zeit">
 <input type=text name="uhr" size=9>
</form>

 

• Datum [IE|M|O]


Ohne Button können Sie auch das Datum Anzeigen lassen (Wie beim Beispiel mit der Uhrzeit): 
<body onLoad="Datum();">
<script type="text/javascript">
function Datum() {
 var Heute = new Date();
 var Tag   = Heute.getDate();
 var Monat = Heute.getMonth()+1;
 var Jahr  = Heute.getFullYear();
 document.date.datum.value= Tag + "." + Monat + "." + Jahr;
}
</script>

<body>

<form name="date">
 <input type=text name="datum" size=10>
 <input type=button value="Zeige Datum" onClick="Datum()">
</form>

 

• Browser Online/Offline Status [IE|M|O]

Testet ob der Browser im Online- oder Offlinebetrieb ist.
= 
<script type="text/javascript">
// Browser Online/Offline Status
function Status() {
 if (navigator.onLine == true) {
  document.formel3.anzeige.value="Online";
 }
 else {
  document.formel3.anzeige.value="Offline";
 }
}
</script>

<form name="formel3">
 <input type=button value="Browser Status" onClick="Status()"> = 
 <input type=text value="" name="anzeige" size=10>
</form>

 

• Dokument Status [IE|M|O]

Testet wo diese Datei gespeichert ist.   Lokal = PC,  Extern = Server (Internet)
= 
<script type="text/javascript">
// Dokument Status
function Source() {
 if (window.location.protocol=="file:") {
  document.formel4.anzeige.value="Lokal";
 }
 if (window.location.protocol=="http:") {
  document.formel4.anzeige.value="Extern";
 }
}
</script>

<form name="formel4">
 <input type=button value="Dokument Status" onClick="Source()"> = 
 <input type=text value="" name="anzeige" size=7>
</form>
...Daraus lässt sich auch ein Hyperlink mit Seitenwechsel konstruieren: 
<a href="JavaScript:if (window.location.protocol=='file:'){location.href='offline.htm'}   .....
else if (window.location.protocol=='http:'){location.href='online.htm'}">Home</a>

 

• Tasteneingaben Zählen [IE|M|O]

Bei manchen Formularen ist es wichtig die Textlänge zu begrenzen.
Sie haben noch: Zeichen
<script type="text/javascript">
// Tasteneingaben Zählen
function CheckLen(Target) {
 var StrLen = Target.value.length
 if (StrLen == 1 && Target.value.substring(0,1) == " ") {
  Target.value = ""; StrLen = 0;
 }

 if (StrLen > 130 ) {
  Target.value = Target.value.substring(0,130);
   var CharsLeft = 0;
 }
 else {
  var CharsLeft = 130 - StrLen;
 }
 document.Form.Anzahl.value = CharsLeft;
}
</script>

<Form name="Form">
 Sie haben noch: 
 <input type="text" name="Anzahl" size="3" maxlength="3" readonly>
 Zeichen<br>
 <textarea rows="5" 
  cols="35" onChange="CheckLen(this)" 
  onFocus="CheckLen(this)" onKeyDown="CheckLen(this)" 
  onKeyUp="CheckLen(this)" >
 </textarea>
</form>

 

• Klick mich [IE|O]

Beim Klicken des Buttons verschiebt er sich jeweils einen
halben Zentimeter nach unten und nach rechts.

 

<script type="text/javascript">
// Klick mich
function Klickmich() {
   Button.style.posLeft+=0.5;
   Button.style.posTop+=0.5;
}
</script>

<input type=button 
 ID="Button" value="Klick mich!"  
 style="position: absolute; top: 1cm; left: 1cm;"
 onclick="Klickmich()">

 

• Sekundenzähler [IE|M|O]

Das Script schreibt jede Sekunde eine Zahl in das Textfeld.
1 Sekunde: window.setTimeout('Timer()',1000) // Pause
1/10 Sekunde: window.setTimeout('Timer()',100) // Pause
1/100 Sekunde: window.setTimeout('Timer()',10) // Pause 
<script type="text/javascript">
// Sekundenzähler
var s = 0;
function Timer() {
 document.formel7.time.value=s;
 s++;
 window.setTimeout('Timer()',1000) // Pause
}
</script>

<body onLoad="Timer()">
<form name="formel7">
 <input type=text size=6 name="time">
</form>

 

• Mit Klick markieren [IE|M|O]

Mit einem Klick können sie den Text im Textfeld markieren. 
<form>
 <textarea name="Feld2" rows=2 cols=50 onClick="this.form.Feld2.select();this.form.Feld2.focus()">
  Mit einem Klick können sie diesen Text markieren.
 </textarea>
</form>

 

• Meldung mit Format [IE|M|O]

Formatiert wird die Ausgabe(der Text) mit:  \t = Tabulator;  \r = Return (oder \n) 
<input type=button value="Meldung ohne Format" 
 onClick="alert('Die Meldung: Dieser Text dient nur zur Demonstration. Seine Funktion ist beschränkt')">

 <input type=button value="Meldung mit Format" 
onClick="alert(' \t Die Meldung: \n Dieser Text dient nur zum Demo. \n Seine Funktion ist beschränkt')">
  * 

 

• Wertübergabe in Javascript [IE|M|O]

<script type="text/javascript">
// Wertübergabe in Javascript
function Test(Name) {
 alert("Sie haben Button " + Name + " gedrückt");
}
</script>

<input type=button value="Button 1" onClick="Test('EINS')">

<input type=button value="Button 2" onClick="Test('ZWEI')">
*

 

• Eingabefeld fokusieren [IE|M|O]

Beim Laden der Seite wird das Eingabefeld fokussiert. 
<body onLoad="document.Feld.Eingabe.focus()">

<form name="Feld">
 <input type="text" name="Eingabe">
</form>

 

• Autom. Eingabe-Check [IE|M|O]

Der eingegebene Wert wird direkt nach dem Tastendruck überprüft.
Liegt der eingegebene Wert in diesem Beispiel unter 101, wird er akzeptiert.
Ist der Wert über 100 wird die Eingabe korrigiert. 
<script type="text/javascript">
// Autom. Eingabe-Check
function Check() { 
 if (document.Formel.Eingabe.value >= 101) {
  document.Formel.Eingabe.value = 100;
 }
}
</script>

<form name="Formel">
 <input type="text" name="Eingabe" onKeyup="Check()">
</form>
Beispiel:

 

• Button mit Doppelklick [IE|M|O]

<input type=button value="Doppelklick" onDblClick="alert('Das war ein Doppelklick')">
Beispiel:

 

• Auswahl überprüfen [[IE|M|O]

<script type="text/javascript">
// Auswahl überprüfen
 function Test() {

 var AA =""
 if (document.Formel2.Auswahl.selectedIndex == -1) {
  AA = "nichts";
 }
 else {
  AA = document.Formel2.Auswahl.options[document.Formel2.Auswahl.selectedIndex].value;
 }
 alert("Sie haben " + AA + " ausgewählt.");
 }
</script>

<form name="Formel2">
 <select name="Auswahl" size=3>
  <option value="Salz"> Salz
  <option value="Mehl"> Mehl
  <option value="Zucker"> Zucker
 </select>

<input type=button value="Meine Auswahl" onClick="Test()">
</form>

 

• Button Zähler [IE|M|O]

<script type="text/javascript">
// Button Zähler
var nn=0, pause=100;
function zaehler() {
 document.formel.Button.value=Math.floor(nn)+"%";
 nn++;
 if  (nn <= 99) {
  setTimeout("zaehler()",pause);
 }
 else{
  document.formel.Button.value="...fertig (Start)";
  nn=0;
 }
}
</script>

<form name="formel">
 <input type=button value="Start" name="Button"
 onclick="this.blur(); zaehler()"
 style="width:140px; text-align:center">
</form>

 

• Checkbox und Radiobuttons mittels JS überprüfen [IE|M|O]

<script type="text/javascript">
// Checkbox und Radiobuttons mittels JS überprüfen

function test() {
 if (document.formel.a.checked == true) {
  alert('Checkbox ausgewählt');
 }
 if (document.formel.b[0].checked == true) {
  alert('Radiobutton 1 ausgewählt');
 }
 if (document.formel.b[1].checked == true) {
  alert('Radiobutton 2 ausgewählt');
 }
}
</script>

<form name="formel">
 <input type=checkbox name=a><br>

1<input type=radio name=b><br>
2<input type=radio name=b><br>

<input type=button value="Test"
 onClick="test()">
</form>
Beispiel:

1
2

 

• Mit JavaScript Text Umwandeln [IE|M|O]

Text in Großbuchstaben oder Kleinbuchstaben Umwandeln. 
<script type="text/javascript">
// Mit JavaScript Text Umwandeln
function Kleinbuchstaben() {
 var a = document.gG.Big.value;
 a = a.toLowerCase();
 document.gG.Big.value = a;
}

function Großbuchstaben() {
 var a = document.gG.Big.value;
 a = a.toUpperCase();
 document.gG.Big.value = a;
}
</script>

<form name="gG">
 <input type=text name="Big" size=35 value="I lOvE tO pLaY wItH mY sHiFtKeY"><br>
 <input type=button value="Großbuchstaben" onClick="Großbuchstaben()"> 
  <input type=reset value="Reset">
 <input type=button value="Kleinbuchstaben" onClick="Kleinbuchstaben()">
</form>

 

JavaScript Bausteine 2   [3]   JavaScript Bausteine 4

 

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