javascript - 用js点击按钮后，进度条长度增加

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Fund this project!</title>
<link rel="stylesheet" href="//m.sbmmt.com/m/wenda/css/base.css">
<link rel="stylesheet" href="//m.sbmmt.com/m/wenda/css/style.css">
<script src="//m.sbmmt.com/m/wenda/js/jquery-1.12.1.min.js"></script>
</head>

<img src="images/star.png" alt="">
<p id="showResult"><strong>$<span id="showRemain" ></span></strong> still needed for this project</p>
<img src="//m.sbmmt.com/m/wenda/images/arrow.png" alt="" class="arrow">

</p>

<p class="progress">
  <p id="showProgress"></p>
</p>
<p class="content">
  <p><span class="content-highlight">Only 3 days left</span> to fund this project.</p>
  <p style="padding:20px 0px;">Join the <strong><span id="showDonor">0</span></strong> other donors who have already supported this project. Every dollar helps.</p>
  <p class="clearfix">
    <form name="giveForm" onsubmit="return false;">
      <input type="text" name="giveNum" id="inputNum" value="50">
      <input type="submit" name="" id="submitNum" value="Give Now" >
    </form>
  </p>
  <a id="why">Why give $50? <span id="tooltips">Help 10 Children every month!</span></a>

</p>

</p>

<button class="btn-01">Save for later</button>
<button class="btn-02">Tell your friends</button>

</p>
</p>

$(function (){

$('#submitNum').click(function(event) {

//show the remain
var sponsor = parseInt($('#inputNum').val());
numFunded += sponsor;
var numRemain = numTotal - numFunded;
$('#showRemain').html(numRemain);

// count the Donor
numDonor ++;
$('#showDonor').html(numDonor);

// goal achieved
if (numTotal == numFunded) {
    $("#inputNum").prop( "disabled", true );
    $("#submitNum").prop( "disabled", true );
    $("#showResult").html("It's done! Thank you!");
}

// progress bar
/* -------------- your code here -----------------*/
var percentage = Math.round(numFunded / numTotal * 10000) / 100.00;

});

// Toot tips
/ -------------- your code here -----------------/

$('#showRemain').html(numRemain);
$('#showProgress').css('width',percentage+"%");
console.log(percentage);
});

</script>

</body>
</html>

如题，每次点击提交按钮numFunded都会跟着变化，现在想计算numFunded占numTotal的百分比，用进度条显示出来。但是计算出来的percentage都是0，想问大家代码错在哪里，怎么改呢？谢谢

# JavaScript

ringa_lee2146 天前600 次浏览

javascript - 用js点击按钮后，进度条长度增加

全部回复(1) 我要回复