⑴ 用javascript寫的進度條,怎麼獲取進度條的值,按百分比顯示出來
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>RunJS</title>
<style>
#progress{
border:1pxsolidblack;
width:500px;
height:20px;
text-align:center;
}
#progress>div{
width:0px;
height:20px;
position:absolute;
background-color:yellow;
}
#progress>span{
color:red;
position:absolute;
}
</style>
<scripttype="text/javascript">
onload=function(){
vardiv=progress.querySelector("div");
varspan=progress.querySelector("span");
varpw=parseFloat(progress.style.width)||parseFloat(getComputedStyle(progress).width)||progress.offsetWidth;
varinterval=setInterval(function(){
varw=parseFloat(div.style.width)||parseFloat(getComputedStyle(div).width)||div.offsetWidth;
w+=10;
if(w>=pw){
w=pw;
clearInterval(interval);
}
div.style.width=w+"px";
span.innerHTML=w*100/pw+"%";
},60);
};
</script>
</head>
<body>
<divid="progress">
<div>
</div>
<span></span>
</div>
</body>
</html>
⑵ Axure8怎麼實現簡易的百分比進度條
進度條即計算機在處理任務時,實時的,以圖片形式顯示處理任務的速度,完成度,剩餘未完成任務量的大小,和可能需要處理時間,一般以長方形條狀顯示。
Axure實現百分比進度條這一過程相對來說還是比較復雜的,因為我們要在Axure中實現一個動態的進度條。
首先拖入一個矩形元件,將其命名為進度條,高度為36。然後再拖入一個矩形,寬度設為1,高度也為36,命名為進度指示條:
內容參考自網頁鏈接
⑶ 求教,如何讓進度條顯示成百分比
顯示百分比需要自己計算載入的內容,以下以webView示例,webView載入網頁的時候可以增加進度條: 1.從webView中獲取設置 WebSettings sws = webView.getSettings(); sws.setSupportZoom(true); sws.setBuiltInZoomControls(true); webView.setInitialScale(25); webView.getSettings().setUseWideViewPort(true); 2.注冊setWebChromeClient事件 webView.setWebChromeClient(new WebChromeClient() { public void onProgressChanged(WebView view, int progress) { // Activity和Webview根據載入程度決定進度條的進度大小 // 當載入到100%的時候 進度條自動消失 //WebViewProgressActivity.this.setTitle("Loading..."); //WebViewProgressActivity.this.setProgress(progress * 100); if (progress == 100) { progressBar.setVisibility(View.GONE); //WebViewProgressActivity.this.setTitle("完成"); } } }); 3.注意在onProgressChanged中處理進度,progress就是進度值。
⑷ 一個網頁代碼進度條是以百分比顯示的,請問如果我需要把總數為6000,當下300,這個進度條怎麼寫代碼
父元素背景為白色,長度固定或者為百分之百,子元素顯示進度,再分等份乘以長度就完了啊,然後顏色設置為藍色,可以看看相關的,還沒處理好可以找額提供技術支持
⑸ JS根據當前百分比顯示進度條
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
#box {float:left;width:200px;height:18px;border:1px solid;}
#bar {float:left;width:0px;height:18px;border:0px;background:#00f;}
</style>
</head>
<body>
<div id="box">
<div id="bar"></div>
</div>
<script language="javascript">
var total = 100; //總數
var curN = 30; //當前值
function show()
{
var o = document.getElementById("bar");
o.style.width = ((curN / total) * 200) + 'px'; //200是外框的寬度
}
show();
</script>
</body>
</html>⑹ 用javascript寫的進度條,怎麼獲取進度條的值,按百分比顯示出來
s[0].style.width=100-r/i*100+"%";
該代碼不就是設置進度條的么
如果你能更改頁面 你在標簽中這樣寫:<h5>(資料完整度<spanid="wz_jd"></span>)</h5>
然後在你的JS中
s[0].style.width=100-r/i*100+"%";
的下面 寫上:
document.getElementById("wz_jd").innerHTML=100-r/i*100+"%";
不就OK了么
注意:你的JS中哪兒有那行代碼 就在那行下面 追加
如果不能更改頁面就在那行代碼下面 這樣寫:
document.getElementsByTagName("h5")[0].innerHTML="(資料完整度"+(100-r/i*100)+"%)";
裡面的0 表示是第1個h5標簽 如果你有多個 自己進行更改
⑺ JS怎麼實現網頁載入的進度百分比
一般這種網站都是圖片特別多而且質量很高導致載入慢。
所以
我們基本監聽圖片載入進度就可以達到比較好的效果。
而圖片我們可以採用預載入
(也就是瀏覽器可以緩存,到真的要用的時候會自動從緩存讀取)
那麼我們只要檢測預載入圖片的進度就可以了
代碼基本如下:
var
imgs
=
["1.jpg","2.jpg"];
for(var
i=0;i<imgs.length;i++){
var
img
=
new
Image()
img.onload
=
function(){
//圖片載入完畢
此時更新進度條
}
img.src
=
imgs[i];
}⑻ 如何用JavaScript打造0.1%精度的進度條
單進圖條模式需要進度條長度為1000px的整數倍,
多進度條模式方法就多了,以兩根進度條為例來表達的話可以第一根進度條表示1/100的精度,只要長度為100px的整數倍。第二個進度條的精度為1/10,長度需要為10px的整數倍。動畫效果為第二根進度條滿了第一根進度條進度加1就好了,這樣組合起來就可以達到表示1/1000精度的效果。
當然,如果布局有限制直接將值表示在進度條上就行了,前端基本沒有多少會刻意的要求動畫精度吧。⑼ <progress></progress>標簽怎麼做帶百分比的進度條
使用progress{border:*; background:*;}可以控制所有瀏覽器下progress元素的邊框和背景色。其中,Chrome瀏覽器是個特例,直接的設置看不到效果(實際上支持),原因下面會解釋。
FireFox瀏覽器已經完成的進度條,使用progress::-moz-progress-bar { }表示,這與Chrome瀏覽器是相反的。
Chrome瀏覽器Chrome的表現與FireFox有著明顯的差異,其progress元素的結構似乎是這樣的:
progress┓ progress-value progress-bar
其中,progress-bar指全部的進度,progress-value指已經完成的進度。因此,Chrome瀏覽器下,已經完成的進度條,使用progress::-webkit-progress-value { }表示, FireFox瀏覽器下是*-bar. 而progress-bar默認含有背景色,因此,我們需要如下設置,以自定義背景色:progress::-webkit-progress-bar { background: *; }這也很好地解釋了上面的一個疑問?progress{background:*;}為什麼不能讓progress元素背景色改變呢?不是不能改變,而是被progress-bar這個內部元素給覆蓋了,當我們設置:progress::-webkit-progress-bar { background: transparent; }的時候,progress{background:*;}設置的背景色就會顯露出來。