webForumDet fria alternativet

Nedräkningsskript

JavaScript

9 svar · 946 visningar · startad av Mycodez

Medlem sedan feb. 2010445 inlägg
Frågan#1

Tjena, jag sitter och klurar lite på ett script. Jag är rätt ny på detta med javascript.

Scriptet jag skapat är ett nedräkningskript som går ut att man ska skicka in ett datum sedan ska man se hur långt det är kvar tills det datumet är uppfyllt.

just nu så kan jag bara få till så att man kan bara ange ett fast datum och inte så man kan ange ett eget datum. Vilket jag inte får till hur jag ska göra.

<div class="panel-body">
Days Remaining:
<div id="daysBox"></div>
Hours Remaining:
<div id="hoursBox"></div>
Minutes Remaining:
<div id="minsBox"></div>
Seconds Remaining:
<div id="secsBox"></div>
</div>
<script>
function cdtd(date) {
	//var xmas = new Date("December 25, 2013 00:01:00");
	var xmas = new Date(date);
	var now = new Date();
	var timeDiff = xmas.getTime() - now.getTime();
	if (timeDiff <= 0) {
		clearTimeout(timer);
		document.write("Christmas is here!");
		// Run any code needed for countdown completion here
	}
	var seconds = Math.floor(timeDiff / 1000);
	var minutes = Math.floor(seconds / 60);
	var hours = Math.floor(minutes / 60);
	var days = Math.floor(hours / 24);
	hours %= 24;
	minutes %= 60;
	seconds %= 60;
	document.getElementById("daysBox").innerHTML = days;
	document.getElementById("hoursBox").innerHTML = hours;
	document.getElementById("minsBox").innerHTML = minutes;
	document.getElementById("secsBox").innerHTML = seconds;
	var timer = setTimeout('cdtd()',1000);
}
</script>
<script type="text/javascript">cdtd();</script>

hur ska jag kunna göra så jag kan ange ett eget datum med en egen tid? eller ge mig en hint så jag kan lära mig lite samtidigt. men jag vill ha förklaring på hur det funkar :)

Tack på förhand :)

/Robin

Medlem sedan juni 20019 519 inlägg
#2
	var xmas = new Date(date);
	var now = new Date();

är ju de två datum du jämför och du har ju exemplet på julafton på hur "date" argumentet skall se ut, nu är den null som du skickar in (<script type="text/javascript">cdtd();</script>)

och:

var timer = setTimeout('cdtd()',1000);

bör se ut:

var timer = setTimeout(cdtd,1000);

men eftersom du vill ha argument in så få du skriva:

var timer = setTimeout(function() { cdtd(date) },1000);
Medlem sedan feb. 2010445 inlägg
#3

oj det skulle inte med jag som satt och klura lite på egen hand^^ så den ut kommenterade raden ska vara aktiv och den under skulle var kommenterad
var xmas = new Date("December 25, 2013 00:01:00");
//var xmas = new Date(date);

för skickar jag in datumet i funktionsanropet, så fungerar bara scriptet bara en sekund sen dör det :/ vet inte varför :/

Medlem sedan juni 20019 519 inlägg
#4

voigtann1 skrev:

och:

var timer = setTimeout('cdtd()',1000);

bör se ut:

var timer = setTimeout(cdtd,1000);

men eftersom du vill ha argument in så få du skriva:

var timer = setTimeout(function() { cdtd(date) },1000);

redigerade in lite mer info där ;)

Medlem sedan feb. 2010445 inlägg
#5

Jaha okej men vad för detta var timer = setTimeout(function() { cdtd(date) },1000); jämfört med var timer = setTimeout(cdtd(date),1000); ? Lite nyfiken :)

hehe såg det;)

Medlem sedan feb. 2010445 inlägg
#6

en en grej måste man skicka in datumet så här: "December 25, 2013 00:01:00" kan man inte skicka in datumen så här? 2013-12-24 00:01:00 ? :)

Medlem sedan juni 20019 519 inlägg
#7

new Date måste du köra med: http://devdocs.io/javascript/global_objects/date

Skillnaden med:

timer = setTimeout(function() {
	cdtd(date);
}, 1000);

och:

var timer = setTimeout(cdtd(date),1000);

är att varje funktion körs så fort du skriver (), vilket du inte vill, du vill att cdtd skall köras efter en sekund eller "ca" 1000ms

Så man skapar en anonym funktion som körs efter 1000ms som kör cdtd funktionen.

timeout "skall" kunna ha argument men det är någon äldre webbläsare som inte ha stöd för det så detta är det säkrare kortet att köra.

Medlem sedan feb. 2010445 inlägg
#8

Okej :) då förstår jag ^^ Bättre att fråga nu när man försöker lära sig javascript :)

Medlem sedan juni 20019 519 inlägg
#9

kan rekommendera http://devdocs.io (som inlägget ovan) tycker det är sjukt skönt att ha ett enkelt sätt att leta upp saker som man vill läsa på lite extra ;)

Medlem sedan feb. 2010445 inlägg
#10

Ja det håller jag med om :) den var mycket intressant ;)

260 ms totalt · 4 externa anrop · v20260731065814-full.6fe65c25
126 ms — deklarationer (db)
0 ms — hämta statistik (cache)
130 ms — hämta tråd, inlägg och bilagor (db)
123 ms — ändringar (db)