模拟时钟的指针不能正常工作(the hands of a clock)

代码的 java 脚本部分有问题时针工作不正常。每 60 秒后旋转一次。还有,分针显示错误的时间。请检查 js 中编写的公式。我用过的公式也是 gfg 写的。请解释必要的变化。谢谢。

代码的 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-:
    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 class="clock">
        <div class="clock-face"></div>
        <div class="hand hour-hand"></div>
        <div class="hand minute-hand"></div>
        <div class="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.classList.toggle("hand-transition", s != 0);

查看.toggle([class],[force])

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.classList.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-: 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 class 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 class="clock">
    <div class="clock-face"></div>
    <div class="hand hour-hand"></div>
    <div class="hand minute-hand"></div>
    <div class="hand second-hand"></div>
  </div>
  <script src="clock.js"></script>
</body>
</html>
CodePen

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(15)
列表 元组 集合和字典之间有什么区别 (compare list tuple set and dictionary in pyt
上一篇
Strava-具有纬度、经度和时间的团体路线接近度
下一篇

相关推荐

  • cvt和自动挡哪个好提升驾驶体验的最佳选择

    CVT(可变转换器)是一种由传动带及传动轮组成的无级变速器,它可以在没有传动档位的情况下,根据驾驶者的驾驶习惯,自动调整传动轮之间的转速比,从而实现无级变速。自动挡是指车辆自动变速箱,它使用液力传动来实现变速,可以自动适应车辆的行驶状态,减少司机的疲劳,提高行车的舒适性。…

    2023-06-08 07:42:19
    0 65 10
  • cv一叶扁舟和清影轩阳:漫游在一叶扁舟和清影轩阳之间

    cv一叶扁舟是一款开源的计算机视觉库,用于图像处理、计算机视觉等。它提供了丰富的API,可以帮助开发者快速实现各种图像处理任务,如图像分割、目标检测、图像识别等。清影轩阳是一款开源的计算机视觉框架,用于图像处理、目标检测、分类等。它提供了丰富的API,可以帮助开发者快速实现各种图像处理任务,如图像分割、目标检测、图像识别等。…

    2023-08-05 07:06:20
    0 92 70
  • css设置滚动条宽度设置:This is a title

    CSS设置滚动条宽度的方法:使用CSS3的。-webkit-属性:…

    2023-06-06 10:53:01
    0 64 11
  • xl和xe汽车cvt:探索XL和XE汽车的CVT技术优势

    XL和XE汽车CVT是一种变速器,它使用液力变矩器代替传统的机械变速器,以达到更高的效率。它的工作原理是,当发动机输出功率时,液力变矩器就会将这些功率转换为液压能量,然后将能量传递到变速器的输出轴上,从而实现变速。…

    2023-04-09 00:41:04
    0 30 55
  • cordon bleu是什么意思:法式炸鸡卷——Cordon Bleu的经典之作

    Cordon Bleu是一种烹饪技术,其中肉片被置于奶酪和火腿之间,然后用面包屑裹上,最后煎炸或烤熟。这种技术通常用于制作鸡肉,但也可以用于制作其他类型的肉类,如牛肉或猪肉。…

    2024-01-27 15:13:30
    0 26 84
  • countif 非空:非空单元格的计数

    Countif 非空是指计算某个单元格不为空的数量。代码如下:…

    2023-04-22 15:54:15
    0 79 30
  • java double保留一位小数:How to Round a Double to One Decimal Place in

    示例示例使用类可以轻松实现java double保留一位小数的功能,具体代码如下:// 创建对象…

    2023-05-14 07:40:03
    0 78 34
  • linux如何写c语言一个完整的指南

    示例示例在Linux系统中,可以使用C语言编写源代码文件,然后使用GCC编译器来编译源代码文件,生成可执行文件。下面是一个简单的C语言代码示例:…

    2023-05-16 02:02:45
    0 60 17

发表评论

登录 后才能评论

评论列表(5条)