Miten Suorita KelloWeb-sivu JavaScript

näyttäminen käynnissä kellon sivun JavaScriptin avulla vaatii vain muutamia keskeisiä lausuntoja, joissa sisäänrakennettu Date luokan ja asiakirjan tapahtumia.Asiakirja tapahtumat viittaavat hetkiä, jotka vaikuttavat sivun (alias \ 'asiakirjalla \ "), esim, hiiren napsautuksella, sivu latautuu tai tapahtuma loi web-sivun itse.


Suorita seuraavat vaiheet näyttää kellon sivun JavaScript:

mitä tarvitset

  • mitään erityisiä resursseja tarvitaan.

Ohjeet

  1. Avaa Muistio ja kirjoita HTML-asiakirja:

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

    & lt; script & gt;
    toiminto Showtime () {
    var aika = new Date ()
    var tunti = time.getHours ()
    var minuutin = time.getMinutes ()
    var SMIN = (minuutti & lt; 10)?\ "0 \" + minuutti: minuutti
    var toisen = time.getSeconds ()
    var sSecs = (toinen & lt; 10)?\ "0 \" + toinen: toinen
    var strTime = tunti + \ ": \" + SMIN + \ ": \" + sSecs
    document.getElementById (\ "clockface \"). InnerHTML = strTime
    GO
    } // Showtime
    & lt; / script & gt;
    & lt; / head & gt;

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

  2. Tallenna asiakirja mahdollisesti liittyvät otsikko kuten \ "time.html \" tai \ "clock.html, \" kaksoisnapsauta sivu latautuu se selaimen.Sivu näyttää aika.

  3. Paranna kellosi lisäämällä päivämäärän.Vaihda Showtime toimintoa tämä:

    & lt; script & gt;
    toiminto Showtime () {
    var aika = new Date (). ToLocaleString ()
    document.getElementById (\ "clockface \"). InnerHTML = aika
    GO
    } // Showtime
    & lt; / script & gt;

  4. Lisää tyyliä kellon CSS (CSS): lisätään seuraava & lt; tyyli & gt;lohko alle & lt; head & gt;tag:

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

    clockface

    {
    väri: sininen
    GO
    font-weight: bold
    GO
    font-family: \ "Verdana \"
    GO
    text-align: center
    GO
    }
    & lt; / tyyli & gt;

  5. käyttää Kello näyttämään muistutus: vaihda & lt; script & gt;lohko edellisissä esimerkeissä tämän uuden lohkon:

    & lt; script & gt;

    toiminto showReminder () {
    document.getElementById (\ "clockface \"). InnerHTML = \ "On lounasaika \"
    }

    toiminto Showtime () {
    var tm = new Date ()
    var aika = tm.toLocaleString ()
    jos (tm.getHours () == 12 & amp; & amp; tm.getMinutes () == 0 & amp; & amp; (tm.getSeconds () & gt; = 0 & amp; & amp; tm.getSeconds ()& lt; = 10)) {
    showReminder ()
    palata
    GO
    }

    document.getElementById (\ "clockface \"). innerHTML = aika
    GO
    } // Showtime
    & lt; / script & gt;

  6. Sijoitus kellon CSS: vaihda & lt; tyyli & gt;lohko edellä exammples tällä CSS lohko:
    & lt; style type = \ "text / css \" & gt;

    clockface

    {
    väri: sininen
    GO
    font-weight: bold
    GO
    font-family: \ "Verdana \"
    GO
    text-align: center
    GO
    position: absolute
    GO
    alkuun: 5px
    GO
    jäljellä: 5 px
    GO
    }

    & lt; / tyyli & gt;

606
0
2
Java Script Ohjelmointi