cari

Rumah >hujung hadapan web >tutorial js >javascript 网页进度条简单实例

javascript 网页进度条简单实例

高洛峰
高洛峰asal
2017-02-23 17:29:001640semak imbas

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) + &#39;px&#39;; //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) + &#39;px&#39;; //200是外框的宽度
}
show();
</script>
</body>
</html>

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

更多javascript 网页进度条简单实例相关文章请关注PHP中文网！


Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：js实现带简单弹性运动的导航条Artikel seterusnya：js实现PC端根据IP定位当前城市地理位置

Artikel berkaitan

Lihat lagi