[Javascript] Klok op website zonder form

Pagina: 1
Acties:
  • 1.417 views sinds 30-01-2008
  • Reageer

  • Ye Greate'96
  • Registratie: Juli 2001
  • Laatst online: 11-08-2021
Ik probeer de systeemtijd weer te geven op mijn website, maar het enige dat ik kan vinden op google is bijv. dit:

http://www.javascript-page.com/clock.html
Waarbij de tijd wordt weergegeven in een textbox.

Ik zou graag de cijfers dynamisch in mijn site willen hebben.


Ter verduidelijking, het moet de tijd rechtsonder in het plaatje op deze pagina vervangen door een daadwerkelijk meelopende tijd net zoals in Windows:
http://www.yegreate96.nl

Verwijderd

<span id="theClock"></span> gebruiken en met innerHTML wijzigen denk ik

document.getElementById('theClock').innerHTML = ""
+ tDate.getHours() + ":"
+ tDate.getMinutes() + ":"
+ tDate.getSeconds();

wordt het dan dus.

[ Voor 71% gewijzigd door Verwijderd op 27-06-2005 14:38 ]


  • Cyphax
  • Registratie: November 2000
  • Laatst online: 14:10

Cyphax

Moderator LNX
Verwijderd schreef op maandag 27 juni 2005 @ 14:37:
<span id="theClock"></span> gebruiken en met innerHTML wijzigen denk ik

document.getElementById('theClock').innerHTML = ""
+ tDate.getHours() + ":"
+ tDate.getMinutes() + ":"
+ tDate.getSeconds();

wordt het dan dus.
Dat in een functie zetten en die zichzelf aan laten roepen met een setTimeout van 1000ms? :)

Saved by the buoyancy of citrus


Verwijderd

Ja ik haalde ff een stukje uit de code die hij als voorbeeld gaf.
Dit wordt dus de totale code:

code:
1
je hebt gelijk ...

[ Voor 85% gewijzigd door Verwijderd op 27-06-2005 14:46 ]


  • André
  • Registratie: Maart 2002
  • Laatst online: 11:13

André

Analytics dude

Met deze 2 hints zou jer prima uit moeten kunnen komen, een kant en klaar script gaan we je niet geven omdat het eigenlijk een scriptrequest is. Wat had je zelf al geprobeerd?

/edit:
Ik zie dat SpartaRotterdam al het complete script gegeven heeft maar dat is eigenlijk niet de bedoeling. Het is hier geen scriptafhaalinstantie.

[ Voor 31% gewijzigd door André op 27-06-2005 14:44 ]


  • Ye Greate'96
  • Registratie: Juli 2001
  • Laatst online: 11-08-2021
Ik hoef geen kant en klaar script, maar alleen een duwtje in de juiste richting!

Want de scipts die ik gevonden heb kunnen alleen iets laten zien in een textbox, ik zoek alleen een alternatief.

  • Osiris
  • Registratie: Januari 2000
  • Niet online
Het antwoord is allang gegeven hoor, ook zonder dat totale scriptje..

Je moet alleen die complete <form> inc <input> vervangen door dat wat ie al gegeven heeft en ff die JScript aanpassen, weer op de manier die allang genoemt is...

offtopic:
Waarom heeft je site eigenlijk geen doctype, geen <html>, geen <head> en geen <body>? :X

[ Voor 20% gewijzigd door Osiris op 27-06-2005 16:57 ]


  • Ye Greate'96
  • Registratie: Juli 2001
  • Laatst online: 11-08-2021
Osiris schreef op maandag 27 juni 2005 @ 16:56:

Waarom heeft je site eigenlijk geen doctype, geen <html>, geen <head> en geen <body>? :X
Geen idee, waarom wel?

  • Mayco
  • Registratie: Augustus 2002
  • Laatst online: 05-05 08:13
1 woord: w3c

  • Ye Greate'96
  • Registratie: Juli 2001
  • Laatst online: 11-08-2021
Evengoed bedankt, heb nu iets werkend hier lokaal.

Maar om nou een script in een reply te verwijderen omdat het mij te makkelijk zou zijn gemaakt vind ik wat onnodig

  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

Osiris schreef op maandag 27 juni 2005 @ 16:56:

offtopic:
Waarom heeft je site eigenlijk geen doctype, geen <html>, geen <head> en geen <body>? :X
Wie zegt dat de rest allemaal nodig is :?

[ Voor 10% gewijzigd door BtM909 op 27-06-2005 17:25 ]

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.


  • Cyphax
  • Registratie: November 2000
  • Laatst online: 14:10

Cyphax

Moderator LNX
BtM909 schreef op maandag 27 juni 2005 @ 17:23:
[...]

Wie zegt dat de rest allemaal nodig is :?
Welke rest? De stukken javascript horen toch eigenlijk in <head>..</head> en een <body> is de inhoud van de pagina zelf.

Saved by the buoyancy of citrus


  • Osiris
  • Registratie: Januari 2000
  • Niet online
BtM909 schreef op maandag 27 juni 2005 @ 17:23:
[...]

Wie zegt dat de rest allemaal nodig is :?
Kijk zelf maar :)

En als we dan toch een <html> toevoegen, krijgen we dit.
En als we dan toch een <head> toevoegen, krijgen we dit.

We gaan er wel even van uit dat de TS HTML probeert te maken en geen text/plain ofzo :)

Jup, http://www.yegreate96.nl/ beweert text/html te zijn, dus geen text/plain... ;)

[ Voor 63% gewijzigd door Osiris op 27-06-2005 17:42 ]


  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

html, head en body zijn toch echt optional in HTML: valid!

Intentionally left blank


  • Osiris
  • Registratie: Januari 2000
  • Niet online
offtopic:
Ahh, en ik altijd maar denken dat die title weer verplicht in een <head> moest 8)7 My bad :)

  • Cyphax
  • Registratie: November 2000
  • Laatst online: 14:10

Cyphax

Moderator LNX
crisp schreef op maandag 27 juni 2005 @ 18:04:
html, head en body zijn toch echt optional in HTML: valid!
Waar zijn <html> <head> ed. tags precies voor? Om de structuur duidelijk te houden, als je dat graag wilt?

Saved by the buoyancy of citrus


  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Cyphax schreef op maandag 27 juni 2005 @ 18:17:
[...]

Waar zijn <html> <head> ed. tags precies voor? Om de structuur duidelijk te houden, als je dat graag wilt?

Onder andere ja. html, head en body zijn in ieder geval altijd wel altijd impliciet aanwezig in de DOM tree, zelfs als ze weggelaten zijn in de source. Vanuit dat oogpunt zou je ook kunnen beredeneren dat het parsen van een document waarin deze elementen wel expliciet aanwezig zijn sneller zou moeten zijn (hetzelfde geldt eigenlijk ook voor de impliciete tbody in een table-element).

Intentionally left blank


Verwijderd

Om even inhoudelijk te reageren op de klok. Je kunt tegenwoordig ook een textbox heel mooi opmaken met css. Wellicht niet een heel 'chique' oplossing, maar niemand hoeft te zien dat het een textbox is. De klok uit het voorbeeld kan dus prima fungeren voor de functie waarvoor je het wil gebruiken. Zo doen ook veel sites het met betrekking tot countdowns: opmaken van je textbox-elementen.

  • Ye Greate'96
  • Registratie: Juli 2001
  • Laatst online: 11-08-2021
Gelukt, zelfs in de gewenste kleur!

www.yegreate96.nl

Heb inderdaad gebruik gemaakt van innerhtml:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- Begin
function clock() {
if (!document.layers && !document.all) return;
var digital = new Date();
var hours = digital.getHours();
var minutes = digital.getMinutes();
if (hours > 12) hours = hours - 12;
if (hours == 0) hours = 12;
if (minutes <= 9) minutes = "0" + minutes;
dispTime = hours + ":" + minutes ;
if (document.layers) {
document.layers.pendule.document.write(dispTime);
document.layers.pendule.document.close();
}
else
if (document.all)
pendule.innerHTML = dispTime;
setTimeout("clock()", 1000);
}
//  End -->
</script>

<span id="pendule" class="style2" style="position:absolute;left:958;top:559;">

  • TwoR
  • Registratie: Augustus 2002
  • Laatst online: 15:28

TwoR

Gekleurde stippen

Ye Greate'96 schreef op dinsdag 28 juni 2005 @ 08:20:
Gelukt, zelfs in de gewenste kleur!

www.yegreate96.nl

Heb inderdaad gebruik gemaakt van innerhtml:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- Begin
function clock() {
if (!document.layers && !document.all) return;
var digital = new Date();
var hours = digital.getHours();
var minutes = digital.getMinutes();
if (hours > 12) hours = hours - 12;
if (hours == 0) hours = 12;
if (minutes <= 9) minutes = "0" + minutes;
dispTime = hours + ":" + minutes ;
if (document.layers) {
document.layers.pendule.document.write(dispTime);
document.layers.pendule.document.close();
}
else
if (document.all)
pendule.innerHTML = dispTime;
setTimeout("clock()", 1000);
}
//  End -->
</script>

<span id="pendule" class="style2" style="position:absolute;left:958;top:559;">
Het werkt alleen niet in FF weet niet wat de bedoeling is met de site maar als die crossbrowser moet worden is dit nog niet helemaal het juiste scriptje.

  • Osiris
  • Registratie: Januari 2000
  • Niet online
TS zou getElementById moeten gebruiken ipv document.layers en document.all.

  • Ye Greate'96
  • Registratie: Juli 2001
  • Laatst online: 11-08-2021
TwoR schreef op dinsdag 28 juni 2005 @ 08:28:
[...]

Het werkt alleen niet in FF weet niet wat de bedoeling is met de site maar als die crossbrowser moet worden is dit nog niet helemaal het juiste scriptje.
Tja, ik zou echt niet weten hoe ik dit ook nog 'es voor meerdere browsers aan de praat moet krijgen, misschien iets simpels?

getElementById werkt prima in IE, maar nog steeds niet in FF.
Overigens zie ik net dat ook m'n startmenu niet goed werkt in FF.... werkt nu wel

Maar de klok nog niet...

[ Voor 22% gewijzigd door Ye Greate'96 op 28-06-2005 08:46 ]


  • Cyphax
  • Registratie: November 2000
  • Laatst online: 14:10

Cyphax

Moderator LNX
Ye Greate'96 schreef op dinsdag 28 juni 2005 @ 08:34:
getElementById werkt prima in IE, maar nog steeds niet in FF.
Zeker wel, dat werkt prima in FF! :)
Gebruik het vooral :)

Saved by the buoyancy of citrus


  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

Haal deze vieze regel weg :)

JavaScript:
1
if (!document.layers && !document.all) return;

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.


Verwijderd

Waarom paste je dat script dat je eerst gebruikte niet gewoon aan?!
Toen ik die had aangepast met innerHTML en document.getElementById werkte hij zowel in IE als FF.
Pagina: 1