⑴ 用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:*;}设置的背景色就会显露出来。