计算资金温度计

时间:2018-04-10 11:50:18

标签: javascript jquery calculation

我使用了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();

 });

有什么想法吗?

1 个答案:

答案 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>

https://codepen.io/anon/pen/bvzmbm?page=3