我有一个小的 JavaScript AJAX 脚本，它以 kbps 或其他方式获得进度速度 - 比如说 MB/s。现在我想添加一个以图形方式显示速度的仪表。
我会有一个包含仪表设计的图像和另一个带有指针的图像。默认情况下，指针指向顶部 - 最低值为 -120 度，最高值为 120 度。但如果有人有 1mb 的连接，那就不好了，所以我需要添加一个指数计算。
以下是价值观...
- 0-1MB：-120 度 -> -90 度
- 1-5MB：-90 度 -> -60 度
- 5-10MB：-60 度 -> -30 度
- 10-20MB：-30 度 -> 0 度
- 20-30MB：0度 -> 30度
- 30-50MB：30度 -> 60度
- 50-75MB：60度 -> 90度
- 75-100MB：90度 -> 120度
我完全不知道如何开始计算。
动画由 CSS 完成
-webkit-transform:rotate(Xdeg)
它会更新
xhr.onprogress
获得速度的计算是：
kb/s=((e.loaded/((new Date()-start)/1000))/1024).toFixed(2),
MB/S=(d/1024*8).toFixed(2)
当我有 MB/s 时，我只想设置仪表度数。
我怎样才能实现这些价值？
这是一个不完全工作的变体。我用它写了它，while但我认为这不是正确的方法。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>gauge</title>
<style>
img{position:fixed;top:100px;left:100px;}
</style>
<script>
var b=[1,5,10,20,30,50,75,100,150],
deg=30;
get=function(a){
var l=b.length
while(l--){
if(b[l]<=a&&a<b[l+1]){
rotation=((l*deg)+(deg/(b[l+1]-b[l])*(a-b[l])));
pointer=document.getElementsByTagName('img')[1]
pointer.style['-webkit-transform']='rotate('+(rotation-120)+'deg)';
console.log(rotation)
}
}
}
</script>
</head>
<body>
<input onChange="get(this.value)">
<img src="gauge1.png"><img src="pointer.png">
</body>
</html>
它不适用于小于 5 和大于 150 的值。
在这里编辑 是我需要的工作代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>gauge</title>
<style>
img{position:fixed;top:100px;left:100px;}
.pointer{-webkit-transform:rotate(-120deg);}
input{width:100%;}
</style>
<script>
var pointer,
get=function(a){
var b=[0,1,5,10,20,30,50,75,100],l=b.length,c=30,x=-120;
if(a>=b[l-1]){
x=120;
}else{
while(l--){
if(b[l]<a&&a<=b[l+1]){
x=(c*l-120)+c*((a-b[l])/(b[l+1]-b[l]));
break;
}
}
}
pointer.style['-webkit-transform']='rotate('+x+'deg)';
}
window.onload=function(){
pointer=document.getElementsByClassName('pointer')[0];
}
</script>
</head>
<body>
<img src="gauge1.png"><img class="pointer" src="pointer.png">
<input type="range" min="0" max="100" value="0" onChange="get(this.value)" step="0.1">
</body>
</html>
