利用js来实现动态进度条效果

最新推荐文章于 2025-05-21 14:55:16 发布

NiceYours

最新推荐文章于 2025-05-21 14:55:16 发布

阅读量2.7k

点赞数 1

CC 4.0 BY-SA版权

文章标签：动态显示 js

本文链接：https://blog.youkuaiyun.com/qq_42209630/article/details/80394484

本文介绍了一个简单的进度条动画实现方案，使用HTML结构定义进度条的基本布局，通过CSS样式设定外观，并借助JavaScript动态调整进度条的宽度及显示百分比。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.html结构:

<div class="out">
        <div class="inner">
            <span>0%</span>
        </div>
    </div>

2. css样式:

 <style>
        .out {
            width: 1200px;
            height: 20px;
            border: 2px solid blue;
            border-radius: 10px;
            overflow: hidden;
            margin: 400px auto;
            position: relative;
        }

        .inner {
            height: 20px;
            width: 0;
            background-color: yellowgreen;

        }

        span {
            color: red;
            font-size: 18px;
            line-height: 20px;
            position: absolute;
            left: 50%;

        }
        

3. js代码:

<script src="./jquery.min.js"></script>
    <script>
        $(function () {

            $('.inner').animate({
                // 动画的终点是inner的宽度等于out的宽度
                width: $('.out').width(),
            }, 10000, function () {
                // alert('加载完毕');
            })
            //设置计时器,动态的改变span的文本显示
            var timerID = setInterval(function () {
                // 显示进度百分比
                var num = Math.floor($('.inner').width() / $('.out').width() * 100);
                $('span').html(num + '%');
                 
            }, 100)           
        })
    </script>