您的位置：首页 > Web前端 > JavaScript

DIY旋转时钟

2016-12-06 17:12 267 查看

纯css，原生js编写旋转指针时钟，附详细讲解

/*html代码*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DIY旋转时钟</title>
<link rel="stylesheet" href="DIYclock.css">
<script src="DIYclock.js"></script>
</head>
<body>
<div>DIY旋转时钟</div>
<div class="box">
<div id="clock" class="clock">
<div id="center" class="center"></div>
<div id="center-01" class="center-01"></div>
<div id="date" class="date"></div>
<div id="hour" class="hour"></div>
<div id="min" class="min"></div>
<div id="sec" class="sec"></div>
</div>
</div>
</body>
</html>

这里是钟表的外观，主要用了css一些属性，可以根据自己喜欢的制作不同外观的钟表

/*css代码片*/
body{
background:linear-gradient(to right,lightgoldenrodyellow,pink,lightskyblue );
margin:0;
}
.box{
width:340px;
height:340px;
border:1px solid black;
position: relative;
border-radius:25%;
margin:200px auto;
background-color: white;
box-shadow: 1px 1px 40px rgba(0,0,0,0.5);
background:-webkit-radial-gradient(center center,circle,lawngreen,white);
}
.clock{
width:300px;
height:300px;
border:1px solid black;
position:absolute;
border-radius:25%;
top:20px;
left:20px;
box-shadow:inset 1px 1px 40px rgba(0,0,0,0.5);
background:-webkit-radial-gradient(center center,circle,white,lawngreen);
}
.center{
position: absolute;
top:50%;
left:50%;
width:30px;
height:30px;
border:1px solid black;
background-color:lightgreen;
border-radius:60% 20%;
margin:-17px 0 0 -17px;
}
.center-01{
position: absolute;
top:50%;
left:50%;
width:12px;
height:12px;
background-color: red;
border-radius: 50%;
margin:-7px 0 0 -7px;
z-index:10;
}
.date{
position: absolute;
color: #000;
font-size: 20px;
text-shadow: 1px 1px 1px black;
top:70%;
left:25%;
}
.hour{
z-index: 3;
position: absolute;
top:50%;
left: 50%;
width:100px;
height:6px;
background-color: black;
margin:-3px 0 0 -3px;
-webkit-transform-origin: 3px 50%;
}
.min{
z-index: 4;
position: absolute;
top:50%;
left:50%;
width:120px;
height: 4px;
background-color: black;
margin:-2px 0 0 -2px;
-webkit-transform-origin: 2px 50%;
}
.sec{
z-index:5;
position: absolute;
top:50%;
left:50%;
width:170px;
height:2px;
background-color:red;
margin:-1px 0 0 -20px;
-webkit-transform-origin: 20px 50%;
}

.clock em{
z-index:2;
display: block;
position: absolute;
width:3px;
height:3px;
border-radius: 30%;
top:0;
left:0;
margin-left: -1px;
background-color: black;
transform-origin:50% 0;

}
.clock em.isHour{
width:6px;
height:8px;
border-radius: 30%;
background-color: black;

}
.clock em.isHour i{
position: absolute;
font-size: 30px;
margin: 6px 0 0 -3px;
font-family: Corbel,sans-serif;
}

/*js代码片*/

window.onload=function(){
var winHeight=document.documentElement.clientHeight;
document.getElementsByTagName("body")[0].style.height=winHeight+"px";

var oClock=document.getElementById("clock"),
oDate=document.getElementById("date"),
oHour=document.getElementById("hour"),
oMin=document.getElementById("min"),
oSec=document.getElementById("sec"),
em=document.createElement("em");/*创建新元素em，就是后面表盘上出现的那一圈小点点*/

/*绘制表盘上的分针秒针所走的每一个点，也就是60个小点*/
for (var i=1;i<61;i++)
{
var temp=em.cloneNode(),
pos=getPose(i);//获取点点们的位置
if(i%5==0)/*表盘上间隔5个小格处的位置是一个时刻点，i%5==0用来来判断是否是时刻点*/
{
temp.className="isHour";/*余数为0，使其类名为isHour，在css中设置了样式*/
temp.innerHTML="<i style='-webkit-transform: rotate("+(-i)*6+"deg);'>"+i/5+"</i>" /*表盘上的数字*//*6以及后面的6都是这样计算得来的：表盘一圈是360°，一共有60个小格，所以1小格代表的是6°，i/5表示的小时数，譬如：当i=60时，这是就是12点对应的数字*/
}
temp.style.cssText="left:"+pos.x+"px;top:"+pos.y+"px;-webkit-transform:rotate("+(i*6)+"deg);"
oClock.appendChild(temp);/*千万不要忘记把创建好的元素放进其父元素里*/
}
/*获取点的坐标*/
function getPose(dep){
var rad=(Math.PI/180)*dep*6,/*1度代表的圆周率*1小格的度数*格数*/
r=150;/*我这里让其半径为150*/
return {
x:Math.floor(r+r*Math.sin(rad)),
y:Math.floor(r-r*Math.cos(rad))/*极坐标与直角坐标的转换*/

db57
}
}

/*获取时间*/
function currentTime(){
var nowTime=new Date();
var year=nowTime.getFullYear(),
month=nowTime.getMonth()+ 1,
date=nowTime.getDate(),
day=nowTime.getDay(),
h=nowTime.getHours(),
m=nowTime.getMinutes(),
s=nowTime.getSeconds();/*获取年，月，日，时，分，秒*/
/*把天数转换星期*/
day=(day==0)?7:day;
if(day==1){
day="一"
}
if(day==2){
day="二";
}
if(day==3){
day="三";
}
if(day==4){
day="四";
}
if(day==5){
day="五";
}
if(day==6){
day="六";
}
if(day==7){
day="日";
}
oDate.innerHTML=year+"-"+month+"-"+date+" 星期"+day;

/*让时针，分针，秒针走起来*/
function goTime(){
var h_dep=0;
s++;
if(s==69)/*秒针走完60下时，分针走一下，同时秒针从开始重新计时，下面同理*/
{
s=0;
m++;
}
if(m==60){
m=0;
h++;
}
if(h>12){
h=h-12;
}
h_dep=Math.floor(m/12*6);/*时针偏移距离*/
oHour.style.cssText="-webkit-transform:rotate("+(h*30-90+h_dep)+"deg);";/*90是初始的位置*/
oMin.style.cssText="-webkit-transform:rotate("+(m*6-90)+"deg);";
oSec.style.cssText="-webkit-transform:rotate("+(s*6-90)+"deg);";

}
goTime();
}
currentTime();
setInterval(currentTime,1000);/*设置定时器，每秒获取一次时间*/

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css javascript 时钟

相关文章推荐

新的分享

章节导航