Simple Example of javascript Web Page Progress Bar

2021-07-22 09:02:34
OfStack

Recently, learning new knowledge, encountered a small function page progress bar, found that an article is still good, recorded here, may 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>
<div id="box">
<div id="bar"></div>
</div>
<script language="javascript">
var total = 6480; // Total 
var curN = 4480; // Current value 
function show()
{
 var box = document.getElementById("box");
 var o = document.getElementById("bar");
 o.style.width = ((curN / total) * 200) + 'px'; //200 Is the width of the outer frame 
}
show();
</script>
</body>
</html>

To reverse:


<!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; // Total 
var curN = 6400; // Current value 
var baseNub = total - curN;
function show()
{
 var box = document.getElementById("box");
 var o = document.getElementById("bar");
 o.style.width = ((baseNub / total) * 200) + 'px'; //200 Is the width of the outer frame 
}
show();
</script>
</body>
</html>

Thank you for reading, hope to help everyone, thank you for your support to this site!