时钟 css3

原创 2016年08月30日 19:30:26
  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
  #wrap{width: 200px;height: 200px;border: 10px solid black;border-radius: 50%;position: relative;}
  #kedu{width: 200px;height: 200px;position: relative;}
  #kedu div{width: 20px;height: 100px;position: absolute;
  transform-origin: bottom center;
  }
  span{display: block;text-align: center;}
  #hour{width: 8px;height: 50px;background: black;position: absolute;left:100px;top: 50px;
  transform-origin: bottom center;}
  #min{width: 6px;height: 70px;background: cyan;position: absolute;left:100px;top: 30px;
  transform-origin: bottom center;}
  #second{width: 4px;height: 90px;background: pink;position: absolute;left:100px;top: 10px;
  transform-origin: bottom center;}
  </style>
  </head>
  <body>
  <div id="wrap">
  <div id="kedu">
  <div><span>12</span></div>
  <div><span>1</span></div>
  <div><span>2</span></div>
  <div><span>3</span></div>
  <div><span>4</span></div>
  <div><span>5</span></div>
  <div><span>6</span></div>
  <div><span>7</span></div>
  <div><span>8</span></div>
  <div><span>9</span></div>
  <div><span>10</span></div>
  <div><span>11</span></div>
  </div>
  <div id="hour"></div>
  <div id="min"></div>
  <div id="second"></div>
  </div>
  </body>
  <script type="text/javascript">
  var kedu = document.getElementById('kedu');
  var kedus = kedu.getElementsByTagName('div');
  var spans = document.querySelectorAll('span');
  var hourDiv = document.getElementById('hour');
  var minDiv = document.getElementById('min');
  var secondDiv = document.getElementById('second');
  for (var i = 0; i < kedus.length; i++) {
  kedus[i].style.transform = 'translateX(90px) rotateZ('+ i*30 +'deg)';
  spans[i].style.transform = 'rotateZ('+ -i*30 +'deg)';
  }
   
  function setPointers(){
  //获取当前的小时
  var newDate = new Date();
  var hour = newDate.getHours()%12;
  var min = newDate.getMinutes();
  hourDiv.style.transform = 'rotateZ('+ (hour*30+min*0.5) +'deg)';
   
  //获取当前的分钟设置给指针
  minDiv.style.transform = 'rotateZ('+ min*6 +'deg)';
   
  //获取当前的秒数设置给指针
  var second = newDate.getSeconds();
  secondDiv.style.transform = 'rotateZ('+ second*6 +'deg)';
  }
  setPointers();
   
   
  setInterval(function(){
  setPointers();
  },1000);
   
   
  </script>
  </html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

纯css3实现圆盘时钟动画效果

先让我们来看下整体效果,请看下图:作为小白的我,看到别人写的钟表特效有点心动,于是自己也动手写了一个,主要是为了练练脑子,接下来直接看代码:html: css样式:.t2{ width: 100%;...

如何用jQuery和CSS3制作数字时钟

这要从上周开始说起,当我看到 漂亮的 dribbble 截图,就立刻感觉到一种要将其转变为一个可工作的时钟,并且和本站读者分享的欲望。 如果你想了解如何制作它,请继续阅读! DEMO DOWNL...

炫酷时钟(css3+js)

html css *{ margin: 0; padding: 0; ...

css3小应用—时钟制作

无标题文档 #wrap { w

CSS3--利用transform属性制作时钟效果

首先简单总结一下transform这个属性,transform的含义是:改变,使…变形;转换。 transform的常用属性:        1)rotate()  旋转函数 取值度数     ...

js+css3实现动态时钟-------Day66

实现动态时钟,在资源中已经上传...

时钟dome,css3

time .container{ width:500px;  height:400px;  margin:0px auto; } .show_time{ width:300px;...
  • webAG
  • webAG
  • 2016-07-07 17:41
  • 58

css3+js+html实现模拟时钟

border *{ margin:0; padding:0; } .one{ width:300px; height:300px; text-align: center;...

纯html、css3、js的时钟

基于原生js和css3的时钟

css3+js 实现时钟效果

css3+js 实现时钟效果
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)