javascript - chrome的奇怪行为
问题描述
该代码适用于 Microsoft Edge,但在 Chrome 中,秒针会在一秒钟后恢复。当第一次增量发生时,似乎 secondHand 变量不会受到影响。但是,每当我使用开发工具进行调试时,它都可以完美运行。是否有任何浏览器问题无法按预期呈现?
let hourHand = document.querySelector('.hour');
let minuteHand = document.querySelector('.minute');
let secondHand = document.querySelector('.second');
let intialHourHandPosition = (new Date().getHours())*30-90;
let intialMinuteHandPosition = (new Date().getMinutes())*6-90;
let intialSecondHandPosition = (new Date().getSeconds())*6-90;
hourHand.style.transform = `rotate(${intialHourHandPosition}deg)`;
minuteHand.style.transform = `rotate(${intialMinuteHandPosition}deg)`;
secondHand.style.transform = `rotate(${intialSecondHandPosition}deg)`;
function timer(){
hourHand.style.transform = `rotate(${intialHourHandPosition+=(30/3600)}deg)`;
minuteHand.style.transform = `rotate(${intialMinuteHandPosition+=(6/60)}deg)`;
secondHand.style.transform = `rotate(${intialSecondHandPosition+=6}deg)`;
}
setTimeout(()=>{secondHand.style.transition = 'transform 1s linear';
hourHand.style.transform = `rotate(${intialHourHandPosition+=(30/3600)}deg)`;
minuteHand.style.transform = `rotate(${intialMinuteHandPosition+=(6/60)}deg)`;
secondHand.style.transform = `rotate(${intialSecondHandPosition+=6}deg)`;
},0)
setInterval(timer,1000)
*{
width: 100%;
height: 100%;
}
.clockContainer{
top: 20%;
width: 400px;
height: 350px;
margin:auto;
position: relative;
}
.clockContainer img{
width: 100%;
height: 100%;
display: block;
box-shadow: 0 0 5px gray;
border-radius: 50%;
}
.handHolder{
height: 25px;
width: 25px;
border-radius: 50%;
background-color: rgb(0, 0, 0);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-40%);
}
.hour{
position: absolute;
height: 10px;
width: 20%;
background-color: black;
top: 50%;
left: 50%;
transform-origin: 0%;
border-radius: 0 50% 50% 0;
}
.minute{
position: absolute;
height: 5px;
width: 25%;
background-color: rgb(0, 0, 0);
top: 50%;
left: 50%;
transform-origin: 0%;
border-radius: 0 50% 50% 0;
}
.second{
position: absolute;
height: 2px;
width: 30%;
top: 50%;
left: 50%;
transform-origin: 0%;
background-color: black;
border-radius: 0 50% 50% 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="clockContainer">
<img src="clock.jpg" >
<div class="handHolder"></div>
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
</div>
</body>
</html>
解决方案
推荐阅读
- reactjs - 为什么需要 npm serve 或 express 服务器来将 create-react-app 生产构建部署到 heroku 云服务器?
- r - ggplot2 - 如何将比例标签添加到堆叠比例条形图?
- python - 检查熊猫数据框列中的值是否为整数,如果不是则将其写入列表
- php - 如何正确地将我的 PHP 文件链接到我的 CSS
- python - 如何确定字节是 utf-8 还是 utf-16
- python - 替换或交换 3 个列表以创建单个列表/数组
- r - 如何在我的热图上分配 9 列特定颜色的独立渐变?
- c# - 如何解决:下载多个电子表格文件时,该进程无法访问文件“**”,因为它正被另一个进程使用
- django - Embed plotly:dash figure inside django template
- javascript - iPhone / iPad - 终止应用程序时未保存 Safari 浏览器 cookie