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>

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章:

js replace() 文本替換你所不知的
今天看了一個函數(shù)，功能是把形如word-word的字符串轉化為wordWord
2010-03-03
javascript打造跨瀏覽器事件處理機制[Blue-Dream出品]
由于瀏覽器兼容的復雜性.打造一個較優(yōu)的跨瀏覽器事件處理函數(shù).不是件容易的事情.各大類庫也都通過了種種方案去抽象一個龐大的事件機制.
2010-07-07
js模仿java的Map集合詳解
這篇文章主要介紹了js模仿java的Map集合的相關資料，Java中某些最常用的集合類是List和Map，感興趣的小伙伴們可以了解一下
2016-01-01
JavaScript ES6中類與模塊化管理超詳細講解
JavaScript中的模塊化是指將每個js文件會被認為單獨一個的模塊。模塊之間是互相不可見的。如果一個模塊需要使用另一個模塊，那么需要通過指定語法來引入要使用的模塊，而且只能使用引入模塊所暴露的內容
2023-01-01
在Windows上安裝Node.js模塊的方法
Node.js逐漸升溫，很多朋友已經(jīng)開始關注。但是在Windows平臺上需要基于Cygwin安裝配置環(huán)境，讓很多人望而卻步。
2011-09-09
阻止事件(取消瀏覽器對事件的默認行為并阻止其傳播)
取消瀏覽器對事件的默認行為(響應)(比如a標簽的跳轉等)并停止事件的繼續(xù)傳播，下面有一個不錯的示例大家可以感受下
2013-11-11
JavaScript原型繼承_動力節(jié)點Java學院整理
這篇文章主要為大家詳細介紹了JavaScript原型繼承的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
js 圖片懶加載的實現(xiàn)
這篇文章主要介紹了js 圖片懶加載的實現(xiàn)，幫助大家更好的優(yōu)化自身網(wǎng)頁，提高網(wǎng)頁響應速度，感興趣的朋友可以了解下
2020-10-10
本地圖片預覽(支持IE6/IE7/IE8/Firefox3)經(jīng)驗總結
遇到的本地圖片預覽的需求,IE6下可以直接從file的value獲取圖片路徑來顯示預覽,IE7和IE8下通過select獲取file的圖片路徑，再用濾鏡來顯示預覽，至于FireFox祥看本文吧，希望可以幫助到你
2013-03-03
JavaScript復制文案到剪貼板小技巧
這篇文章主要為大家介紹了JavaScript復制文案到剪貼板實現(xiàn)小技巧,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-07-07