h5+css+js实现一个时钟
实现一个时钟
在moyu的时候看到一个时钟, 得空想自己实现, 水平有限, 没有像大神一样只使用css和少量js就实现了, 用的笨方法,为了方便,引入了jquery
效果如下:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>timer</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
box-sizing: border-box;
}
.main {
width: 100vw;
height: 100vh;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
}
.origin_dot {
width: 30px;
height: 30px;
border-radius: 15px;
background-color: #fff;
position: relative;
}
.minute-line {
position: absolute;
display: inline-block;
width: 25px;
height: 2px;
background-color: #fff;
top: 15px;
left: 430px;
}
.rot {
transform-origin: -412px 0px;
}
.m-word {
position: absolute;
width: 38px;
height: 35px;
color: #fff;
display: inline-block;
top: -430px;
left: 0px;
font-size: 30px;
font-weight: 500;
}
.h-word {
position: absolute;
width: 70px;
height: 70px;
color: #fff;
top: -360px;
left: -28px;
font-size: 80px;
font-weight: 500;
display: inline-block;
}
.m-round {
display: inline-block;
position: absolute;
width: 650px;
height: 650px;
top: -311px;
left: -309px;
border-radius: 325px;
}
.minute-arrow {
display: inline-block;
width: 500px;
height: 6px;
background-color: #FA9F22;
position: absolute;
left: -44px;
top: 12px;
border-radius: 3px;
transform-origin: 59px 3px;
z-index: 100;
}
.minute-arrow-round {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 16px;
position: absolute;
border: 5px solid #FA9F22;
background-color: #89D9D6;
top: -10px;
left: 46px;
}
.fen-arrow {
position: absolute;
left: 0px;
top: 0px;
width: 425px;
height: 28px;
display: flex;
align-items: center;
justify-content: space-between;
transform-origin: 15px 14px;
z-index: 50;
}
.fen1 {
width: 28px;
height: 28px;
border-radius: 28px;
}
.fen2 {
display: inline-block;
position: absolute;
top: 8px;
left: 25px;
width: 40px;
height: 12px;
background-color: #fff;
}
.fen3 {
width: 363px;
height: 28px;
border-radius: 14px;
background-color: #fff;
}
.hour-arrow {
position: absolute;
left: 0px;
top: 0px;
width: 300px;
height: 28px;
transform-origin: 15px 15px;
z-index: 20;
}
.hour1 {
position: absolute;
width: 100px;
height: 12px;
left: 10px;
top: 9px;
border-radius: 12px;
background-color: #89D9D6;
}
.hour2 {
position: absolute;
width: 250px;
height: 28px;
display: inline-block;
border-radius: 28px;
right: 0px;
top: 0px;
background-color: #89D9D6;
}
</style>
</head>
<body>
<div class="main">
<div class="origin_dot">
<!-- 搞个圆形,用于标线 -->
<div class="m-round"></div>
<!-- 秒针 -->
<div class="minute-arrow">
<div class="minute-arrow-round"></div>
</div>
<!-- 分针 -->
<div class="fen-arrow">
<div class="fen1"></div>
<div class="fen2"></div>
<div class="fen3"></div>
</div>
<!-- 时针 -->
<div class="hour-arrow">
<div class="hour1"></div>
<div class="hour2"></div>
</div>
</div>
</div>
<script src="../dependence/jquery.js"></script>
<script>
const pobj = [
{
num: 60,
top: -430,
left: 0
},
{
num: 30,
top: 422,
left: 0
},
{
num: 5,
top: -374,
left: 220
},
{
num: 55,
top: -374,
left: -212
},
{
num: 10,
top: -213,
left: 367
},
{
num: 50,
top: -217,
left: -367
},
{
num: 15,
top: -4,
left: 423
},
{
num: 45,
top: -4,
left: -423
},
{
num: 20,
top: 210,
left: 374
},
{
num: 40,
top: 210,
left: -374
},
{
num: 25,
top: 365,
left: 217
},
{
num: 35,
top: 365,
left: -217
},
]
let second_angle = 0
let minute_angle = 0
let hour_angle = 0
let startTime = null
init()
function init() {
// 初始化分针的表盘 90 - 15
// 表盘的数字, 只用小时的
// 分针样式
drawMinuteLine()
drawMinuteNum()
drawHourNum()
getInitTime()
}
function drawMinuteLine() {
let html = ''
const minuteTimes = 60
for (let i = 0; i < minuteTimes; i++) {
html += tempMinute(i * 6)
}
$(".origin_dot").find(".minute-line").remove()
$(".origin_dot").append(html)
}
function drawMinuteNum() {
let html = ''
for (let i = 0; i < pobj.length; i++) {
const obj = pobj[i]
html += `<div class="m-word" style="top: ${obj.top}px;left: ${obj.left}px">${obj.num}</div>`
}
$(".origin_dot").find(".m-word").remove()
$(".origin_dot").append(html)
}
function drawHourNum() {
const hobj = [
{
num: 12,
top: -367,
left: -28
},
{
num: 6,
top: 284,
left: -10
},
{
num: 3,
top: -36,
left: 321
},
{
num: 9,
top: -36,
left: -330
},
{
num: 1,
top: -320,
left: 150
},
{
num: 11,
top: -322,
left: -185
},
{
num: 2,
top: -202,
left: 276
},
{
num: 10,
top: -200,
left: -318
},
{
num: 4,
top: 128,
left: 270
},
{
num: 8,
top: 128,
left: -281
},
{
num: 5,
top: 242,
left: 157
},
{
num: 7,
top: 244,
left: -167
},
]
let html = ''
hobj.forEach(item => {
html += `<div class="h-word" style="top:${item.top}px;left:${item.left}px">${item.num}</div>`
})
$(".origin_dot").find(".h-word").remove()
$(".origin_dot").append(html)
}
function tempMinute(num) {
if(num % 5 === 0) return ''
let temp = `<div class="minute-line" style="transform-origin: -412px 0px;transform: rotate(${num}deg)"></div>`
return temp
}
function getInitTime() {
startTime = new Date()
getSecondAngle()
}
function getSecondAngle() {
let hour = startTime.getHours()
let minute = startTime.getMinutes()
let second = startTime.getSeconds()
let mil = startTime.getMilliseconds()
second_angle = second * 6 - 90 + (mil * 6)/1000
minute_angle = minute * 6 - 90 + second/10 + mil/10000
hour_angle = hour * 30 - 90 + minute * 0.5 + second/120
$(".minute-arrow").css('transform', `rotate(${second_angle}deg)`)
$(".fen-arrow").css('transform', `rotate(${minute_angle}deg)`)
$(".hour-arrow").css('transform', `rotate(${hour_angle}deg)`)
setTimeout(() => {
let now = new Date()
if(now.getTime() != startTime.getTime()) {
startTime = new Date()
getSecondAngle()
}
}, 20);
}
function test() {
let now = new Date()
let second = now.getSeconds()
let mil = now.getMilliseconds()
console.log('mil', mil)
}
</script>
</body>
</html>
浙公网安备 33010602011771号