Avatar billede jkampmann Nybegynder
30. juli 2008 - 20:23 Der er 9 kommentarer og
1 løsning

Nedtælling i timer, minutter og sekunder

Hejsa.

Hvordan får jeg - via javascript, lavet et script som nedtæller?

Jeg har f.eks en time() (fra PHP) i mine konkurrencer.

Jeg ønsker så, at den fortæller hvor lang tid der er tilbage før konkurrencen er slut.

Hvordan gøres dette? Ønsker en opsætning som:

TT:MM:SS

Noget lign www.bidster.com
Avatar billede jkampmann Nybegynder
30. juli 2008 - 20:26 #1
Mit udtræk fra databasen er f.eks "19103030" som er sekunder siden 1970 tror jeg det er. Det er PHP's time() funktion jeg benytter.
Avatar billede wanze Nybegynder
30. juli 2008 - 23:43 #2
function settimer() {
    date =  new Date();
    date.setTime(19103030*1000-date.getTime());

    sec = date.getSeconds();
    min = date.getMinutes();
    hour = date.getHours();

    if(sec<10) sec = '0'+sec;
    if(min<10) min = '0'+min;
    if(hour<10) hour = '0'+hour;
   
    document.getElementById('counter').innerHTML = hour+":"+min+":"+sec;
    window.setTimeout("settimer()",1000)
}

Du skal så bare kalde funktionen én gang, når dokumentet indlæses. Det kan fx være med:
<body onload="settimer()">

Timeren vil så komme til at stå i et element, du giver id'et counter. Det kunne fx være en <span id="counter"></span>.
Avatar billede olebole Juniormester
30. juli 2008 - 23:52 #3
<ole>

- og i moderne, valid kode:
    document.getElementById('counter').firstChild.nodeValue = hour+":"+min+":"+sec;

- men det kræver, spannet har indhold:
    <span id="counter">&nbsp;</span>

/mvh
</bole>
Avatar billede wanze Nybegynder
31. juli 2008 - 00:58 #4
Det er så 2. gang du retter mig i det.

Nu er der jo faktisk en forskel på firstChild.nodeValue og innerHTML. Hvor er det desuden du mener at innerHTML ikke validerer?
Avatar billede mclemens Nybegynder
31. juli 2008 - 01:18 #5
Når Ole siger invalid er det fordi den ikke er standard
http://www.dengodekode.dk/artikler/DOM/no_innerhtml.php
/ se "Status for innerHTML's validitet"

"InnerHTML er - har altid været og vil altid være - invalid i forhold til W3C's standarder!"

... At den ikke er standardiset vil jeg ikke kalde for at være det samme som invalid, så ville jeg skrive "invalid i forhold til W3C's standarder" som han gør i hans artikel. Den er jo ganske valid i IE og FF m.v... (nåh det er min holdning til innerHTML - jeg foretrækker dog selv at pille ved nodeValue)
Avatar billede wanze Nybegynder
31. juli 2008 - 02:32 #6
Ja, innerHTML fungerer i alle browsere jeg har testet: Galeon, Seamonkey, Kazehakase, Firefox1-3/Mozilla1, Konquerer, MSIE5-8. Opera9, Flock1-2, Safari2-3, Camino, Minefield3, Navigator 9 og Epiphany2.

Men ja, jeg foretrækker også at holde mig til standarderne, men jeg har aldrig set W3C's JavaScript-standarder - faktisk kan jeg slet ikke finde dem på w3c.org, hvorfor jeg er lidt skeptisk.
Avatar billede mclemens Nybegynder
31. juli 2008 - 09:57 #7
http://www.w3.org/TR/WCAG20-TECHS/SCR21.html

The objective of this technique is to demonstrate how to use functions of the Document Object Model (DOM) to add content to

a page instead of using document.write or object.innerHTML. The document.write() method does not work with XHTML when served

with the correct MIME type (application/xhtml+xml), and the innerHTML property is not part of the DOM specification and thus

should be avoided.

^ - Interessant

...

http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-SCRIPT-TECHS-20041008/

2.2 Dynamic content generation

This technique relates to the following sections of the guidelines:

Task:
- Avoid document.write() and innerHTML().

Assistive technologies Additionally, document.write() and innerHTML() can render content invalid after the fact, which

presents problems for those assistive technologies that do support script.
Deprecated Example:

function fillContent() {
    document.write("<h1>Welcome to my site</h1>");
    document.write("<p>Lorem ipsum dolor sit amet");
    document.menu.innerHTML = "<ul><li><a href="foo.html">foo</a>";
}

^ - Øhm, ja den fejl kan også laves i almindelig markup - er
der kun innerHTML's fejl at en fjumrende sætter forkert html ?

...
http://www.w3.org/TR/html5/dom.html

2.2 Elements

The nodes representing HTML elements in the DOM must implement, and expose to scripts, the interfaces listed for them in the

relevant sections of this specification. This includes XHTML elements in XML documents, even when those documents are in

another context (e.g. inside an XSLT transform).

The basic interface, from which all the HTML elements' interfaces inherit, and which must be used by elements that have no

additional requirements, is the HTMLElement interface.

interface HTMLElement : Element {
  // DOM tree accessors
  NodeList getElementsByClassName(in DOMString classNames);

  // dynamic markup insertion
          attribute DOMString innerHTML;

^ - Hvad ?


---

2.5 Dynamic markup insertion

The document.write() family of methods and the innerHTML family of DOM attributes enable script authors to dynamically insert markup into the document.

bz argues that innerHTML should be called something else on XML documents and XML elements. Is the sanity worth the migration pain?

Because these APIs interact with the parser, their behavior varies depending on whether they are used with HTML documents (and the HTML parser) or XHTML in XML documents (and the XML parser). The following table cross-references the various versions of these APIs.
    document.write()     innerHTML
For documents that are HTML documents     document.write() in HTML     innerHTML in HTML
For documents that are XML documents     document.write() in XML     innerHTML in XML

Regardless of the parsing mode, the document.writeln(...) method must call the document.write() method with the same argument(s), and then call the document.write() method with, as its argument, a string consisting of a single line feed character (U+000A).

^ - Hvad ?

---

  5.

      Finally, the method must return.

In HTML, the innerHTML DOM attribute of all HTMLElement and HTMLDocument nodes returns a serialization of the node's children using the HTML syntax. On setting, it replaces the node's children with new nodes that result from parsing the given value. The formal definitions follow.

On getting, the innerHTML DOM attribute must return the result of running the HTML fragment serialization algorithm on the node.

On setting, if the node is a document, the innerHTML DOM attribute must run the following algorithm:

  1.

      If the document has an active parser, then stop that parser, and throw away any pending content in the input stream. what about if it doesn't, because it's either like a text/plain, or Atom, or PDF, or XHTML, or image document, or something?
  2.

      Remove the children nodes of the Document whose innerHTML attribute is being set.
  3.

      Create a new HTML parser, in its initial state, and associate ...

o.s.v.

^ - Hvad ?

---

Er det bare mig eller ser innerHTML ud til at være standardiseret adgangsflade i html5 ?
Avatar billede mclemens Nybegynder
31. juli 2008 - 09:59 #8
... Og er det så ikke kun et spørgsmål om at man ikke kan være sikker på at den er implementeret i henhold til html5 standard før html5 er standard på nettet og browsere 100% understøtter html5 og dermed innerHTML (selvom jeg ikke selv kender nogle der bruger en browser der ikke understøtter innerhtml er der jo måske nogle promille ?)
Avatar billede jkampmann Nybegynder
27. september 2008 - 22:17 #9
Tusind tak for jeres svar. Jeg kan dog ikke finde nogle getDays() funktion! Hvordan sætter jeg dage på også ? f.eks 31 dage 23 timer 22 minutter 21 sekunder ?
Avatar billede roenving Novice
28. september 2008 - 06:55 #10
Nu fungerer wanzes eksempel ud fra, at man reducerer datoen til nu at være den 1/1-1970 00:00:00:000, og så aflæses hvor langt fra denne slutdatoen er ...

-- en helt iorden tilgangsvinkel, men problematisk, hvis man ønsker at kunne supportere tids-afstande over 31 dage, da månedsberegningen i Date-objekter fuldstændig følger kalenderen (altså her 1970-kalenderen !-)

-- en anden tilgangsvinkel kunne være at tage tidsafstanden (i millisekunder !-) og så reducere den til dage, timer osv., for så har man altid fat i noget rigtigt ...

-- hvis du til dit formål aldrig kommer over de 31 dage (og 0 timer !-) kan du bruge .getDate(), ellers skal scriptet bygges helt anderledes; hvis du gider, kan du jo kigge på koderne i mine Date()-udvidelser (eller bare bruge dem !-)

http://roenving.users.whitehat.dk/date/roenvingDate.html
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester