Pukstošs elektroniskais pulkstenis

Pasaulē nepārspējams · Publicēts 14.11.2014 18:13:17

[mw_shl_code=css,true] <!DOCTYPE html>
<html lang="lv">
<head>
      <meta charset="UTF-8">
      <title>Elektroniskais pulkstenis</title>
</head>
<style type="text/css">
      *{piemale: 0; polsterējums: 0; saraksta stils: nav}
      body{fona krāsa: #D7154A; font-family: 'Microsoft Yahei'}
      .demo{platums: 330px; augstums: 100px; apmale: 3px cietā #fff; piemale: 200px auto; līnijas augstums: 100px; teksta līdzināšana: centrs; krāsa: #fff; fonta izmērs: 50px; fonta svars: 600; amats: radinieks; pārplūde: slēpta; }
      .size{platums: 100px; augstums: 100px; pludiņš: pa kreisi; }
      .pointer{platums: 10px; augstums: 100px; pludiņš: pa kreisi; }
      .bottom{platums: 200px; augstums: 100px; teksta līdzināšana: centrs; margin: 0 auto; krāsa: #fff}

      #next-h{pozīcija: absolūta; platums: 100px; augstums: 100px; pa kreisi: 0px; augšā: 100 pikseļi; }
      #next-m{pozīcija: absolūta; platums: 100px; augstums: 100px; pa kreisi: 110px; augšā: 100 pikseļi; }
      #next-s{pozīcija: absolūta; platums: 100px; augstums: 100px; pa kreisi: 220px; augšā: 100 pikseļi; }

</style>
<body>
      <div class="demo">
            <div id="hour" class="size"></div>
            <div id="next-h"></div>
            <div class="pointer">:</div>
            <div id="minute" class="size"></div>
            <div id="next-m"></div>
            <div class="pointer">:</div>
            <div id="second" class="size"></div>
            <div id="next-s"></div>
      </div>
      <div class="bottom"> Wusoft forums</div>
</body>
<script type="text/javascript">
Pašreizējā laika iegūšana
      var date=new Date();
      var hour=date.getHours();
      var minūte=datums.getMinutes();
      var second=date.getSeconds();

      Parādāmā laika DOM iegūšana
      var ohour=document.getElementById("stunda");
var ominute=document.getElementById("minūte");
var osecond=document.getElementById("otrais");

Laika inicializācija
funkcija init(){
         ohour.innerHTML=fill(stunda);
         ominute.innerHTML=fill(minūte);
         osecond.innerHTML=fill(otrais);
}
init();

Iegūstiet slēpto DOM, šeit DOM ir jāparāda nākamreiz
var nhour=document.getElementById("nākamais-h");
var nminute=document.getElementById("nākamais-m");
var nsecond=document.getElementById("nākamie-s");

Taimeris kontrolē laika maiņu
setInterval(funkcija(){
   if(second==60){
               sekunde = 0;
               Pievienojiet 1 minūšu izspēļu skaitam
               if(minūte==60){
                           minūte=0;
                           Stunda +1
                           if(stunda==24){
                                    stunda = 0;
                           }
                        Parādīts ēnas slēpšanas lodziņā
                        nhour.innerHTML=fill(stunda);
                        nhour++;
                        Peldošās funkcijas izsaukšana
               pārvietot(nhour;ohour);
               Arī lodziņš ir jāatiestata
                     nhour.style.top="100 pikseļi";
               }

               Parādīts ēnas slēpšanas lodziņā
               nminute.innerHTML=fill(minūte);
               minūte++;
               Peldošās funkcijas izsaukšana
         pārvietot(nminūte;ominūte);
         Arī lodziņš ir jāatiestata
            nminute.style.top="100 pikseļi";
   }else{
               otrais ++;
   }
   nsecond.innerHTML=fill(otrais);
}, 1000)

Nākamajā sekundē doms virzās uz augšu
1. parametrs: pārvietojamais lodziņš
2. parametrs: lodziņš, kurā beidzot tiek parādīts laiks
funkcija pārvietot (obj, rādīt){
         var timer=setInterval(funkcija(){
            obj.style.top=getStyle(obj,"top")-1+'px';
            if(getStyle(obj,"top")<=0){
                     clearInterval(taimeris);
            show.innerHTML=obj.innerHTML;
            }
         }, 1)
}

Vai ir mainījies klausīšanās laiks?
var vecs=0;
setInterval(funkcija(){
      if(old!=nsecond.innerHTML){
            pārvietoties(nsekunde,osekunde);
            nsecond.style.top="100 pikseļi";
            old=nsecond.innerHTML;
      }
}, 1)

Papildu funkcija atribūtu vērtību iegūšanai
      funkcija getStyle(obj,style){
         var attr=window.getComputedStyle ? window.getComputedStyle(obj,null)[style]:obj.currentStyle[style];
         Noņemiet vienību px
         attr=attr.slice(0, -2);
         return parseInt(attr);
      }

      Ja laika ilgums ir 1 bits, priekšā tiek pievienots 0
      funkcija fill(str){
            var s=str.toString();
      if(s.length==1){
            s='0'+s;
            atgriešanās s;
      }else{
            atgriešanās str;
      }
      }

</script>
[/</html>mw_shl_code]

[CSS / DIV] Pukstošs elektroniskais pulkstenis

Skatītās sadaļas