进度条

最新推荐文章于 2024-04-25 16:43:08 发布

Ajistyle

最新推荐文章于 2024-04-25 16:43:08 发布

阅读量289

点赞数

分类专栏：墨水不多，却爱分享文章标签：进度条 javascript html

本文链接：https://blog.csdn.net/qq_26459867/article/details/44201371

版权

墨水不多，却爱分享专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<img src="https://img-blog.csdn.net/20150311170937583?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjY0NTk4Njc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" /><pre name="code" class="javascript"><pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>进度条</title>
<style type="text/css">
body{margin:0px;padding:0px;}
#ibox{line-height:20px;width:100px;height:20px;background:#ccc;text-align:left;margin:100px auto 0 auto;}
#iLoading{color:#fff;font-size:12px;line-height:20px;width:0px;height:20px;background:#5664D2;text-align:center;position: absolute;}

#ibox2{line-height:20px;width:100px;height:20px;background:#ccc;text-align:left;margin:100px auto 0 auto;}
#iLoading2{color:#fff;font-size:12px;line-height:20px;width:0px;height:20px;background:#5664D2;text-align:center;position: absolute;}

</style>
<script type="text/javascript">
    window.onload = function () {
        var idiv = document.getElementById('iLoading');
        var ibox = document.getElementById('ibox');
        var timer = null;

        var idiv2 = document.getElementById('iLoading2');
        var ibox2 = document.getElementById('ibox2');
        var timer2 = null;

        timer = setInterval(function () {
            var iWidth = idiv.offsetWidth / ibox.offsetWidth * 100;
            idiv.style.width = idiv.offsetWidth + 1 + 'px';
            idiv.innerHTML = Math.round(iWidth) + "%";
            if (iWidth == 88) {
                clearInterval(timer);
            }
        }, 1);

        timer2 = setInterval(function () {
            var iWidth = idiv2.offsetWidth / ibox2.offsetWidth * 100;
            idiv2.style.width = idiv2.offsetWidth + 1 + 'px';
            idiv2.innerHTML = Math.round(iWidth) + "%";//显示值
            if (iWidth == 40) { //40代表进度条长度
                clearInterval(timer2);
            }
        }, 1);
    }
</script>
</head>
<body>
<div id="ibox">
  <div id="iLoading"></div>
    
</div>
<div>
<div id="ibox2">
  <div id="iLoading2"></div>
</div><span>asdasdad</span>
</div>
</body>
</html>

Ajistyle

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
进度条

进度条body{margin:0px;padding:0px;}#ibox{line-height:20px;width:100px;height:20px;background:#ccc;text-align:left;margin:100px auto 0 auto;}#iLoading{color:#fff;font-size:12px;line-height:20px;width:
复制链接

扫一扫