业余娱乐,手写时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://j.dyrs.cc/static/pc/scripts/jquery.min.js?20181030"></script>
</head>
<style>
.main {
position: relative;
width: 600px;
height: 600px;
margin: 50px auto;
border: #000 solid 1px;
border-radius: 100%;
}
.main i.num {
position: absolute;
left: 275px;
display: block;
width: 50px;
height: 60px;
color: #333;
font-size: 36px;
font-family: '华文行楷';
font-family: '华文彩云';
font-style: normal;
line-height: 80px;
text-align: center;
transform-origin: center 300px;
}
.main i.hour {
position: absolute;
left: 298px;
display: block;
width: 4px;
height: 20px;
background-color: #333;
transform-origin: center 300px;
}
.main i.mou {
position: absolute;
left: 299px;
display: block;
width: 2px;
height: 10px;
background-color: #666;
transform-origin: center 300px;
}
.dian {
position: absolute;
top: 50%;
left: 50%;
z-index: 9;
width: 16px;
height: 16px;
background-color: rgb(125, 125, 129);
border-radius: 100%;
transform: translate(-50%, -50%);
}
.shi {
position: absolute;
top: 200px;
left: 297px;
width: 6px;
height: 100px;
background-color: #000;
border-radius: 3px 3px 0 0;
transform-origin: center bottom;
}
.fen {
position: absolute;
top: 150px;
left: 298px;
width: 4px;
height: 150px;
background-color: #333;
border-radius: 2px 2px 0 0;
transform-origin: center bottom;
}
.miao {
position: absolute;
top: 100px;
left: 299px;
width: 2px;
height: 200px;
background-color: red;
border-radius: 3px 3px 0 0;
transform-origin: center bottom;
}
p {
position: absolute;
top: 450px;
width: 100%;
font-size: 24px;
font-family: '华文彩云';
text-align: center;
}
</style>
<body>
<div class="main">
<div class="shi"></div>
<div class="fen"></div>
<div class="miao"></div>
<div class="dian"></div>
<p>Made In MengJia</p>
</div>
</body>
<script>
for(var i=0;i<12;i++){
$('.main').append($('<i class="num" style="transform: rotate('+i*30+'deg)"><span style="display:block;transform: rotate('+(-i*30)+'deg)">'+(i==0?12:i)+'</span></i>'))
$('.main').append($('<i class="hour" style="transform: rotate('+i*30+'deg)"></i>'))
}
for(var i=0;i<60;i++){
$('.main').append($('<i class="mou" style="transform: rotate('+i*6+'deg)"></i>'))
}
var miao = 0
setInterval(function(){
var myDate = new Date(); //实例一个时间对象;
var shi = myDate.getHours()>12?myDate.getHours()-12:myDate.getHours(); //获取系统时,
var fen = myDate.getMinutes(); //分
var miao = myDate.getSeconds(); //秒
$('.shi').css('transform',"rotate("+(shi*30+parseInt(fen/60*30))+"deg)")
$('.fen').css('transform',"rotate("+(fen*6+parseInt(miao/60*6))+"deg)")
$('.miao').css('transform',"rotate("+miao*6+"deg)")
},1000)
</script>
</html>
效果图
纯属娱乐…