// 父组件
<Clock width=300 height=300></Clock>
<div class='myClock' :style="{ width: width + 'px', height: height + 'px' }">
<div id="num" class="num"></div>
<ul id="scale">
</ul>
<div id="hour"></div>
<div id="min"></div>
<div id="second"></div>
<div id="ball"></div>
</div>
const props = defineProps({
width: {
type: String,
default: 300
},
height: {
type: String,
default: 300
}
})
let timer = null
// 12~11时间函数
function timeNum() {
const num = document.querySelector('#num') as HTMLElement
let arr = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
for (let i = 0; i < 12; i++) {
const li = document.createElement('div');
li.innerHTML = `${arr[i]}`;
const t = (Math.PI / 180) * 30
console.log(Number(props.width + 40) / 2);
let x = Math.sin(i * t) * (Number(props.width) + 40) / 2
let y = -Math.cos(i * t) * (Number(props.width) + 40) / 2
console.log(y);
li.style.transform = `translate(${x - 10}px,${y - 10}px)`
num.appendChild(li)
}
}
onMounted(() => {
const scale = document.querySelector('#scale') as HTMLElement
const hour = document.querySelector('#hour') as HTMLElement
const min = document.querySelector('#min') as HTMLElement
const second = document.querySelector('#second') as HTMLElement
scale.style.setProperty('--width', Math.floor(Number(props.width) / 2) + 'px')
timeNum()
for (let i = 0; i < 60; i++) {
const li = document.createElement('li');
li.style.transform = `rotate(${i * 6}deg)`;
if (i % 5 === 0) {
li.style.height = '15px';
}
scale?.appendChild(li);
}
function run() {
const data = new Date()
const h = data.getHours()
const m = data.getMinutes()
const s = data.getSeconds()
hour.style.transform = `rotate(${(h + data.getMinutes() / 60) * 30}deg)`
min.style.transform = `rotate(${m * 6}deg)`
second.style.transform = `rotate(${s * 6}deg)`
}
run()
timer = setInterval(run, 1000)
})
onUnmounted(() => {
timer = null
})
<style scope lang="scss">
.myClock {
position: relative;
margin: 100px auto;
border-radius: 50%;
border: 5px solid #000;
}
ul {
width: 100%;
height: 100%;
position: relative;
margin: 0;
padding: 0;
}
ul li {
list-style: none;
position: absolute;
left: 49.6%;
top: 0;
height: 8px;
background-color: #000;
width: 2px;
transform-origin: center var(--width);
}
.num {
position: absolute;
left: 50%;
top: 50%;
div {
position: absolute;
}
}
#hour,
#min,
#second {
position: absolute;
background-color: #000;
left: 50%;
top: 50%;
transform-origin: center bottom;
}
#hour {
height: 50px;
width: 5px;
margin: -50px 0 0 -2.5px;
}
#min {
height: 70px;
width: 4px;
margin: -70px 0 0 -2px;
}
#second {
height: 90px;
width: 3px;
margin: -90px 0 0 -1.5px;
}
#ball {
position: absolute;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background-color: #000;
top: 50%;
left: 50%;
border-radius: 50%;
}
</style>
12-24
11-15
2885
04-10
1594
06-01
413