javascript 網頁進度條簡單實例
- 高洛峰原創
- 2017-02-23 17:29:001557瀏覽
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>
<p id="box">
<p id="bar"></p>
</p>
<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>
<p id="box">
<p id="bar"></p>
</p>
<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 網頁進度條簡單實例相關文章請關注PHP中文網！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：js實作帶有簡單彈性運動的導航條下一篇：js實作帶有簡單彈性運動的導航條