1

本例中的“value”为 5，“maxValue”为 39。进度条（wijmo 进度条）上显示的值为 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？这里有一个活生生的例子

4

2 回答 2

1

如果要显示整数，则需要四舍五入 JavaScript 对所有内容都使用浮点数。
如何在 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;
用 wijmo bar 的源代码中的第 328 行替换
percent = Math.round((value - self.min) / (self.max - self.min)) * 100;
它，它应该按照您希望的方式运行。

于 2011-08-23T11:58:55.613 回答
0

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

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

我还向 wijmo 开发人员记录了一个错误。

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

(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 );
}
})();
于 2011-08-25T16:09:55.320 回答