kbps などで進行速度を取得する小さな JavaScript AJAX スクリプトがあります (MB/s としましょう)。そして今、速度をグラフィカルに表示するゲージを追加したいと思います。
ゲージのデザインを含む画像とポインターを含む画像があります。デフォルトでは、ポインタは上を指します。最小値は -120 度、最大値は 120 度です。しかし、誰かが 1 MB の接続を持っている場合、それは良くないので、指数計算を追加する必要があります。
ここに値があります...
- 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 を超える値では機能しません。
ここで編集 は、私が必要とするもののWORKINGコードです
<!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>
