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