javascript实现时钟效果

最新推荐文章于 2024-08-27 13:24:20 发布

紫菜菌

最新推荐文章于 2024-08-27 13:24:20 发布

阅读量416

点赞数 2

分类专栏： js基础文章标签： javascript 时钟效果

本文链接：https://blog.csdn.net/caiyyu/article/details/94219418

版权

本文介绍了如何使用JavaScript实现一个时钟效果，包括创建时钟的初始效果和通过CSS及JavaScript进行时针、分针、秒针的动态旋转，使时钟能够准确显示时间。文章还提到利用CSS硬件加速提升动画性能，并鼓励读者提出疑问和建议。

摘要由CSDN通过智能技术生成

效果展示：

时钟效果

初始效果：

初始效果

*{
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
  }
  .clock{
    width: 202px;
    height: 202px;
    border:1px dashed #666;
    margin: 100px auto;
    position: relative;
  }
  .clock ul{
    width: 200px;
    height: 200px;
    border:1px solid #333;
    border-radius: 50% 50%;
    position: relative;
  }
  .clock ul li{
    width: 2px;
    height: 5px;
    background-color: #333;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -1px;
    transform-origin: 50% 100px;
  }
  .clock ul li:nth-child(2){
    transform: rotate(6deg);
  }
  .clock ul li:nth-child(3){
    transform: rotate(12deg);
  }
  .clock ul li:nth-child(4){
    transform: rotate(1