html实现动态时间，以及动图动图效果

db_tgj_2028

已于 2023-07-01 16:17:01 修改

阅读量2.8k

点赞数 1

文章标签： html 数学建模前端

于 2023-07-01 15:46:05 首次发布

本文链接：https://blog.csdn.net/qq_66922072/article/details/131309079

版权

本文介绍了如何使用JavaScript的setTimeout函数和Date对象实现实时动态显示时间，并利用CSS的animate方法和@keyframes规则创建动图效果，如旋转动画。通过示例代码详细解析了实现动态时间和动图的原理与步骤。

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

前言

最近在老师的帮助下学习了动态时间的显示，动图加载，个人感觉帅爆了，现向大家分享我的学习经验，希望大家在看完我的文章后能够学会它。

一、动态时间

简介

通过不断获取不断获取本地时间之后上传到html页面上实现

函数介绍

setTimeout：用于定时执行某个函数

参数1：运行函数

参数2：时间参数（毫秒），规定n秒后执行

Date对象：可以获取当前电脑的时间的对象

document.querySelector(".shwoTime").innerHTML：通过class值（.showTime)定位，填充信息

代码如下

<body>
    <div class="showTime">当前时间：2020年3月17-0时54分14秒</div>
    <script>
      var t = null;
      t = setTimeout(time, 1000); //開始运行
      function time() {
        clearTimeout(t); //清除定时器
        dt = new Date();
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = dt.getHours(); //获取时
        var m = dt.getMinutes(); //获取分
        var s = dt.getSeconds(); //获取秒
        document.querySelector(".showTime").innerHTML =
        "当前时间：" + y + "年" + mt + "月" + day + "日" + "-" + h + "时" + m + "分" + s + "秒";
        t = setTimeout(time,1000); //设定定时器，循环运行
      }
    </script>
</body>

上面代码是通过setTimeout定时执行程序，通过递归不断执行setTimeout函数，同时每次执行setTimeout函数都会清除上一个setTimeout的函数。形成时间的不断刷新

将代码放到html框架可以看到：

二，动图效果：

简介

通过对png图片设置旋转实现动图效果

animation 及函数：

animate () 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。 CSS属性值是逐渐改变的，这样就可以创建动画效果

函数介绍：

参数一：自定义动画

参数二：动画实现时间，即从开始到结束的时间

参数三：实现过程速率的实现，如linear就是匀速

参数四：运行是的方式。例如：infinite是一直运行

自定义动画（动画序列）：

0%是动画的开始，100%是动画的完成。
在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
动画是使某元素从一种样式逐渐变化为另一种样式的效果，可以任意次数地改变成任意样式
用百分比来规定变化发生的时间，或关键词"from"和"to"，等同于0%和100%

.map .map3 {
  width: 7.075rem;
  height: 7.075rem;
  background-image: url(../images/jt.png);
  animation: rotate1 10s linear infinite;   /* 设置10s旋转完成，匀速旋转，一只旋转*/
}
/* 下面的这个是一个函数，自定义旋转方式 */
@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

另外：因为是css文件，因此需要link函数链接到html文件中，通过.map class定位器定位class值为map3的函数，例如：

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../static/css/index.css" />
  </head>

 <body>
        <div class="map">
          <div class="map3"></div>
        </div>
  </body>

原图如下：