一个钟表(js基础,简单易懂)

HTML csshtml 发表于 11 月前

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表</title>
<style media="screen">
body{
background: black;
}
.wrap{
margin: auto;
width: 500px;
height: 500px;
background: lightyellow;
border-radius: 50%;
box-shadow: 10px 10px 100px yellow;
position: relative;
}
.needle{
width: 460px;
height: 6px;
border-left: 20px solid rgb(152, 117, 54);
border-right: 20px solid rgb(152, 117, 54);
position: absolute;
top: 247px;
}
.needle2{
width: 420px;
height: 10px;
border-left: 40px solid brown;
border-right: 40px solid brown;
position: absolute;
top: 245px;
}
.times{
position: absolute;
width: 400px;
height: 30px;
/border: 1px solid black;/
top: -10px;
left: 10px;
transform: rotate(90deg);
}
.square{
width: 30px;
height: 30px;
color: balck;
font-size: 30px;
/border: 1px solid red;/
display: inline-block;
position: absolute;
text-align: center;
line-height: 30px;
}
.h{
width: 12px;
height: 90px;
background: brown;
position: absolute;
transform-origin: 50% 80px;
transform: rotate(30deg);
top: 170px;
left: 244px;
}
.m{
width: 8px;
height: 120px;
background: gray;
position: absolute;
top: 140px;
transform-origin: 50% 110px;
transform: rotate(40deg);
left: 246px;
}
.s{
width: 6px;
height: 150px;
background: orange;
position: absolute;
transform-origin: 50% 130px;
top: 120px;
transform: rotate(20deg);
left: 247px;
}
.point{
width: 10px;
height: 10px;
background: black;
border-radius: 50%;
position: absolute;
top: 245px;
left: 245px;
}
</style>
</head>
<body>
<div class="wrap">

</div>
<script type="text/javascript">
  var wrap=document.querySelector('.wrap');
  for (var i = 1; i < 31; i++) {
    var needle=document.createElement('div');
    needle.className='needle';
    needle.style.transform='rotate('+i*6+'deg)';
    wrap.appendChild(needle);
    if (i%5==0) {
      needle.className='needle2';
      var times=document.createElement('div');
      times.className='times';
      // times.style.transform='rotate('+i+'deg)'
      needle.appendChild(times);
      for (var j = 0; j < 2; j++) {
        var square=document.createElement('div');
        square.className='square';
        square.style.transform='rotate(-'+(i+15)*6+'deg)'
        square.innerHTML=i/5;
        if (j==1) {
          square.innerHTML=i/5+6;
          square.style.left='370px';
        }
        times.appendChild(square);
      }
    }
  }
  var h=document.createElement('div');
  h.className='h';
  wrap.appendChild(h);
  var m=document.createElement('div');
  m.className='m';
  wrap.appendChild(m);
  var s=document.createElement('div');
  s.className='s';
  wrap.appendChild(s);
  var point=document.createElement('div');
  point.className='point';
  wrap.appendChild(point);
  function move(){
    var timer=new Date();
    var hh=timer.getHours();
    var mm=timer.getMinutes();
    var ss=timer.getSeconds();
    hoursDeg=(hh*360/12)+(30/60*mm);
    minutesDeg=(mm*360/60)+(360/60/60*ss);
    h.style.transform='rotate('+hoursDeg+'deg)';
    m.style.transform='rotate('+minutesDeg+'deg)';
    s.style.transform='rotate('+ss*6+'deghttp://www.9ask.cn/xiamen/)';
  }
  setInterval(move,1000);
</script>

</body>
</html>

暂无回复,说出你的观点吧
登录后即可参与回复