基于JS时间对象的电子时钟效果设计与实现

小—杨

于 2024-03-02 10:42:40 发布

阅读量633

点赞数 8

CC 4.0 BY-SA版权

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_63538423/article/details/136411363

实验技术：

1.利用JS时间对象 new Date() 获取时间（时，分，秒）。

2.所有的数字都是图片，一共有0到9 的数字图片十张。时分秒都分为十位和个位数，用两张图片表示一个时间。

3.利用计时器，获取时间数据，利用时间数据分别替换对应图片。

自行准备好 0-9 和冒号的图片，并保存在站点img文件夹中。

利用计时器，每隔1s从时间对象获取对应的时间数据。

下面是电子时钟实现代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>时间</title>
  <style>
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
    }

    .times {
      te