指针时钟表的制作

最新推荐文章于 2024-07-16 17:56:11 发布

dianwei4104

最新推荐文章于 2024-07-16 17:56:11 发布

阅读量298

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/bodom-zhao/p/6179277.html

版权

觉得挺好玩的就做了一个，模拟指针表。就是这个样子：

额，请忽略这个配色，就是随意写的颜色，有点太ZF网站的风格了，有兴趣的可以自己设计个高大上的样式。

首先是搭建html：很简单

<body>
   <div id="wrap">
      <ul id="list"><li></li></ul>
 <div id="cir"></div>
 <div id="hour"></div>
 <div id="min"></div>
 <div id="sec"></div>
 </div>
</body>

分别是表盘、刻度、圆点、时针、分针、秒针
接下来就是样式，表盘wrap的样式首先是大小，圆角半径，边框线，定位

#wrap{width:200px;height:200px;margin:100px auto 0;border-radius: 50%;border:5px #FF1493 solid;position: relative;}

后边的也没什么可说的，都差不多，各位自己看就行了

#cir{width:10px;height:10px;background-color:#000000;border-radius:50%;position: absolute;top:95px;left:95px;}
#hour,#min,#sec{position: absolute;transform-origin: center bottom;}
#hour{width:8px;height:76px;background-color:#f00;top:24px;left:96px;}
#min{width:6px;height:80px;background-color:#0f0;top:20px;left:97px;}
#sec{width:2px;height:85px;background-color:#00f;top:15px;left:99px;}

主要就是设定合理的大小和让他们都归位，然后有一个需要特别说一下:

#list li{width:2px;height: 10px;position: absolute;top:0;left:100px;background-color: #000; transform-origin: center 99px;}

这个li，就是时间刻度，到时要用js动态生成加到ul里面，这里有个样式属性：transform-origin：x y；意思是：“设置旋转元素的基点位置”，我设置的是center 99px。

body #wrap li:nth-child(5n+1){height:14px;background-color: #FFA500;}

这个是设置整点的不同颜色，每隔5个旧改变一下样式。

然后就是javascript的部分了：
首先是取得我们需要操作的dom元素

window.onload=function(){
var oUl = document.getElementById("list");
var oCir = document.getElementById("cir");
var oHour = document.getElementById("hour");
var oMin = document.getElementById("min");
var oSec = document.getElementById("sec");
var oCss = document.getElementById("oCss");
var aLi = "";
var aCss = "";

这里就要动态添加事件刻度，并且让他每加一个就旋转6deg，因为360/60嘛。 

for(var i=0;i<60;i++){

aLi+="<li></li>";

aCss+="#wrap li:nth-child("+(i+1)+"){transform: rotate("+i*6+"deg);}"

  }

oUl.innerHTML+=aLi;

这里的oCss是<style>取得的id属性

oCss.innerHTML+=aCss;

后面这些就不多说了，获取时间时、分、秒；设定他们各自的旋转度数，然后隔一秒调用一次，完成。

function toTime(){

var myDate = new Date();

var iSec = myDate.getSeconds();

var iMin = myDate.getMinutes()+iSec/60;

var iHour = myDate.getHours()+iMin/60;

oHour.style.transform="rotate("+iHour*30+"deg)";

oMin.style.transform="rotate("+iMin*6+"deg)";

oSec.style.transform="rotate("+iSec*6+"deg)";

 }

toTime();

setInterval(toTime,1000)}

Save

转载于:https://www.cnblogs.com/bodom-zhao/p/6179277.html

dianwei4104

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
指针时钟表的制作

觉得挺好玩的就做了一个，模拟指针表。就是这个样子：额，请忽略这个配色，就是随意写的颜色，有点太ZF网站的风格了，有兴趣的可以自己设计个高大上的样式。首先是搭建html：很简单<body> <div id="wrap"> <ul id="list"><li></li></ul> ...
复制链接

扫一扫