我使用了CodePen(https://codepen.io/developer007/pen/NNdBQw?page=3)提供的示例,我将其变成了水平温度计。
但是,在尝试计算javascript文件中的maths语句时,我感到难过。我希望目标为111,000美元,但当前文件只计算为1000。
我也无法使进度条与进度条对齐...
// JavaScript Document
function thermometer(goalAmount, progressAmount, animate) {
"use strict";
var $thermo = $("#thermometer"),
$progress = $(".progress", $thermo),
$goal = $(".goal", $thermo),
percentageAmount;
goalAmount = goalAmount || parseFloat($goal.text()),
progressAmount = progressAmount || parseFloat($progress.text()),
percentageAmount = Math.min(Math.round(progressAmount / goalAmount *
1000) / 10, 100); //make sure we have 1 decimal point
$goal.find(".amount").text();
$progress.find(".amount").text();
$progress.find(".amount").hide();
if (animate !== false) {
$progress.animate({
"width": percentageAmount + "%"
}, 1200, function () {
$(this).find(".amount").fadeIn(200);
});
} else {
$progress.css({
"width": percentageAmount + "%"
});
$progress.find(".amount").fadeIn(200);
}
}
$(document).ready(function () {
thermometer();
});
有什么想法吗?
答案 0 :(得分:0)
您只需将传递给JQuery函数的值更改为您想要的目标金额和所需的进度。示例:我将目标移至111,000 $并将进度设置为69908 $。
<div id="thermometer">
<div class="track">
<div class="goal">
<div class="amount" id="goalAmount">111000$</div>
</div>
<div class="progress"">
<div style="display: block;" class="amount" id="progessAmount">69908$</div>
</div>
<div class="bulb"><div class="inner-bulb"></div></div>
</div>
</div>