简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 用js点击按钮后，进度条长度增加
ringa_lee
ringa_lee 2017-04-11 12:07:33
0
1
790

<!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="css/base.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.12.1.min.js"></script>
</head>

<body>
<p class="fund">

<p class="fund-remain">

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

</p>

<p class="fund-detail">

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

<p class="fund-btn">

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

</p>
</p>

<script>
var numTotal = 500; //-- Project Goal
var numFunded = 0; //-- Funded
var numDonor = 0; //-- no. of donor
var numRemain = 500; //-- Remained
var percentage = 0;

$(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，想问大家代码错在哪里，怎么改呢？谢谢

ringa_lee
ringa_lee

ringa_lee

reply all(1)
阿神
阿神2017-04-11 12:09:33 1 floor

看你代码，累的眼疼～

解决方案：把函数里面最后一句话var percentage=......的var去掉就可以啦。

理由：函数内声明变量，导致内部变量覆盖外部变量。

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！