Hoe kan ik een klok op een webpagina met behulp van Javascript Run

Display een lopende klok op een webpagina met behulp van JavaScript vereist slechts een paar belangrijke verklaringen met betrekking tot de ingebouwde Date klasse en document evenementen.Document gebeurtenissen verwijzen naar momenten die invloed hebben op de webpagina (aka \ "document \"), bijvoorbeeld, muisklikken, pagina wordt geladen of een gebeurtenis die door de webpagina zelf.


Voer de volgende stappen uit om een ​​klok weer te geven op een webpagina met JavaScript:

wat je nodig hebt

  • geen speciale middelen nodig.

instructies

  1. Open Notepad en voer dit HTML-document:

    & lt; html & gt;
    & lt; head & gt;

    & lt; script & gt;
    functie Showtime () {var
    tijd = new Date ()
    var uur = time.getHours ()
    var minuten = time.getMinutes ()
    var Smin = (minute & lt; 10)?\ "0 \" + minuut: minuut
    var tweede = time.getSeconds ()
    var sSecs = (tweede & lt; 10)?\ "0 \" + tweede: tweede
    var strTime = uur + \ ": \" + smin + \ ": \". + SSecs
    document.getElementById (\

    "wijzerplaat \") innerHTML = strTime
    GO
    } // showTime
    & lt; / script & gt;
    & lt; / head & gt;

    & lt; body onload = \ "setInterval (showTime, 1000) \" & gt;
    & lt; div id = \ "wijzerplaat \" & gt; & lt; / div & gt;
    & lt; / body & gt;
    & lt; / html & gt;

  2. Sla het document met de passende titel als \ "time.html \" of \ "clock.html, \" en dubbelklik op de pagina om het te laden in uw browser.De pagina geeft de looptijd.

  3. Verbeter uw klok door toevoeging van de datum.Vervang de Showtime functie met deze:

    & lt; script & gt;
    functie Showtime () {var
    tijd = new Date () toLocaleString ()
    document.getElementById (\ "wijzerplaat \") innerHTML = tijd
    GO
    ..} // ShowTime
    & lt; / script & gt;

  4. stijl toe aan uw klok met CSS (Cascading Style Sheets): voeg de volgende & lt; stijl & gt;blokkeren onder de & lt; head & gt;tag:

    & lt; style type = \ "text / CSS \" & gt;

    wijzerplaat

    {
    kleur: blauw
    GO
    font-weight: bold
    GO
    font-family: \ "Verdana \"
    GO
    text-align: center
    GO
    }
    & lt; / style & gt;

  5. Gebruik de klok om een ​​herinnering weer te geven: vervang de & lt; script & gt;blok in de voorgaande voorbeelden met deze nieuwe blok:

    & lt; script & gt;

    functie showReminder () {
    document.getElementById (\ "wijzerplaat \"). InnerHTML = \ "Het is Lunch Time \"
    }

    functie Showtime () {var
    tm = new Date ()
    var tijd = tm.toLocaleString ()
    if (tm.getHours () == 12 & amp; & amp; tm.getMinutes () == 0 & amp; & amp; (tm.getSeconds () & gt; = 0 & amp; & amp; tm.getSeconds ()& lt; = 10)) {
    showReminder ()
    terug
    GO
    }

    document.getElementById (\ "wijzerplaat \") innerHTML = tijd
    GO
    } // showTime
    . & lt; / script & gt;

  6. Plaats uw klok met behulp van CSS: vervang de & lt; stijl & gt;blok in het voorgaande exammples met deze CSS-blok:
    & lt; style type = \ "text / CSS \" & gt;

    wijzerplaat

    {
    kleur: blauw
    GO
    font-weight: bold
    GO
    font-family: \ "Verdana \"
    GO
    text-align: center
    GO
    position: absolute
    GO
    top: 5px
    GO
    links: 5 px
    GO
    }

    & lt; / style & gt;

627
0
2
Java Script Programmeren