Simple example of javascript web page progress bar-JS Tutorial-php.cn

Simple example of javascript web page progress bar

高洛峰

Release： 2017-02-23 17:29:00

Original

1595 people have browsed it

javascript Simple example of web page progress bar

I recently learned new knowledge and encountered a small functional web page progress bar. I found an article that is quite good. I will record it here. , maybe it can help everyone,

Example code:

<!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>

Copy after login

Negation:

<!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>

Copy after login

Thank you for reading, I hope it can help everyone, thank you everyone for supporting this site!

For more articles related to simple examples of javascript web page progress bars, please pay attention to the PHP Chinese website!