为什么我的进度条显示浮点值？答案

【问题标题】：Why does my progress bar display a floating point value?为什么我的进度条显示浮点值？
【发布时间】：2011-11-01 21:41:07
【问题描述】：

本例中的'value'是5，'maxValue'是39。进度条上显示的值（wijmo progressbar）是5.07。 {0} 应该告诉进度条显示进度值而不是百分比。如果我将值更改为 8，保持最大值为 39，则显示的值变为 8.19。我有点困惑为什么我看到的是浮点数而不是整数。我在进度条代码中看不到任何东西，除了 self.value() 以外的任何东西，它作为整数记录到控制台。那么可能是什么导致了这种行为呢？

$("#proBarAdherence").wijprogressbar({

  value: Gymloop.completedCount,
  animationOptions: {
    duration: 1000
  },

  maxValue: Gymloop.targetSessions,
  indicatorImage: '/images/progbar_red.png',
  labelAlign: 'running',
  labelFormatString: '{0} sessions completed',
  beforeProgressChanging: function(e,data) {
    console.log('beforeprogresschanging',data);
  },
  progressChanging: function (e,data) {
    console.log('progresschanging',data);

  },
  progressChanged : function (e,data) {
    console.log('progresschanged',data);
  }
});

beforeprogresschanging Object { oldValue="5", newValue=5}
progresschanging Object { oldValue="5", newValue=0}
progresschanging Object { oldValue="0", newValue=1.17}
progresschanging Object { oldValue="1.17", newValue=1.56}
progresschanging Object { oldValue="1.56", newValue=1.95}
progresschanging Object { oldValue="1.95", newValue=2.34}
progresschanging Object { oldValue="2.34", newValue=2.73}
progresschanging Object { oldValue="2.73", newValue=3.12}
progresschanging Object { oldValue="3.12", newValue=3.51}
progresschanging Object { oldValue="3.51", newValue=3.9}
progresschanging Object { oldValue="3.9", newValue=4.29}
progresschanging Object { oldValue="4.29", newValue=4.68}
progresschanging Object { oldValue="4.68", newValue=5.07}
progresschanged Object { oldValue="5", newValue=5}

更新

我可以在 progressChanging 事件期间看到该值，但不确定动画完成后如何使标签显示 5 而不是 5.07？有一个活生生的例子here

【问题讨论】：

标签： javascript jquery-ui wijmo

【解决方案1】：

如果要显示整数，则需要四舍五入 JavaScript 对所有内容都使用浮点数。
How do I convert a float number to a whole number in JavaScript?

--- 对更新的响应 ---
我对那个确切的进度条不是特别熟悉，但它们都很相似。
发生的情况是您在变量初始化时调用了一次，而不是在变量更新时调用。

有一个与正在更新的加载栏相关的事件，您希望在其中对已完成的情况进行舍入在传递到进度条之前计数。

我不确定我是否能很好地解释发生的事情
value = Math.round(myobj.completedCount), ---update event--> completedCount = newValue
-- -update event---> completedCount = newValue
您需要做的是捕获该更新事件并在那里舍入变量。
---更新事件--> completedCount = round(newValue)

----- TRY THIS-----
问题所在
percent = (value - self.min) / (self.max - self.min) * 100;
用
percent = Math.round((value - self.min) / (self.max - self.min)) * 100;
替换 wijmo 栏源代码中的第 328 行，它应该按照你想要的方式运行。

【讨论】：

应该提到我已经尝试过了。它没有任何区别。我更新了代码。
我又做了一次更新。我现在可以看到浮点数的来源，但不知道如何更改它们。我的完成计数变量没有改变，所以我不确定您的意思是 completedCount = round(newValue)
很抱歉，我不能提供更多帮助。我阅读了它的来源，并不确定你的问题是什么=/所以我担心我可能会让你更加困惑。
只要你保持这个比率，它就会保持一个 INT jsfiddle.net/bQhCX

【解决方案2】：

我最后还是这样做了（编辑进度条 js 文件 - 呸）：

self.label.html(self._getFormatString(
            o.labelFormatString, Math.round(percent), Math.round(curValue)));

我还与 wijmo 开发人员记录了bug。

另一个不编辑源代码的选项是：

(function(){
// Store a reference to the original html method.
var originalHtmlMethod = jQuery.fn.html;

// Define overriding method
jQuery.fn.html = function(){

// Execute our override - rounding the value
// being passed to jQuery's html() function
// only when the progressbar label is being
// updated
if ($(this).hasClass('ui-progressbar-label')) {
arguments[0] = Math.round(arguments[0]);
}

// Execute the original jquery method for all other html() calls on the     page
originalHtmlMethod.apply( this, arguments );
}
})();

【讨论】：