初學(xué)js 自制表盤時鐘很簡單

標(biāo)簽：

Html/CSS JavaScript CSS3

学习前端没一周，用简单的HTML 和css js 做的

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>clock</title>
</head>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
#wrap {
    position: relative;
    width: 300px;
    height: 300px;
    background: #09F;
    text-align: center;
    margin: 0 auto;
    border-radius: 150px;
}
.a1 {
    display: block;
    width: 300px;
    height: 5px;
    transform: rotate(0deg);
    position: absolute;
    top: 147px;
    left: 0px;
}
.left {
    display: block;
    float: left;
    width: 20px;
    height: 5px;
    background: #9F3;
}
.right {
    display: block;
    float: right;
    width: 20px;
    height: 5px;
    background: #9F3;
}
.po {
    width: 20px;
    height: 20px;
    background: #000;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -10px;
    z-index:99;
}
#mz {
    height: 300px;
    width: 5px;
    transform: rotate(0deg);
    position: absolute;
    top: 0px;
    left: 149px;
    z-index:80;

}
.mz {
    width: 5px;
    height:155px;
    margin:  45px 0 100px 0;
    background: #60F;
}
#fz {
    width: 7px;
    height: 300px;
    transform: rotate(0deg);
    position: absolute;
    top: 0px;
    left: 148px;
    z-index:10;
}
.fz {
    width: 7px;
    height: 135px;
    margin:  55px 0 110px 0;
    background:#00F;
}
#sz {
    width: 10px;
    height: 300px;
    transform: rotate(0deg);
    position: absolute;
    top: 0px;
    left: 145px;
    z-index:5;
}
.sz {
    width: 10px;
    height: 110px;
    margin: 70px 0 120px 0;
    background:#9F9;
}
</style>
<body onLoad="add()">
<div id="wrap"> <!--外表包装-->
  <a href="#" class="a1"><!-- 外表的刻度-->
  <p class="left"></p>
  <p class="right"></p>
  </a>
  <div class="po"></div><!--中心圆点-->
  <div id="mz"><!--秒针下面格式一样-->
    <div class="mz"></div>
  </div>
  <div id="fz">
    <div class="fz"></div>
  </div>
  <div id="sz">
    <div class="sz"></div>
  </div>
</div>
</body>
<script type="text/javascript">

 function add(){//添加刻度
     for( var i=0;i<30;i++)
     {
      var a1=document.createElement('a');
      a1.className='a1';
      var p1=document.createElement("p");
      p1.className='left';
      var p2=document.createElement("p");
      p2.className='right';
      if(i%5==0){
          a1.style.height='8px';
          p1.style.height='8px';
          p1.style.width='30px';
          p2.style.height='8px';
          p2.style.width='30px';
          }
      a1.appendChild(p1);
      a1.appendChild(p2);
      a1.style.transform='rotate('+6*i+'deg)';
      oldh.appendChild(a1);
     }
    //oldh.innerHTML= navigator.appCodeName;
     }
 var mz=document.getElementById('mz');
 var oldh= document.getElementById("wrap");
 var fz=document.getElementById('fz');
 var sz=document.getElementById('sz');
function c(){
        var d= new Date();
        var h=d.getHours();
        var h12=h<12?h:h-12;//转换成12小时制
    mz.style.transform='rotate('+ (d.getSeconds())*6+'deg)';//旋转角度设置
    fz.style.transform='rotate('+ (d.getMinutes())*6+'deg)';
    sz.style.transform='rotate('+ ((h12)*30 +d.getMinutes()*0.5)+'deg)';
    }
     setInterval("c()",1000);//循环 总比系统时间慢一秒！！不管了！
</script>
</html>

點擊查看更多內(nèi)容