methods:{
timepiece(){
//获取当前的时分秒
let date=new Date();
let hours=date.getHours();//获取小时
let minutes=date.getMinutes();//获取分钟
let seconds=date.getSeconds();//获取秒
//获取时分秒所在的角度
let hoursDeg=((hours*3600+60*minutes+seconds)/(3600*12))*360;//获取时针的角度
let minutesDeg=((minutes*60+seconds)/3600)*360;//获取分针的角度
let secondsDeg=(360/60)*seconds;//获取秒针的角度
let styleSheets= document.styleSheets[0];//获取样式列表
//时针
styleSheets.insertRule(
"@keyframes timepiece {0%{transform: rotate(" +
hoursDeg+
"deg);}100%{transform: rotate(" +
(hoursDeg+360)+
"deg);}}"
);
//分针
styleSheets.insertRule(
"@keyframes timepiece1 {0%{transform: rotate(" +
minutes+
"deg);}100%{transform: rotate(" +
(minutes+360)+
"deg);}}"
);
//秒针
styleSheets.insertRule(
"@keyframes timepiece2 {0%{transform: rotate(" +
seconds+
"deg);}100%{transform: rotate(" +
(seconds+360)+
"deg);}}"
);
}
}
最后在样式中添加 时针 animation: timepiece 86400s linear infinite; 分针 animation: timepiece1 3600s linear infinite; 秒针 animation: timepiece2 60s infinite steps(60); 设置旋转的中心点为中间底部 transform-origin: center bottom;`
