JavaScript Button
Javascript-Button kommen häufiger zur Anwendung, als man denkt. Der Vorteil dieser Button besteht darin, dass diese verhältnismäßig einfach srukturiert sind und meist identische Funktionen aufweisen.
Einige hier gezeigte Button zeigen keine Wirkung, da diese nur zur Erweiterung in kompletten Funktions-Skripten zur Anwendung kommen oder die Grundvoraussetzungen dazu nicht erfüllt sind.
Es sind nur Beispiel-Button, die auch teilweise in Kombination ausgeführt werden können oder sogar müssen.
Einige Funktionen können variieren oder ausgetauscht werden, führen aber die gleiche Funktion aus z. B. :

.js-button { font-family: tahoma, arial; font-size: 12px; font-weight: normal;background-color: #e1e1e1; border: 1px solid #000; border-radius: 5px;padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; }
Zurück:
onclick="history.back();">
----------------------------------------------------------------------
Vorwärts:
onclick="history.forward();">
Verlinkung:
'wsX5Obj/Obj_FILE/demo-popup.html','Titel PopUp','width=500,height=500,scrollbars'
);
var win=null;function NewWindow(mypage,myname,w,h,pos,infocus) {
if(pos=="random") {myleft=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;mytop=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;}if(pos=="center") {
myleft=(screen.width)?(screen.width-w)/2:100;
mytop=(screen.height)?(screen.height-h)/2:100;
}else if((pos!='center' && pos!="random") || pos==null) {
myleft=0;mytop=20;
}settings="width=" + w + ",height=" + h + ",top=" + mytop + ",left=" + myleft + ", scrollbars=yes, location=no, directories=no, status=no, menubar=no, toolbar=no, resizable=no";win=window.open(mypage,myname,settings);win.focus();
}
'wsX5Obj/Obj_FILE/demo-popup.html','popup','500','500','center','front'
Download:
Drucken:
document.getElementById('print').onclick = function() {
window.print();
}
function printPage() {
focus();if (window.print) {
jetztdrucken = confirm('Seite drucken ?');if (jetztdrucken) window.print();
}
}
Fenster öffnen:
document.getElementById('emptyWin').onclick = function() {
window.open('','');
}
document.getElementById('popupWin').onclick = function() {
var winURL = 'wsX5Obj/Obj_FILE/demo-popup.html';var winName = 'popupWin';var winSize = 'width=500, height=500, scrollbars=no';var ref = window.open(winURL, winName, winSize);
}
function Zoom(){
window.open("wsX5Obj/Obj_FILE/demo-zoom.html","fensterln", "width=100, height=100")
}
for(var i = 100; i < 500; i++)
self.resizeTo(i, 0)
for(var i= 100; i < 500; i++)
self.resizeTo(550, i)
var myWin = new Object;myWin.prop = "width=500, height=300, scrollbars=no";myWin.file = "wsX5Obj/Obj_FILE/demo-popup.html";document.getElementById('openWin').onclick = function () {
if (this.innerHTML == "Fenster öffnen/schließen") {
myWin.ref = window.open(myWin.file, "", myWin.prop);this.innerHTML = "Fenster schließen";
}else if (this.innerHTML == "Fenster schließen") {
// alert('Fenster geschlossen ' + myWin.ref); // ggf. Meldung ausgebenmyWin.ref.close();this.innerHTML = "Fenster öffnen/schließen";
}
}
Fenster schließen:
Wechsel-Button:


Ändert die Farbe beim Klick/DoppelKlick:
Ändert den Button-Text beim Klick:
onclick="document.images.change.src='wsX5Obj/Obj_IMG/car_02xs.jpg'">
onclick="document.images.change.src='wsX5Obj/Obj_IMG/car_01xs.jpg';">
onclick="if(document.getElementById('visit').style.visibility=='visible')
document.getElementById('visit').style.visibility='hidden';
<img src="wsX5Obj/Obj_IMG/car_03xs.jpg"><br>
display: block = Anzeige, display: none = Nichtanzeige -->
onClick="this.style.backgroundColor='#0000FF'"
onDblClick="this.style.backgroundColor='#FF0000'">
var a=1;function DKlick() {
if (a==1) {
document.Beschriftung.dblKlick.value="V I E L E N D A N K";a=0;return;
}if (a==0) {
document.Beschriftung.dblKlick.value="Klick MICH an";a=1;return;
}
}
<input type="button" class="js-button" value="Klick MICH an" name="dblKlick"
onClick="DKlick();">
Seite aktualisieren:
Senden/Absenden:
function OneSend() {
document.all["OSend"].value="Formular gesendet";document.all["OSend"].disabled="disabled";return true;
}
function OneKlick() {
document.all["OKlick"].outerHTML ='<input type="button" value="Erfolgreich gesendet" disabled>'
}
E-Mail Funktionen:
function checkemail() {
var str=document.validation.emailcheck.value;var filter=/^(\w+(?:\.\w+)*)@((?:\w+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;if (filter.test(str) ==true) {
alert("OK");
}else {
alert("Bitte eine gültige E-Mail-Adresse eingeben!")
}
}
E-Mail Adresse:<br><input type="text" value="" size="30" name="emailcheck"><input type="button" class="js-button"value="Adresse prüfen" onClick="checkemail()">
Ausgaben/Meldungen:
'Die Meldung: Hier ein Text nur zur Demonstration. Diese Funktion ist deshalb eingeschränkt.'
'\t Die Meldung: \n Hier ein Text, nur zur Demonstration. \n Diese Funktion ist deshalb eingeschränkt.'
'Hier könnte jetzt ein Text von Dir stehen, \n auch Mehrzeilig.'
function Geschenk() {
if (confirm("Bitte, schenkst Du mir Dein Auto?")==true) {
alert("Das finde ich ja echt toll.");
}else {
alert("War mir klar, Du bist gemein.");
}
}
Daten ermitteln:
Farbeingabe: #
function Check() {
alert("Die aktuelle Fenstergröße\n Breite: " +document.body.offsetWidth+" Höhe: "+document.body.offsetHeight + " Pixel")
}
function Source() {
if (window.location.protocol=="file:") {
document.dStat.anzeige.value="Lokal";
}if (window.location.protocol=="http:") {
document.dStat.anzeige.value="Extern";
}
}
<input type="button" class="js-button" value="Dokument Status" onClick="Source()"> =<input type="text" value="" name="anzeige" size="7">
function Status() {
if (navigator.onLine == true) {
document.bStat.anzeige.value="Online";
}else {
document.bStat.anzeige.value="Offline";
}
}
<input type="button" class="js-button" value="Browser Status" onClick="Status()"> =<input type="text" value="" name="anzeige" size="10">
function farbanzeiger(A, B) {
if (B.length == 6) {
document.getElementById(A).style.backgroundColor="#" + B;
}
}
Diverse Sample:
Wähle den Button:
Gedrückten Button markieren:
So blinkt der Text.
Fortschrittsbalken in 5 Stufen
(erweiterbar)
var nn=0, pause=100;function zaehler() {
document.count.Button.value=Math.floor(nn)+"%";nn++;if (nn <= 99) {
setTimeout("zaehler()",pause);
}else {
document.count.Button.value="...fertig (Start)";
nn=0;
}
}
<input type="button" class="js-button" value="Zähler Button" name="Button"
onclick="this.blur(); zaehler()">
function Test(Name) {
alert("Sie haben Button " + Name + " gedrückt");
}
function taste(A,B) {
var item = A.toString();if (document.getElementById(item).value == B) {
document.getElementById(item).value = A;
}else {
document.getElementById(item).value = B;
}
}
onClick="taste('Mann' , '» Mann');">
onClick="taste('Kind' , '» Kind «');">
onClick="taste('Frau' , 'Frau «');">
var aktiv = false;function blink() {
var h = "0" + Math.round (Math.random () * 15).toString (16);h = "0" + Math.round (Math.random () * 255).toString (16) + h.substring (h.length - 2);h = "0" + Math.round (Math.random () * 255).toString (16) + h.substring (h.length - 4);document.getElementById("bText").style.color= '#' + h.substring (h.length - 6);aktiv = window.setTimeout ("blink()", 600); // Blink-Geschwindigkeit
}function blinkStop() {
if (aktiv) {
window.clearTimeout(aktiv);
}
}
var progressBar = document.getElementById('bar');function updateProgress(newValue) {
progressBar.value = newValue;
}
onClick="updateProgress('1')">
onClick="updateProgress('2')">
onClick="updateProgress('3')">
onClick="updateProgress('4')">
onClick="updateProgress('5')">
.all { font-size:14px; font-weight:bold; text-align:center; }.rot { background-color:red; color:#000;}.yellow { background-color:yellow; color:#000;}
function farbwechselClass() {
var elementList = document.getElementsByClassName("all rot");for (var i = 0; i < elementList.length; i++) {
elementList[i].className = 'all yellow';
}
}
onClick="farbwechselClass();">
Image Button:
MouseOver Button:

Text Link Button:
Image Link Button:
zum Gästebuch
Zurück Button:
zurück
Alle Imagedateien können mit der rechten Maustaste (Grafik speichern unter...) herunter geladen werden!
<img src="wsX5Sys/btn_demo-p.gif" alt="X5 Demo-Image"
onmouseover="this.src='wsX5Sys/btn_demo-a.gif'"
onmouseout="this.src='wsX5Sys/btn_demo-p.gif'">
Newsletter anmelden
onClick="location='wsx5sys06.php'; return false;"><br>
onClick="history.back()"><br>
Keine Kommentare gefunden.
Bitte Dein Feedback
Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.
Login | Registrierung