자바스크립트 웹 페이지 진행률 표시줄의 간단한 예-JS 튜토리얼-php.cn

자바스크립트 웹 페이지 진행률 표시줄의 간단한 예

高洛峰

풀어 주다： 2017-02-23 17:29:00

원래의

1555명이 탐색했습니다.

자바스크립트 웹페이지 진행바의 간단한 예

최근에 새로운 지식을 배우다가 작은 기능의 웹페이지 진행바를 접했는데 꽤 괜찮은 글을 발견했습니다. . 여기에 녹음해 두겠습니다.

예제 코드:

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

로그인 후 복사

읽어주셔서 감사합니다. 모두에게 도움이 되기를 바랍니다. 이 사이트를 지원해 주신 모든 분들께 감사드립니다!

자바스크립트 웹페이지 진행 표시줄의 간단한 예와 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!