js学习笔记之:时间(三)

     今天来学习一个简单的时间应用:时间的倒影,如图所示:

     js学习笔记之:时间(三)

 

     主要知识点: 1  获取系统的时间值;2 建立一个div的倒影

     div的倒影主要利用css来控制,函数值为:filter:flipv()

           步骤一(建立HTML和css样式):

      <body onload="init()">
         <div id="time1"  class="time" style="width:8; height:8; top:9; left:35;"></div>
         <div id="time2"  class="time" style="filter:flipv() alpha(opcity=30); font-style:italic";></div>
      </body>

      <style>
          .time{font-family:"Comic Sans MS"; font-size:20pt; font-weight:bold; color:#OF808F; color:#F00;}
       </style>

      步骤二(编写js代码):

      function init(){
         if(document.all){    
         var oTime1 = document.getElementById("time1");
         var oTime2 = document.getElementById("time2");
         oTime2.style.left = oTime1.style.posLeft;
         oTime2.style.top = oTime2.style.posTop + oTime1.offsetHeight-5;
         settimes();
        }
     }    

     

    function settimes(){
        //获取时间值
       var time = new Date();
       hours = time.getHours();
       mins = time.getMinutes();
       secs = time.getSeconds();

      if(hours <10){hours = "0" + hours;}
      if(mins <10){mins = "0" + mins;}
      if(secs <10){secs = "0" + secs;}
   
     var oTime1 = document.getElementById("time1");
     var oTime2 = document.getElementById("time2");
      //将时间值插入div
     oTime1.innerHTML = hours+":" + mins + ":" + secs;
     oTime2.innerHTML = hours+":" + mins + ":" + secs;
      circletimer = setInterval('settimes()',1000); //获取方法本身,让时钟不停在走
    }     

     有关时间的值的获取,想必大家都会,这里值得一说的是,使用了间隔型定时器 setInterval,来触发调用自己:settimes(),以保证时间不停在走,这是一个定时器很常用的写法,就是回调自己这个本身的函数,来获取到循环执行某段代码;

你可能感兴趣的:(学习笔记)