Gå til innhold

[Løst] Lage script som teller ned (countdown)

corsa91

Anbefalte innlegg

corsa91

corsa91

Skrevet
Skrevet (endret)

Jeg har en kode som jeg vil sette inn en nedtellingsfunksjon som teller ned til den aktuelle fristen. Den må altså kunne hente og regne ut hvor lenge det er til den fristen går ut.

 

Jeg har sett litt på den:

http://www.dynamicdrive.com/dynamicindex6/universalcountdown.htm

 

Men har litt med å forstå hvordan jeg skal hente ut fra databasen.

 

Jeg har heller ikke hatt noe om Javascript

 

 

<!DOCTYPE html>

<head></head>

<body>

<table border="1">

<tr><td>FristID</td><td>Fagkode</td><td>Fagnavn</td><td>Tittel</td><td>Tid</td><td>Dato</td><td>Gjennstående tid</td></tr>

 

<?php
//lister frister
include 'include/db_connect.php';
$sql= "SELECT FristID, frister.KursID, Kursnavn, Tittel, DATE_FORMAT(`Dato`,'%d.%m.%Y') `Dato`, DATE_FORMAT(`Tid`,'%k:%i') `Tid`
FROM frister INNER JOIN kurs ON frister.KursID = kurs.KursID ORDER BY `Dato`" ;
$resultat=mysql_query($sql);
while ($rad=mysql_fetch_assoc($resultat)) {
  echo '<tr><td>' . $rad['FristID'] .
'</td><td>' . $rad['KursID'] .
'</td><td>' . $rad['Kursnavn'] .
'</td><td>' . $rad['Tittel'] .
'</td><td>' . $rad['Tid'] .
'</td><td>' . $rad['Dato'] .
'</td><td>' . $rad['Dato'] .
'</td></tr>';
}
?>
</table>
</body>
</html>

Endret av Hårek
Lagt tilbake slettet innlegg
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
burger1

burger1

Skrevet
Skrevet (endret)

Er det i PHP du ønsker dette? Eller er det i Javascript du ønsker?

Ser du poster PHP kode, men lagt tråden i Design, html, css og javascript. :)

 

Antar du sikkert vil ha de i Javascript ettersom det var det eksempelet du la ved.

http://stackoverflow...tdown-to-a-date

Ett enkelt søk på google hadde gitt deg et godt svar fra StackOverflow. :)

 

Dette kan du gjøre med javascript, uten php og database.

Han ønsker vel å knytte dette opp mot frister for kurs eller noe sånt, så han ønsker egentlig en nedtelling for hvert kurs i en liste.

 

Hvis du benytter deg av den funksjonen som var på det Stackoverflow tråden kan du legge alle dato fristene i en liste som du legger inn som javascript calls etterpå att tabellen er hentet, evnt. legger inn disse fortløpende.

Endret av burger1
Lenke til kommentar
corsa91

corsa91

Skrevet
  • Forfatter
Skrevet (endret)

Det jeg ønsker er Javascript inni PHP biten.

 

 

while ($rad=mysql_fetch_assoc($resultat)) {
  echo '<tr><td>' . $rad['FristID'] .
'</td><td>' . $rad['KursID'] .
'</td><td>' . $rad['Kursnavn'] .
'</td><td>' . $rad['Tittel'] .
'</td><td>' . $rad['Tid'] .
'</td><td>' . $rad['Dato'] .
'</td><td>' . $rad['Dato'] .
'</td></tr>';

'</td><td>' . $rad['Dato'] . skal erstattes med timer og antall dager.

Endret av Hårek
Lenke til kommentar
burger1

burger1

Skrevet
Skrevet

Ja, men spørsmålet er, ønsker du en javascript nedtelling?

I såfall, hadde du sett på den siden jeg gav så hadde du fått en enkel implementeringsfunksjon for dette!

 

Da kunne du bare skrevet

'<td><label id="countdown_row_[id]"></label><script>CountDownTimer(' . $rad['Dato'] . ', 'countdown_row_[id]');</script></td>'

 

Ikke feilsjekket setningen!

Lenke til kommentar
corsa91

corsa91

Skrevet
  • Forfatter
Skrevet (endret)

Ja jeg ønsker Javascript nedtelling.

 

Jeg skjønner veldig lite av det siden jeg ikke har hatt 2 timer med Javascript. Spurte PHP-læreren angående den oppgaven og han sa bruk Google.

 

Har sett litt på den koden men også der så går de uten database.

 

Kort om databasen

Den må jo hente datoene og tiden fra databasen. I databasen ligger flere rader med navn, tid og dato. Det den skal gjøre er å vise navn, tid, dato og i tillegg vise gjenstående dager og tid.

Endret av corsa91
Lenke til kommentar
torbjørn marø

torbjørn marø

Skrevet
Skrevet

Del problemet ditt opp i to:

  1. Lag en fungerende JavaScript-basert countdown. Som du selv har sett finner du mange eksempler via Google.
  2. Finn ut hvordan du får hentet ut datoen du skal sende inn til JavaScriptet, og hvordan det skal legges inn. Her trenger du kode på serversiden (om ikke datoene allerede eksponeres av en webservice eller noe annet som JavaScript har tilgang til). Og her gir egentlig koden du postet deg alt du trenger..

Hvis du ikke fullstendig har forstått forskjellen mellom client side og server side - og hva som må plasseres hvor - så må du sette deg inn i dette.

Lenke til kommentar
corsa91

corsa91

Skrevet
  • Forfatter
Skrevet

1. Her er den jeg har valgt: http://www.dynamicdrive.com/dynamicindex6/universalcountdown.htm

 

2. Den ligger også her.

 

Jeg forstår forskjellen mellom server og client side. Men det jeg ikke skjønner er hvordan jeg skal sette Current Local time og hvordan jeg skal få Target Time til å hente ut fra databasen

 

 

 

Del problemet ditt opp i to:

  1. Lag en fungerende JavaScript-basert countdown. Som du selv har sett finner du mange eksempler via Google.
  2. Finn ut hvordan du får hentet ut datoen du skal sende inn til JavaScriptet, og hvordan det skal legges inn. Her trenger du kode på serversiden (om ikke datoene allerede eksponeres av en webservice eller noe annet som JavaScript har tilgang til). Og her gir egentlig koden du postet deg alt du trenger..

Hvis du ikke fullstendig har forstått forskjellen mellom client side og server side - og hva som må plasseres hvor - så må du sette deg inn i dette.

Lenke til kommentar
burger1

burger1

Skrevet
Skrevet (endret)

Om du ikke forsto svaret jeg gav deg må du vurdere å sette deg ned i noen flere timer og faktisk forstå hvordan du kan løse dette.

 

/Scripts/CountDown.js

function CountDownTimer(dt, id)
{
	var end = new Date(dt);
	var _second = 1000;
	var _minute = _second * 60;
	var _hour = _minute * 60;
	var _day = _hour * 24;
	var timer;
	function showRemaining() {
		var now = new Date();
		var distance = end - now;
		if (distance < 0) {
			clearInterval(timer);
			document.getElementById(id).innerHTML = 'EXPIRED!';
			return;
		}
		var days = Math.floor(distance / _day);
		var hours = Math.floor((distance % _day) / _hour);
		var minutes = Math.floor((distance % _hour) / _minute);
		var seconds = Math.floor((distance % _minute) / _second);
		document.getElementById(id).innerHTML = days + 'days ';
		document.getElementById(id).innerHTML += hours + 'hrs ';
		document.getElementById(id).innerHTML += minutes + 'mins ';
		document.getElementById(id).innerHTML += seconds + 'secs';
	}
	timer = setInterval(showRemaining, 1000);
}

 

i linjen hvor du skal presentere nedtellinga trenger du 2 ting, en ID tag og en call til funksjonen.

Derav

<label id=UNIK_ID_TIL_RADKOL></label>

Funksjonen hentes opp ved

<script>CountDownTimer(DATO FRA DATABASE!, UNIK_ID_TIL_RADKOL);</script>

 

Viktig i HEAD seksjonen at du legger inn

<script type="text/javascript" src="/Scripts/CountDown.js"></script>

 

Ganske så stavet for deg :)

Endret av burger1
Lenke til kommentar
corsa91

corsa91

Skrevet
  • Forfatter
Skrevet

Tusen takk jeg har fått lagt inn det meste men det er to ting jeg er usikker på.

 

<label id=UNIK_ID_TIL_RADKOL></label>

Funksjonen hentes opp ved

   <script>CountDownTimer(DATO FRA DATABASE!, UNIK_ID_TIL_RADKOL);</script>

 

Men jeg tror jeg skjønner 

<label id=UNIK_ID_TIL_RADKOL></label>

Den skal inn på den åpne linjen. Hvordan skal jeg sette den inni tabellen ?

 

'</td><td>' . $rad['KursID'] .
'</td><td>' . $rad['Kursnavn'] .
'</td><td>' . $rad['Tittel'] . 
'</td><td>' . $rad['Tid'] .
'</td><td>' . $rad['Dato'] .

'</td></tr>';

 

Om du ikke forsto svaret jeg gav deg må du vurdere å sette deg ned i noen flere timer og faktisk forstå hvordan du kan løse dette.

 

/Scripts/CountDown.js

function CountDownTimer(dt, id)
{
	var end = new Date(dt);
	var _second = 1000;
	var _minute = _second * 60;
	var _hour = _minute * 60;
	var _day = _hour * 24;
	var timer;
	function showRemaining() {
		var now = new Date();
		var distance = end - now;
		if (distance < 0) {
			clearInterval(timer);
			document.getElementById(id).innerHTML = 'EXPIRED!';
			return;
		}
		var days = Math.floor(distance / _day);
		var hours = Math.floor((distance % _day) / _hour);
		var minutes = Math.floor((distance % _hour) / _minute);
		var seconds = Math.floor((distance % _minute) / _second);
		document.getElementById(id).innerHTML = days + 'days ';
		document.getElementById(id).innerHTML += hours + 'hrs ';
		document.getElementById(id).innerHTML += minutes + 'mins ';
		document.getElementById(id).innerHTML += seconds + 'secs';
	}
	timer = setInterval(showRemaining, 1000);
}

 

i linjen hvor du skal presentere nedtellinga trenger du 2 ting, en ID tag og en call til funksjonen.

Derav

<label id=UNIK_ID_TIL_RADKOL></label>

Funksjonen hentes opp ved

<script>CountDownTimer(DATO FRA DATABASE!, UNIK_ID_TIL_RADKOL);</script>

 

Viktig i HEAD seksjonen at du legger inn

<script type="text/javascript" src="/Scripts/CountDown.js"></script>

 

Ganske så stavet for deg :)

Lenke til kommentar
burger1

burger1

Skrevet
Skrevet

Tusen takk jeg har fått lagt inn det meste men det er to ting jeg er usikker på.

 

<label id=UNIK_ID_TIL_RADKOL></label>

Funksjonen hentes opp ved

<script>CountDownTimer(DATO FRA DATABASE!, UNIK_ID_TIL_RADKOL);</script>

 

Men jeg tror jeg skjønner

<label id=UNIK_ID_TIL_RADKOL></label>

Den skal inn på den åpne linjen. Hvordan skal jeg sette den inni tabellen ?

 

'</td><td>' . $rad['KursID'] .
'</td><td>' . $rad['Kursnavn'] .
'</td><td>' . $rad['Tittel'] .
'</td><td>' . $rad['Tid'] .
'</td><td>' . $rad['Dato'] .
'</td></tr>';

 

En ferdig kolonne for hvordan du kan implementere dette.


<td><label id="kurs_' . $rad['ID'] . '"></label><script>CountDownTimer("' . $rad['Dato'] . ' ' . $rad['Tid'] . '", "kurs_' . $rad['ID'] . '")</script></td>
[/Code]

 

Folkens som kan php får komme med innslag på hvordan en skal formatere dato og tid korrekt, dette er utenfor min sone.

Lenke til kommentar
corsa91

corsa91

Skrevet
  • Forfatter
Skrevet (endret)

Her ser du en bilde som viser hvordan den ser ut nå og hvordan den bør se ut.

 

Jeg får vist ut tiden og dato på riktig måte i seperate bokser. Er det mulig å kombinere de to til en rad boks i tabellen slik som bilde 2 viser?

 

Hvordan skal jeg koble den til databasen. Har gjort det med PHP en men ikke med Javascriptet.

post-185298-0-43672300-1367276706_thumb.png

Endret av corsa91
Lenke til kommentar
MikkelRev

MikkelRev

Skrevet
Skrevet
Jeg får vist ut tiden og dato på riktig måte i seperate bokser. Er det mulig å kombinere de to til en rad boks i tabellen slik som bilde 2 viser?
Ja selvfølgelig, men jeg vil ikke gjøre leksen for deg (men tipper neste poster kommer til å gjøre det...).

 

Du må lære deg hvordan html-tabeller fungerer. Deretter kan du analysere koden din. Hint:

'</td><td>' . $rad['Tid'] .
'</td><td>' . $rad['Dato'] .

Lenke til kommentar
corsa91

corsa91

Skrevet
  • Forfatter
Skrevet

Blir vel noe sånt:

'</td><td><label id="kurs_' . $rad['ID'] . '"></label><script>CountDownTimer("' . $rad['Dato'] . ' ' . $rad['Tid'] . '", "kurs_' . $rad['ID'] . '")</script>

 

Jeg vet hvordan HTML- tabellen fungerer. Tror det blir noe sånt som jeg har skrevet....

 

Ja selvfølgelig, men jeg vil ikke gjøre leksen for deg (men tipper neste poster kommer til å gjøre det...).

 

Du må lære deg hvordan html-tabeller fungerer. Deretter kan du analysere koden din. Hint:

'</td><td>' . $rad['Tid'] .
'</td><td>' . $rad['Dato'] .

Lenke til kommentar
burger1

burger1

Skrevet
Skrevet (endret)

Følgende eksempel fungerte for meg, dette er dog i c#.

 

 


<table border="1">
<tr><td>FristID</td><td>Fagnavn</td><td>Tittel</td><td>Tid</td><td>Dato</td><td>Gjennstående tid</td></tr>
@{
    foreach (Nedtelling.Models.Kurs kurs in Model)
    {
	    <tr>
		    <td>@kurs.ID</td>
		    <td>@kurs.Kursnavn</td>
		    <td>@kurs.Tittel</td>
		    <td>@kurs.Starter.ToString("HH:mm")</td>
		    <td>@kurs.Starter.ToString("dd.MM.yyyy")</td>
		    <td><label id="[email protected]"></label><script>CountDownTimer(new Date(@kurs.Starter.Subtract(new DateTime(1970, 1, 1)).TotalMilliseconds), "[email protected]")</script></td>
	    </tr>
    }
}
</table>
[/Code]

 

 

Hvordan kildekoden ser ut når jeg går til den siden:

 

[Code]
<script src="/Scripts/CountDownTimer.js"></script>
<div id="debug"></div>
<tr><td>FristID</td><td>Fagnavn</td><td>Tittel</td><td>Tid</td><td>Dato</td><td>Gjennstående tid</td></tr>
<tr>
<td>1</td>
<td>Kurs1</td>
<td>Kurset!</td>
<td>10:35</td>
<td>05.05.2013</td>
<td><label id="kurs_1"></label><script>CountDownTimer(new Date(1367750104440), "kurs_1")</script></td>
</tr>
<tr>
<td>2</td>
<td>Kurs2</td>
<td>Kurset! - Del 2</td>
<td>21:35</td>
<td>02.05.2013</td>
<td><label id="kurs_2"></label><script>CountDownTimer(new Date(1367530504447), "kurs_2")</script></td>
</tr>
</table>
[/Code]

 

 

Gav følgende resultat:

 

 

FristID Fagnavn Tittel Tid Dato Gjennstående tid

1 Kurs1 Kurset! 10:35 05.05.2013 4 dager 2 timer 40 minutter

2 Kurs2 Kurset! - Del 2 21:35 02.05.2013 1 dag 13 timer 40 minutter

 

 

 

Modifiserte også js scriptet med en linje

[Code]
var end = dt;
[/Code]

 

Noe mer hjelp kan jeg ikke bidra med nå :)

Endret av burger1
Lenke til kommentar
Gjest
Dette emnet er stengt for flere svar.
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...