学习前端没一周，用简单的HTML 和css js 做的
clock
* {
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;
}
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);//循环 总比系统时间慢一秒！！不管了！
如果觉得《java表盘时钟的设计思路_初学js 自制表盘时钟很简单》对你有帮助，请点赞、收藏，并留下你的观点哦！
