欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript實(shí)現(xiàn)時(shí)間表動(dòng)態(tài)效果

 更新時(shí)間：2017年07月15日 09:09:33   作者：梵海pp  
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)時(shí)間表動(dòng)態(tài)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)時(shí)間表動(dòng)態(tài)效果的具體代碼，供大家參考，具體內(nèi)容如下

這里用到的是Date時(shí)間類

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>日期類 時(shí)間表</title>
 </head>
 <style>
  #box{
   background:url(img/1.jpg) no-repeat;
   width: 600px;
   height: 600px;
   margin: 0 auto;
   position: relative;
  }
  #m,#s,#h{position: absolute;top: 0px;left:50%;margin-left: -15px;}
  /*這里利用絕對(duì)定位的margin負(fù)值法來讓時(shí)分秒的指針圖片居中,left:設(shè)置為50% margin-left為（圖片寬度的負(fù)數(shù)值)/2*/
  #h{background:url(img/2.png) no-repeat;width: 30px;height: 600px;position: absolute}
  #m{background: url(img/3.png) no-repeat;width: 30px;height: 600px;}
  #s{background: url(img/4.png) no-repeat;width: 30px;height: 600px;}
 </style>
 <script type="text/javascript">
  window.onload=function(){
   function go(){//封裝函數(shù)
    var oh=document.getElementById("h");
    var om=document.getElementById("m");
    var os=document.getElementById("s");
    var time=new Date();//獲取當(dāng)前時(shí)間
    var s=time.getSeconds();//獲取秒數(shù)
    var min=time.getMinutes();//獲取分
    var hour=time.getHours();//獲取小時(shí)
    os.style.transform="rotate("+s*6+"deg)";//運(yùn)用transform方法可以讓圖片轉(zhuǎn)動(dòng)到指定位置 鐘表上的每一個(gè)秒格的度數(shù)為360/60
    om.style.transform="rotate("+min*6+"deg)";//用獲取到的時(shí)間乘以轉(zhuǎn)動(dòng)的度數(shù) 讓圖片變到指定位置
    oh.style.transform="rotate("+hour*30+"deg)";
   }
   go();
   setInterval(go,20);//設(shè)置定時(shí)器每20毫秒執(zhí)行一次函數(shù)，就可以實(shí)現(xiàn)動(dòng)態(tài)的鐘表
  }
 </script>
 <body>
  <div id="box"><!--布局 box為鐘表的背景圖 可以在網(wǎng)上找一張 設(shè)置為相對(duì)定位-->
   <!--里面放三張圖片 分別是時(shí) 分 秒的指針圖 設(shè)置為絕對(duì)定位-->
   <div id="h"></div>
   <div id="m"></div>
   <div id="s"></div>
  </div>
 </body>
</html>

效果圖

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論