html+css+js制作简单钟表
各位慕课网的小伙伴们大家好，今天为大家带来一款由HTMLCSSJS编写的钟表。主要面向前端初学者。
话不多说，惯例，先上最终效果和html代码方便讲解
<body>
<div class="mainclock" id="mainclock">//主容器，是一个圆形
<div class="yuandian" id="yuandian">//中心的黑色原点
</div>
<div class="kedupan">//刻度盘容器，单纯的包裹元素，没有样式
<div class="kedu">//刻度模版容器
<div class="kedu_i"></div>//刻度，包含一个黑色矩形背景图片，作为刻度
</div>
</div>
<div class="numpan">//数字包裹容器，也是没有样式的
<div class="num">//数字模版容器
<div class="num_i"></div>//数字，将来会在其内加入一个数字
</div>
</div>
<div class="zhizhen" id="shizhen">//时针容器
<div id="shizhen1"></div>//时针的屁股
<div id="shizhen2"></div>//时针的头
</div>
<div class="zhizhen" id="fenzhen">//分针
<div id="fenzhen1"></div>
<div id="fenzhen2"></div>
</div>
<div class="zhizhen" id="miaozhen">//秒针
<div id="miaozhen1"></div>
<div id="miaozhen2"></div>
</div>
</div>
</body>各元素容器样式介绍/
1 div.mainclock
.mainclock{
width:400px;
height:400px;
border:1px solid #000;
position:absolute;
left:1300px;
margin-left:-200px;
top:100px;
border-radius:200px;
background:#fff;
}主要是一个border-radius的应用，让圆角半径=div宽高的一半，div就会变成一个圆2 div.yuandian
.mainclock .yuandian{
width:20px;
height:20px;
background:#000;
border-radius:10px;
position:absolute;
top:50%;
left:50%;
margin:-10px 0 0 -10px;
z-index:999;
}同理，设置border-radius让div变成圆形；
设置绝对定位，top、left为50%，margin上和左分别为宽高一半的负值，可以水平垂直居中该div；
设置一个高的z-index，因为该原点以后将覆盖3个指针，你可以看看你家的表，是不是这样。3 div.kedu div.kedu_i
.mainclock .num,
.mainclock .kedu,
.mainclock .zhizhen{
width:2px;
height:10px;
position:absolute;
top:200px;
left:200px;
margin-left:-1px;
margin-top:-5px;
transform:rotate(0deg);
}
.mainclock .kedu .kedu_i{
width:10px;
height:12px;
position:absolute;
left:1px;
bottom:185px;
margin-left:-5px;
background:url(../img/kedu.jpg) no-repeat scroll -40px -10px;
}单纯的看div.kedu的样式，其实和原点的样式是一致的，只不过.kedu是一个2×10的透明矩形，通过绝对定位让其相对于父元素div.mainclock水平垂直居中。给一个旋转角度0度。 div.kedu的作用是个div.kedu_i提供定位；
div.kedu同样是一个透明矩形，绝对定位于父元素div.kedu的头顶185px的位置，并相对父元素水平居中，其内是一个背景图片，一种是大刻度5的倍数，一种小刻度是其余刻度，这里用到spirit图，改变定位就可以改变显示不同的图片。4 div.num div.num_i
.mainclock .num .num_i{
width:40px;
height:35px;
position:absolute;
left:1px;
bottom:145px;
margin-left:-20px;
text-align:center;
font-size:30px;
}div.num和上面的div.kedu是一个样式，因为它仅仅是为div.num_i提供一个包裹和定位作用；
div.num_i和前面的div.kedu_i也是差不多的，不同在于bottom值变下了，相对位置变的更接近中心。其内，将来会用JS写入数字。5 div.zhizhen div#shizhen1 div#shizhen2
#shizhen1{
width:10px;
height:60px;
background:#096;
position:absolute;
top:5px;
left:1px;
margin-left:-5px;
margin-top:-40px;
z-index:10;
border-radius:5px;
}
#shizhen2{
position:absolute;
width:0;
height:0;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-bottom:50px solid #096;
bottom:45px;
left:-4px;
z-index:10;
}div.zhizhen和前面的div.kedu一样，提供子元素的包裹和定位作用；
时针屁股div#shizhen1，绝对定位让其相对原点位置水平居中，垂直位置，通过控制margin-top调整，给一个z-index=10，为了和分针秒针区分位置。给一个圆角，让其更像屁股；
时针头div#shizhen2,绝对定位让其相对原点位置水平居中，垂直位置，通过控制margin-top调整，注意这里的头是一个三角形，关于如何制作三角形，这里就不赘述了，百度轻易就可获得。6 div#fenzhen和miaozhen这里也不赘述了，和时针差不多，只是大小、位置和z-index有区别。
JS代码部分/
1 几个要用到的通用函数定义
function g(id){//通用获取已知id或classname的元素
if(id.substr(0,1)=='.'){
return document.getElementsByClassName(id.substr(1));
}
return document.getElementById(id);
}
function g2(div,classname){//获取某个已知id的元素下，某个classname的元素
return g(div).getElementsByClassName(classname.substr(1));
}g()等价于jq中的$(id)和$(classname);
g2()等价于jq中的$('id classname');
function addelem(div,classname,k,index){//获取模版（div下的classname），复制k个模版，并将第一个index替换为0-k的顺序数
var out_turn=[];
for(var i=0;i<k;i++){
var _html=g2(div,classname)[0].innerHTML.replace(index,i)
.replace(/^\s*/,'')
.replace(/\s*$/,'');;//去除模版元素前后的空格
out_turn.push(_html);
}
g2(div,classname)[0].innerHTML=out_turn.join('');
}2 60个刻度以及12个数字的生成
addelem('mainclock','.kedupan',60,'{{}}');//获取#mainclock下.kedupan的内容为模版，复制60个，并替换{{}}为顺序值，这里没有需要替换的，因为正则{{}}实际上不会替换任何元素
addelem('mainclock','.numpan',12,'{{}}');//同理，生成12个数字元素，但此时里面还是没数字的。3 周向排列刻度盘
function circle(id,classname,n){//使id元素下所有classname元素成圆周向排列
var html=[];
html=g2(id,classname);
for(var i=0;i<html.length;i++){
var _deg=+360/n*i;
var _tran='rotate('+_deg+'deg)';
html[i].style.transform=_tran;//遍历60个刻度容器，每个依次选择6°
if(i%5===0){//如果是5的倍数，说明是大刻度，改变背景，显示大刻度
html[i].getElementsByClassName('kedu_i')[0].style.background='url(img/kedu.jpg) no-repeat scroll -7px -6px';
}
}
}
circle('mainclock','.kedu',60);这样就把addelem加载的60个刻度，呈周向排列了，并且5的备注替换了大刻度。4 周向排列数字盘，并写入数字
function circle2(id,classname,n){//使id元素下所有classname元素成圆周向排列
var html=[];
html=g2(id,classname);
for(var i=0;i<html.length;i++){
var _deg=+360/n*i;
var _tran='rotate('+_deg+'deg)';
html[i].style.transform=_tran;//让每个数字多选择30°
html[i].getElementsByClassName('num_i')[0].innerHTML=1+(11+i)%12;//为每个数字盘里填入数字，注意这个表达式的写法，因为i=0时数字填12，i=1时数字填1。
if(i>3&&i<9){//位于表盘下半部的数字，倒过来了，我们再把它旋转180，让数字正过来。
html[i].getElementsByClassName('num_i')[0].style.transform='rotate(180deg)';
}
}
}circle2('mainclock','.num',12);这样就把addelem加载的12个数字，呈周向排列，并填入了数字。5 最后我们让指针动起来
function clock(){
var myDate=new Date();//获取当前日期对象
var hour=myDate.getHours();//获取小时
var minute=myDate.getMinutes();//获取分钟
var sec=myDate.getSeconds();//获取秒针
var tran_miao='rotate('+6*sec+'deg)';//计算秒针旋转角度和transform样式
var tran_fen=6*minute+0.1*sec;//计算分针旋转角度
tran_fen='rotate('+tran_fen+'deg)';//定义分针的transform样式
var tran_hour=30*hour+0.5*minute;//计算时针旋转角度
tran_hour='rotate('+tran_hour+'deg)';//定义时针的transform样式
g('miaozhen').style.transform=tran_miao;//旋转秒针
g('fenzhen').style.transform=tran_fen;//旋转分针
g('shizhen').style.transform=tran_hour;//旋转时针
}clock();//页面加载完成后立即执行一次指针旋转函数
setInterval("clock();",1000);//每1S循环执行一次指针旋转整个钟表到这里就完成，小伙伴们，好不好玩！
点击查看更多内容
67人点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦