9x bewertet

Button (nach Zeit erst aktiviert)

von Kisswu  |  23.05.2008 um 19:34 h
Javascript Anwendungen
Typ: Javascript Anwendungen
Stufe:Einfach
So nun zu meinem aller ersten Tutorial, ich hoffe ihr verstehts...ist ja im Prinzip auch nur ein Code Smilie


Was Du brauchst:
Eine Homepage, einen INPUT-Button


IHR LERNT: Wie ihr einen Button erst nach z.B. 20 Sekunden anklickbar machen könnt.

SO GEHTS:
Einige Sachen sind mit Kommentaren erklärt
<input id="Send" type="button" value="Abschicken" onclick="window.location.href='http://www.kisswu.de'"> //Hier kommt euer Input Button hin


<script type="text/javascript">

<!--
var Sekunden = 20; //Wie lange der Button deaktiviert sein soll
var Buttonbeschriftung = "Abschicken"; //was auf dem Button stehen soll

document.getElementById('Send').disabled = true;

for(i = 1; i <= Sekunden; i++) //i ist die Sekunde, solange bis sie so groß ist wie Sekunden
{
window.setTimeout("ButtonAktualisieren(" + i + ")", i*1000);
}

window.setTimeout("ButtonFreigeben()", Sekunden*1000);

function ButtonAktualisieren(VergangeneSekunden)
{
if(VergangeneSekunden == Sekunden)
{
document.getElementById('Send').value = Buttonbeschriftung; //Button ist anklickbar, die Buttonbeschriftung erscheint
}
else
{
Restsekunden = Sekunden-VergangeneSekunden;
document.getElementById('Send').value = Buttonbeschriftung + " (" + Restsekunden + ") "; //Button noch nicht anklickbar, Restsekunden werden zudem angezeigt
}
}


function ButtonFreigeben()
{
document.getElementById('Send').disabled = false;
}
//-->
</script>



TIPP: Für mehr Übersicht könnt ihr den <Script> Teil auch in den Head Bereich packen und den Input-Button dann dorthin wo er erscheinen soll.


Smilie Falls ihr noch Fragen, Kritik oder so habt, könnt ihr mir eine PN schreiben Smilie



8 Kommentare




Hm...alsu, muss der <script>-Teil nicht in den Head-Bereich Smilie
am 23.05.2008 um 19:40 Uhr


Kisswu

glaub nicht, also ich habs so eingefügt auf meiner seite zusammen und es funktioniert Smilie
am 23.05.2008 um 20:05 Uhr


yoah, also mir gefällt das tutorial, nur ich glaube, wenn man den <script>-Teil in den Head-bereich einfügt, ist es ein wenig übersichtlicher...ich würde immer das, was man nicht direkt sieht, in den Head-Bereich einfügen und der Code, der damit verbunden ist ( in diesem Fall Include) in den Body-Bereich...hoffe, du verstehst, was ich meine...
am 23.05.2008 um 20:09 Uhr


sry, ich meinte INPUT xD"
am 23.05.2008 um 20:09 Uhr


Kisswu

achso ja verstanden Smilie ich werds als kleinen Tipp dabei schreiben...danke <3
am 23.05.2008 um 20:13 Uhr


Fr34k

das ist toll!!! 6 sternchen^^ Smilie
am 23.05.2008 um 21:10 Uhr


Rawrdesign

finde ich auch super idee Smilie auch von mir 6 sternchen ..
am 24.05.2008 um 00:02 Uhr


Hibiskus

Interessant, darraus könnt man einen Adventskalender machen, wenn man sie Sekunden im Millionenbereich macht Q_Q
am 15.07.2008 um 17:07 Uhr