jqmeterで100%になってしまう

前へ 次へ
このQ&Aのポイント
  • JQueryのプラグインjqmeterを使用してプログレスバーを表現していますが、goal > raisedの場合でも100%と表示されてしまいます。
  • メーターの結果を％表示にするためにdisplayTotalオプションをtrueに設定しましたが、raisedがgoalよりも小さい場合でも100%となってしまいます。
  • Math.ceil関数によって切り上げられた値が％表示に影響していることが分かりましたが、Math.floorに変更するとraisedがgoalと等しい場合でも99%となります。また、this.Counterの値も正しくないように思われます。
回答を見る
  • ベストアンサー

jqmeterで100%になってしまう

お世話になります。 javaScriptは初心者なので説明が拙く見づらいかもしれませんが 何卒ご容赦頂ければと思います。 早速質問なのですが、JQueryのプラグインにjqmeterという プログレスバーを表現できるものがあるのですが、 これがgoal > raisedとなっているにも関わらず 100%と表示されてしまいます。 現象としては、オプション値にあるdisplayTotalをtrueにすると メーターの結果を％表示にしてくれるようになるのですが、 メーターに与える値を例えば下記のようにすると 本来であれば99%となってほしいところを、100%となってしまいます。 ■設定値 goal:'1000' raised:'999' 値が小さいと問題ないようなのですが、 双方大きくなったときの差が小さいとどうやらダメなようです。 調べた限りですと、jqmeter.min.jsの e(t).children(".outer-therm").children(".inner-therm").children().text(Math.ceil(this.Counter)+"%") というところで％表示しているようなのですが、 ここのMath.ceilの影響で切り上げされているから、というところまではわかりました。 しかし、ここを仮にMath.floorにすると今度はgoal = raisedとなっているのに 99%となってしまいます。 そこでthis.Counterがどういう値になっているのか確認したところ、 ・goal:'1000' ・raised:'999' で99%にはなるようになったのですが、 下記の設定値では ・goal:'1000' ・raised:'1000' 何故か100%にならず以下のような結果が返ってきます。 ・this.Counterの結果値：99.99500359598767（％） そもそもthis.Counterの値が正しくない感じなので、 どうしようもないように思えるのですが どなたかお分かりになるからご助言ご教示頂けますと幸いです。 よろしくお願いいたします。

  • ctske
  • お礼率81% (44/54)

質問者が選んだベストアンサー

  • ベストアンサー
  • Proof4
  • ベストアンサー率78% (151/192)
回答No.1

this.Counterがきっちりした値にならないのは浮動小数点誤差が含まれるためだと考えられます。 対策として、小数点の指定桁数で四捨五入を行ってから天井関数をかける方法があります。 具体的には、jqmeter.min.jsの Math.ceil(this.Counter) を Math.floor(Math.round(this.Counter * 10) / 10) に書き換えるといかがでしょうか。 小数点第2位の数字で四捨五入を行った後に天井関数をかけています。 goalの数値が変化した場合は四捨五入を行う小数桁を変更する場合がありますが、質問者様のケースではこれでうまく動作すると思います。

ctske
質問者

お礼

ご回答ありがとうございます。 教えて頂いたとおり、当該箇所を修正してみたところ 想定した結果が返ってくるようになりました。 ありがとうございます！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • ミリ秒までカウントできるタイマー

    「2008年12月31日まであと、1.0587秒」 のように、リアルタイムで時間が減っていく タイマーを作っているのですが、 コンマ５桁くらいつけたしたいです。 下のコードでは、秒までしか表示されません。 コンマ５桁くらい付け足すには、 どこを改造すればよいか、教えてください。 //ゴール年を設定（変更してください） goal_year = 2008; //ゴール月を設定（変更してください） goal_month = 1; //ゴール日を設定（変更してください） goal_day = 1; //ゴール日のDateオブジェクトの作成 goal_date = new Date(goal_year, goal_month-1, goal_day, 0, 0, 0); //１フレーム進む時間に１回以下を計算 this.onEnterFrame = function() { //Dateオブジェクトの作成 now_date = new Date(); //経過時間の差を求める count_time = goal_date-now_date; //経過時間(日)を求める count_day = Math.floor(count_time/(24*60*60*1000)); //経過時間(時間)を求める count_hour = Math.floor(count_time/(60*60*1000))-count_day*24; //経過時間(分)を求める count_minute = Math.floor(count_time/(60*1000))-count_day*24*60-count_hour*60; //経過時間(秒)を求める count_second = Math.floor(count_time/1000)-count_day*24*60*60-count_hour*60*60-count_minute*60; count_milisecond = Math.floor(count_time/1000)-count_day*24*60*60-count_hour*60*60-count_minute*60; //counter に表示 counter = goal_year+"年"+goal_month+"月"+goal_day+"日まであと"+count_day+"日"+count_hour+"時間"+count_minute+"分"+count_second+count_milisecond"秒"; };

  • カウントダウン終了後のフレーム移動が出来ません。

    色々な箇所で検索したのですが上手く見つからず、こちらで質問させて頂きます。 現在、2007年7月31日0時0分0秒をゴールとする カウントダウンの時計を作成しています。 残り時間のカウントダウンは作成が出来たのですが、 カウントが「0」になった時（2007年7月31日0時0分0秒になった時）に 次のフレームへ行くことが出来ません。 やりたいと思っている事は、 ・表示されている画面・ 　「7月31日まで、残り●日と●時間●分●秒」 　　　　↓ 　「祝！サイト開設１周年！」 と、カウントが「0」になると同時に 時計が消えて、次のフレームに用意してある「祝！サイト開設１周年！」の画像に替えたいのです。 現在カウントダウンに使用しているＡＳは以下の通りです。 --------------------------- goal_year = 2007; goal_month = 7; goal_day = 31; goal_date = new Date(goal_year, goal_month-1, goal_day, 0, 0, 0); this.onEnterFrame = function() { now_date = new Date(); count_time = goal_date-now_date; count_day = Math.floor(count_time/(24*60*60*1000)); count_hour = Math.floor(count_time/(60*60*1000))-count_day*24; count_minute = Math.floor(count_time/(60*1000))-count_day*24*60-count_hour*60; count_second = Math.floor(count_time/1000)-count_day*24*60*60-count_hour*60*60-count_minute*60; counter = count_day; counter2 = count_hour; counter3 = count_minute; counter4 = count_second; }; --------------------------- （このスクリプトは、以前こちらのサイトで検索した時に見つけたスクリプトを利用させて頂いています） どなたかご教授願いますでしょうか。。。 どうぞよろしくお願い致します。

  • 走行距離カウンタの表示値変更は違法行為？

    スピードメータの故障により、 最近、それを交換したものです。 その際、 スピードメータに付随しる走行距離のカウンタも 必然的に0に戻ってしまいました。 取り外したメータを見ると 少し分解すれば走行距離カウンタの表示値は 変更可能に思えました。 そこで、新しいメータの走行距離カウンタを 古いメータの値(106,900km)に変更したら 即、違法となるのでしょうか？ 中古車販売において、 実際よりも少ない距離に変更するのは 当然、詐欺行為になるのでは？と思います。 正しい値に変更するのなら問題ないと思うのですが 本当にそうなのか確認したいのです。 ご存知の方がいらしたら 回答していただくと助かります。

  • Flash MX フレーム ランダムに取得する

    現在、あるコンテンツ製作していて、 画面上に5個画像（ムービークリップ）を表示しています。 そのムービークリップのなかには、グラフィックが10個入っていて、 targetFrame = Math.ceil(Math.random()*10); this.gotoAndPlay(targetFrame); というスクリプトで10個のフレーム中からランダムに表示させています。 （画面上の5個の画像は、その1個ずつが10個（フレーム）の中からランダムに選ばれるので、 5個の中には、同じ画像（同じフレーム）が含まれる場合があります。） 画面上に、あと2個画像（ムービークリップ）を追加し、その2個も、 10個のグラフィック（フレーム）中からランダムに表示させたいのですが、 かならず2個とも同じグラフィック（同じフレーム）を選ばせるにはどうすればよいでしょうか？ Flash歴は長いのですが、知識はあまりない馬鹿な私に教えてやってください。

    • ベストアンサー
    • Flash
  • gotoAndPlayされないです

    はじめてFlashを作ります。 "ATTACK1"と"ATTACK2"のフレームを0.2秒の間隔で10回交互に表示したあと、 "ATTACK3"と"ATTACK4"のフレームをenterが押されるまで交互に表示する というプログラムを作りたいのですが、 "ATTACK1"と"ATTACK2"のフレームを交互にずっと表示されるだけで、 ATTACK3へ移動しません。 "ATTACK1"というラベルのフレームに以下のように書きました。 AｃtionScript2.0でやっています。 どこが悪いのか教えてください。お願いします。 ATTACK１フレームのActionscript var timeCount = true; var endTime = getTimer()+0.2*1000; stop(); onEnterFrame = function() { if( timeCount ){ time = Math.ceil((endTime-getTimer())/1000); if( time <= 0 ){ timeCount = false; if( count >= 10 ){ gotoAndPlay("ATTACK3"); count=0; delete this.onEnterFrame(); } gotoAndPlay("ATTACK2"); count=count+1; delete this.onEnterFrame(); } } }; ATTACK2フレームのAcctionscript var timeCount = true; var endTime = getTimer()+0.2*1000; stop(); onEnterFrame = function() { if( timeCount ){ time = Math.ceil((endTime-getTimer())/1000); if( time <= 0 ){ timeCount = false; gotoAndPlay("ATTACK1"); delete this.onEnterFrame(); } } };

    • ベストアンサー
    • Flash
  • Java クラスを使ったソート

    Javaで隣接交換法を用いて配列dataを昇順に並び替え、出力するプログラムを作成する。 ただし、ループ処理には、int型の変数は使わず、以下のCounterクラスを使用する。 という課題が出て、とり組んでみたのですが所々よく分からないので、お力添えしていただければと思います。 課題には下記のような条件が書いてありました。 配列data={54,76,32,89,45,11,8,54,29,67}; [クラス] Counter [インスタンス変数] int型の値を保持するcount [コンストラクタ] 引数で渡された値を初期値としてインスタンス変数に設定する。 引数を省略された場合、ゼロを設定する。 [メソッド] increment 値に1加算する decrement 値に1減算する compareTo 以下の処理を行う Counterの保持している値が引数に指定された値と 等しい場合、値0を返す。 Counterの保持している値が引数に指定された値より 小さい場合、0より小さい値を返す。 Counterの保持している値が引数に指定された値より 大きい場合、0より大きい値を返す。 get Counterの保持している値を添え字として、 引数で渡された配列の要素を取得します。 set Counterの保持している値を添え字として、 第1引数で渡された配列に第2引数で渡された値を設定します。 以下組んだものです。 ---- class Counter { int count = 0; Counter(int count) { this.count = count; } Counter() { this.count = 0; } public int get(int[] data) { return this.count; } public void set(int[] data, int count) { this.count = count; } public void increment() { this.count = count + 1; } public void decrement() { this.count = count - 1; } public int compareTo() { return count; } } public class Lesson09 { public static void main(String args[]) { Counter counter = new Counter(0); int[] data = {54, 76, 32, 89, 45, 11, 8, 54, 67}; counter.get(data); counter.set(data, 0); } } ---- とりあえず、compareToとsetとgetの部分をどう記述していいのかがよく分かりません。 よろしくお願いします。

    • ベストアンサー
    • Java
  • プログラミングの課題が出たのですが、全く分からなくて手のつけようがあり

    プログラミングの課題が出たのですが、全く分からなくて手のつけようがありません。 どなたか教えて頂けませんか？ 以下問題のその課題です。 以下の問題に対応するJavascriptのプログラムを作成して、システムにアップロードしてください。 標準問題 1.円の面積 (1) prompt を用いて数値を入力し、alert を用いてその数値を半径とする 円の面積を表示するプログラムを作成せよ。 なお、円周率は Math.PI で得られる。（例えば、2πは 2 * Math.PI;） 2.繰り返し promptを用いて100以下の数値を入力し、1から順に整数をdocument.writelnなどで表示せよ。ただし、3の倍数と3のつく整数の場合に、文字が大きく表示(サイズ7など)されるように工夫せよ。 3.乱数 1 から 100 までの値（整数）を乱数で決定し、その値を document.write を用いて表示するプログラムを作成せよ。 なお、0以上、1未満の乱数は Math.random()、ある数 n の小数点を切り上げた整数は Math.ceil(n) で得られる。 4.数当てゲーム 1 から 100 までの値（整数）を乱数で決定し、その値を正解するまで prompt による数値の入力を繰り返すゲームを作成せよ。 入力した値が正解より大きい場合は「もっと小さい」、 正解より小さい場合は「もっと大きい」、 正解した場合は「正解です」と、それぞれ alert を用いて表示せよ。 当然、正解は表示してはいけない。

  • Flash　IE6でプログレスバーが表示されない

    IE6上で表示させるFlashを作成しているのですが、 最初にプログレスバーを作成し、コンテンツをロードした後でメインの画面を表示させようとしています。 ところがFirefoxではうまく表示されるのですが、 IE6,7で行うと最初のプログレスバー等の画像が一切表示されず、 いきなりメインの画面から始まってしまいます。 コードはAS3で以下のようになっています。 1フレーム目： 何も記述せず 2フレーム目： var percentNo:int; var bInfo:LoaderInfo= root.loaderInfo; percentNo = Math.ceil(bInfo.bytesLoaded /bInfo.bytesTotal * 100); //画面のテキストフィールドに％を表示 percent_text.text = ""+percentNo + "％"; //フレーム遷移 if(percentNo >=100){ 　　gotoAndPlay(3);　//メインフレームへ }else{ gotoAndPlay(1);　//1フレームからループ } 環境は ・Flash　CS3 ・Flash　Player9 です。 何か解決方法をご存知の方がいらっしゃればご教授の程をよろしくお願いします。

    • ベストアンサー
    • Flash
  • javascriptで数値を3桁区切りで表示

    数値を取得して消費税計算をして四捨五入して、あとは3桁区切りでカンマを付けて戻すだけなのですが、カンマの付け方がわかりません。 よろしくお願いします。 <script type="text/javascript"> var tax = 1.05; var targetClass='.price'; $(function() { $(targetClass).each(function(){ var price_a = $(this).text(); var price_b = price_a.replace(/,/g, ""); var price_c = price_b * tax; var price_d = Math.round(price_c); //切り上げ var price_d = Math.ceil(price_c); //切り捨て var price_d = Math.floor(price_c); $(this).text(price_d); }); }); </script> <p class="price">1,000</p> <p class="price">1,250</p> <p class="price">1,360</p> <p class="price">1,450</p> <p class="price">1,550</p> <p class="price">1,600</p>

  • JavaScript内の文字を連結したい

    jQueryを使っています。 「$(this).attr("id");」でidの値を取得し、それを下記の「あああああ」部分に展開して連結をさせたいですが、どうやったらいいかわかりません。 $(function(){ 　$("a").click(function() { 　　var flashvars = {}; 　　var params = { 　　　scale:'noScale', 　　　salign:'lt', 　　　menu:'false', 　　　allowfullscreen:'true', 　　　flashvars:'programId=あああああ&dispMode=outer' 　　}; 　}); }); idが「004」だとするなら 「flashvars:'programId=004&dispMode=outer'」と連結したいです。 よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する