进度条------小案例

Posted yd-mm

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了进度条------小案例相关的知识，希望对你有一定的参考价值。

很少会用到，简单的写一下

代码如下：

<style type="text/css">
        #box {
            width: 400px;
            height: 40px;
            border: 1px dashed #ccc;
            position: relative;
        }

        #div2 {
            width: 0;
            height: 40px;
            background-color: blue;
        }

        #div3 {
            position: absolute;
            right: -50px;
            top: 10px;
        }
    </style>
    <script>
        //获取内部或外部样式的属性值
        function getStyle(obj, att) {
            return obj.currentStyle ? obj.currentStyle[att] : getComputedStyle(obj, null)[att];
        }
        window.onload = function () {
            var div2 = document.getElementById(‘div2‘);
            var div3 = document.getElementById(‘div3‘);
            var timer = null;
            var num = 0;

            //获取div2的宽度值
            //console.log(parseInt(getStyle(div2,‘width‘)));

            function show() {
                var _width = parseInt(getStyle(div2, ‘width‘));
                if (_width >= 400) {
                    clearInterval(timer);
                } else {
                    div2.style.width = _width + 4 + ‘px‘;
                    div3.innerhtml = ++num + ‘%‘;
                }

            }

            show();
            timer = setInterval(show, 50);
        };
    </script>
</head>

<body>
    <div id="box">
        <div id="div2"></div>
        <div id="div3"></div>
    </div>
</body>

 

以上是关于进度条------小案例的主要内容，如果未能解决你的问题，请参考以下文章

活动到片段方法调用带有进度条的线程

当片段视图加载是异步任务的一部分时，如何在片段加载之前显示进度条？

自定义对话框片段内的进度条 - 如何从 AsyncTask 传递进度？

在recyclerview片段Reandroid中屏幕旋转后进度条不显示

css Bootstrap 3进度条片段

进度条不隐藏是当数据在片段中的recyclerview中加载时