<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html,
body {
height: 100%;
width: 100%;
background-color: antiquewhite;
}
.wrap {
width: 500px;
height: 500px;
background-color: white;
margin: 100px auto;
position: relative;
border-radius: 50%;
/* z-index: 10; */
}
.wrap .num-wrap {
width: 100%;
height: 100%;
background-color: white;
border-radius: 50%;
position: absolute;
/* z-index: 10; */
}
.wrap .num-wrap .num {
height: 50px;
width: 50px;
/* display: block; */
font-size: 20px;
text-align: center;
line-height: 50px;
/* background-color: rosybrown; */
position: absolute;
top: 225px;
left: 225px;
}
.wrap .pointer-wrap {
width: 100%;
height: 100%;
position: absolute;
}
/* 旋转中心 x= width/2 y= height-width/2 */
/* top = 250-(height-width/2) left = 250 - width/2 这里的height和width是指针的宽高*/
#seconds {
width: 4px;
height: 200px;
background-color: black;
position: absolute;
top: 52px;
left: 248px;
border-radius: 100px;
/* transform: rotate(10deg); */
transform-origin: 2px 198px;
}
#min {
border-radius: 100px;
width: 8px;
height: 160px;
background-color: black;
position: absolute;
top: 94px;
left: 246px;
/* transform: rotate(10deg); */
transform-origin: 4px 156px;
}
#hours {
border-radius: 100px;
width: 10px;
height: 100px;
background-color: black;
position: absolute;
top: 155px;
left: 245px;
transform-origin: 5px 95px;
}
.date-wrap{
height: 30px;
width: 150px;
background-color: white;
position: absolute;
top: 260px;
left: 175px;
line-height: 30px;
text-align: center;
font-size: 18px;
}
.day-wrap{
height: 30px;
width: 30px;
background-color: rgb(200,225,225);
position: absolute;
top: 320px;
left: 300px;
line-height: 30px;
font-size: 18px;
text-align: center;
}
</style>
</head>
<body>
<div class="wrap">
<div class="num-wrap">
<span class="num">12</span>
<span class="num">1</span>
<span class="num">2</span>
<span class="num">3</span>
<span class="num">4</span>
<span class="num">5</span>
<span class="num">6</span>
<span class="num">7</span>
<span class="num">8</span>
<span class="num">9</span>
<span class="num">10</span>
<span class="num">11</span>
</div>
<div class="pointer-wrap">
<div class="date-wrap">
</div>
<div class="day-wrap">
</div>
<div id="seconds">
</div>
<div id="min">
</div>
<div id="hours">
</div>
</div>
</div>
<script type="text/javascript">
var r = 230
var nums = document.getElementsByClassName('num')
for (var i = 0; i < nums.length; i++) {
var y = 0,
x = 0
y = -r * Math.cos(i * (Math.PI / 6))
var x = r * Math.sin(i * (Math.PI / 6))
nums[i].style.transform = 'translateY(' + y + 'px)' + ' ' + 'translateX(' + x + 'px)'
}
var sPointer = document.getElementById('seconds')
var mPointer = document.getElementById('min')
var hPointer = document.getElementById('hours')
var setPonter = function() {
var now = new Date()
var h = now.getHours()
var m = now.getMinutes()
var s = now.getSeconds()
sPointer.style.transform = 'rotate(' + 6 * s + 'deg)'
var mDeg = m / 60 * 360 + s / 60 * 360 / 60
mPointer.style.transform = 'rotate(' + mDeg + 'deg)'
var hDeg = (h - 12) * 30 + m / 2
hPointer.style.transform = 'rotate(' + hDeg + 'deg)'
}
setInterval(function() {
setPonter()
}, 100)
// var date1 = function(){
// var theDate = new Date(theTime)
// var year = theDate.getFullYear()
// var month = theDate.getMonth() + 1
// var date = theDate.getDate()
// var theDate = document.getElementsByClassName('date-wrap')[0]
// var dateStr = year + '年' + month + '月' + date + '日 '
// theDate.innerHTML = dataStr
// }
var nowDate =document.getElementsByClassName('date-wrap')[0]
var nian =new Date().getFullYear()
var yue = new Date().getMonth()+1
var ri = new Date().getDate()
nowDate.innerHTML= nian+'年'+yue + '月'+ri+'日'
var nowDay = document.getElementsByClassName('day-wrap')[0]
var day = new Date().getDay()
nowDay.innerHTML = day
</script>
</body>
</html>
