javascript 进度条js

javascript 进度条jsJS创建简易进度条

css 的style样式   :

<style>

        .outter{

            width: 500px;

            height: 30px;

            border: 1px solid black;

            border-radius: 15px;

            /* overflow: hidden; */

        }

        #inner{

            height: 100%;

            width: 50px;

            background-color: aqua;

            border-radius: 15px;

            text-align: center;

            line-height: 30px;

        }

    </style>

body中的HTML和js部分:

<body>

    <div class=”outter”>

        <div id=”inner”>50px</div>

    </div>

    <script>

        var id=setInterval(function(){

            //获取当前inner的width;

            var _inner=document.getElementById(“inner”);

            //获取width

            let cliWidth=_inner.clientWidth; //获取的是数值

            //+2%  更新inner的width;

            _inner.style.width=cliWidth+10+”px”;  //只能设置和获取(行内)样式

            //更新inner值

            _inner.innerHTML=parseInt((cliWidth+10)/500*100)+”%”;

            //到 100%,停止计时器

            if(cliWidth+10>=500){

                 //更新inner值为加载完成

                _inner.innerHTML=”加载完成”

                clearInterval(id);

            }

             

        },100)

    </script>

</body>

javascript 进度条js

今天的文章javascript 进度条js分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/29041.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注