當前位置:首頁 » 網頁前端 » 前端實現百分百進度條
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端實現百分百進度條

發布時間: 2022-06-17 17:18:03

⑴ 用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中實現一個動態的進度條。

  1. 首先拖入一個矩形元件,將其命名為進度條,高度為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:*;}設置的背景色就會顯露出來。