虚位以待(AD)
虚位以待(AD)
首页 > 网页特效 > JavaScript > javascript 网页进度条简单实例

javascript 网页进度条简单实例
类别:JavaScript   作者:码皇   来源:互联网   点击:

这篇文章主要介绍了javascript 网页进度条简单实例的相关资料,需要的朋友可以参考下

javascript 网页进度条简单实例

               最近学习新的知识,遇到一个小功能网页进度条,发现一篇文章还是不错的,这里记录下,也许能帮助到大家,

实例代码:

    <!DOCTYPE html><html><head><style>#box {
    float:left;
    width:100%;
    height:18px;
    border:1px solid;
    }
    #bar {
    float:left;
    width:100%;
    height:18px;
    border:0px;
    background:#00f;
    }
    </style></head><body><div id="box"><div id="bar"></div></div><script language="javascript">var total = 6480;
    //总数var curN = 4480;
    //当前值function show(){
    var box = document.getElementById("box");
    var o = document.getElementById("bar");
    o.style.width = ((curN / total) * 200) + 'px';
    //200是外框的宽度}
    show();
    </script></body></html>

取反:

    <!DOCTYPE html><html><head><style>#box {
    float:left;
    width:200px;
    height:18px;
    border:1px solid;
    }
    #bar {
    float:left;
    width:100%;
    height:18px;
    border:0px;
    background:#00f;
    }
    </style></head><body><div id="box"><div id="bar"></div></div><script language="javascript">var total = 6480;
    //总数var curN = 6400;
    //当前值var baseNub = total - curN;
    function show(){
    var box = document.getElementById("box");
    var o = document.getElementById("bar");
    o.style.width = ((baseNub / total) * 200) + 'px';
    //200是外框的宽度}
    show();
    </script></body></html>

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关热词搜索: javascript 网页进度条 js 实现网页进度条