javascript 網(wǎng)頁進度條簡單實例
更新時間：2017年02月22日 15:23:38 投稿：lqh
這篇文章主要介紹了javascript 網(wǎng)頁進度條簡單實例的相關資料,需要的朋友可以參考下
javascript 網(wǎng)頁進度條簡單實例
最近學習新的知識，遇到一個小功能網(wǎng)頁進度條，發(fā)現(xiàn)一篇文章還是不錯的，這里記錄下，也許能幫助到大家，
實例代碼：
<!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; //總數(shù)
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; //總數(shù)
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>
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關文章
這篇文章主要介紹了利用momentJs做一個倒計時組件，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-12-12
這篇文章主要介紹了webstorm中配置Eslint的兩種方式及差異比較詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要為大家介紹了打印Proxy對象和ref對象的包實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)翻書特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
javascript支持區(qū)號輸入的省市二級聯(lián)動下拉菜單
javascript支持區(qū)號輸入的省市二級聯(lián)動下拉菜單...2007-05-05
javascript attachEvent和addEventListener使用方法
attachEvent與addEventListener區(qū)別 適應的瀏覽器版本不同，同時在使用的過程中要注意2009-03-03
本文主要介紹了JavaScript制作游戲搖桿方向盤,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2014-04-04
這篇文章主要介紹了JavaScript正則替換HTML標簽功能,結合完整實例形式詳細分析了javascript正則替換字符串操作相關實現(xiàn)技巧,需要的朋友可以參考下2017-03-03
微信公眾號-獲取用戶信息（網(wǎng)頁授權獲?。崿F(xiàn)步驟
這篇文章主要介紹了微信公眾號-獲取用戶信息（網(wǎng)頁授權獲?。崿F(xiàn)步驟的相關資料,需要的朋友可以參考下2016-10-10
本文主要介紹如何使用headjs來管理和異步加載js，提高頁面的加載速度，需要的朋友可以參考下2016-11-11