代码的 java 脚本部分有问题时针工作不正常。每 60 秒后旋转一次。还有，分针显示错误的时间。请检查 js 中编写的公式。我用过的公式也是 gfg 写的。请解释必要的变化。谢谢。
const secHand=document.querySelector('.second-hand');
const minhand=document.querySelector('.minute-hand');
const hrhand=document.querySelector('.hour-hand');
function setDate(){
const d=new Date();
const hr=d.getHours();
const m=d.getMinutes();
const sethrdeg= 30*hr + m/2;
hrhand.style.transform=`rotate(${sethrdeg}deg)`;
const seeg=6*m;
minhand.style.transform=`rotate(${seeg}deg)`;
const s=d.getSeconds();
const setsdeg=6*s;
secHand.style.transform=`rotate(${setsdeg}deg)`;
}
setInterval(setDate,1000);*{
background:url(https://images.unsplash.com/photo-1523821741446-edb2b68bb7a0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80);
margin: 0;
padding: 0;
font-family: Georgia, 'Times New Roman', Times, serif;
background-size: cover;
}
body{
display: flex;
height: 100vh;
align-items: center;
}
.clock{
border : 3px solid black;
border-radius: 50%;
padding: 5px;
position: relative;
left:30rem;
width: 25rem;
height: 25rem;
justify-content: center;
box-shadow:
0 0 0 4px rgba(0,0,0,0.1),
inset 0 0 0 3px #EFEFEF,
inset 0 0 10px black,
0 0 10px rgba(0,0,0,0.2);
}
.clock-face{
position :relative;
transform: translateY(-3px);
}
.hand{
background: white;
width: 48%;
height: 1.5%;
position: absolute;
top :50%;
transform-origin: 100%;
transform: rotate(90deg);
transition: all 0.06s;
transition-timing-function: cubic-bezier(0.1, 1.09, 0.52, 1.26);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta cht="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clock</title>
<link rel="stylesheet" href="clock.css">
</head>
<body>
<div cl="clock">
<div cl="clock-face"></div>
<div cl="hand hour-hand"></div>
<div cl="hand minute-hand"></div>
<div cl="hand second-hand"></div>
</div>
<script src="clock.js"></script>
</body>
</html>
0
关于错误定位的手的问题是由于显示 00:00:00 所需的 90 度旋转。因此，在计算中，您始终必须添加此 90 度。
关于计算本身：
时钟有 360 度 12 小时（360 / 12）和 60 分钟 / 秒（360 / 60）。
要使时针在时针之间不断移动而不是跳到它：小时 knotch 为(360 * hr) / 12，该小时经过的分钟为(360 * m) / (12 * 60)。
相同的概念适用于分钟手。
最后，秒针在从 59 传递到 0 时奇怪地跳跃。这是由于旋转从 359 degres 变为零，而不是变为 360。因此，实际上手的动画向后（counter clockwize）非常快。为了解决这个问题，我只需添加一行即可在 0 秒时删除过渡动画。
secHand.clList.toggle("hand-transition", s != 0);
const secHand = document.querySelector(".second-hand");
const minhand = document.querySelector(".minute-hand");
const hrhand = document.querySelector(".hour-hand");
function setDate() {
const d = new Date();
const hr = d.getHours();
const m = d.getMinutes();
const s = d.getSeconds();
// Remove the transition at 0 sec.
secHand.clList.toggle("hand-transition", s != 0);
const sethrdeg = (360 * hr) / 12 + (360 * m) / (12 * 60) + 90; // 30 * hr + m / 2;
hrhand.style.transform = `rotate(${sethrdeg}deg)`;
const seeg = (360 * m) / 60 + (360 * s) / (60 * 60) + 90; // 6 * m;
minhand.style.transform = `rotate(${seeg}deg)`;
const setsdeg = (360 / 60) * s + 90; // 6 * s;
secHand.style.transform = `rotate(${setsdeg}deg)`;
}
setInterval(setDate, 1000);* {
background: url(https://images.unsplash.com/photo-1523821741446-edb2b68bb7a0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80);
margin: 0;
padding: 0;
font-family: Georgia, "Times New Roman", Times, serif;
background-size: cover;
}
body {
display: flex;
height: 100vh;
align-items: center;
}
.clock {
border: 3px solid black;
border-radius: 50%;
padding: 5px;
position: relative;
left: 30rem;
width: 25rem;
height: 25rem;
justify-content: center;
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), inset 0 0 0 3px #efefef,
inset 0 0 10px black, 0 0 10px rgba(0, 0, 0, 0.2);
}
.clock-face {
position: relative;
transform: translateY(-3px);
}
.hand {
background: white;
width: 48%;
height: 1.5%;
position: absolute;
top: 50%;
transform-origin: 100%;
transform: rotate(90deg);
}
/* Specific cl for the transition, so it can be removed */
.hand-transition {
transition: all 0.06s;
transition-timing-function: cubic-bezier(0.1, 1.09, 0.52, 1.26);
}
.minute-hand {
background: blue;
}
.hour-hand {
background: red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta cht="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clock</title>
<link rel="stylesheet" href="clock.css">
</head>
<body>
<div cl="clock">
<div cl="clock-face"></div>
<div cl="hand hour-hand"></div>
<div cl="hand minute-hand"></div>
<div cl="hand second-hand"></div>
</div>
<script src="clock.js"></script>
</body>
</html>本站系公益性非盈利分享网址，本文来自用户投稿，不代表码文网立场，如若转载，请注明出处
评论列表（55条）