Rumah > hujung hadapan web > tutorial js > 使用JS做出动画进度条功能

使用JS做出动画进度条功能

php中世界最好的语言
Lepaskan: 2018-06-11 10:55:23
asal
1935 orang telah melayarinya

这次给大家带来使用JS做出动画进度条功能,的注意事项有哪些,下面就是实战案例,一起来看一下。

1.效果

2.源码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

<html>

<head>

  <script type="text/javascript">

    window.onload = function () {

      var myProgress = document.getElementById("myProgress");

      var mySpan = document.getElementById("mySpan");

      var value = myProgress.value;

      mySpan.innerText = value + "%";

      var ID = setInterval(function () {

        value = myProgress.value;

        if (value < 100) {

          value += 10;

          myProgress.value = value;

          mySpan.innerText = value + "%";

        }

        if (value == 100) {

          clearInterval(ID);

        }

      }, 500);

    }

  </script>

</head>

<body>

<label for="myProgress">进度条</label>

<progress id="myProgress" value="0" max="100"></progress>

<span id="mySpan"></span>

</body>

</html>

Salin selepas log masuk

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

对angular2与共享模块进行应用

Vue+Nuxt.js做出服务端渲染

Atas ialah kandungan terperinci 使用JS做出动画进度条功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan