实现整数输出的WordPress转化率百分比计算器

Got it, let's get this sorted so your calculator shows integer results—since you can’t have a fraction of a business lead, we’ll use upward rounding to make sure even 0.1 becomes 1. Below are two solutions: modifying your existing code, or using a WordPress plugin if you’d rather avoid scripting.

Solution 1: Modify Your Existing JavaScript Code #

The core fix is using JavaScript’s Math.ceil() function, which rounds any decimal up to the nearest whole number. I’ve also fixed a few small bugs in your code (like typos and invalid variable names) to ensure it runs smoothly.

Here’s the full updated code with changes marked:

<style> 
.entry-title { display: none; } 
.calculator { margin-bottom: 80px; } 
.calculator-banner { padding: 100px 0px; } 
.calculator-banner h1 { font-size: 55px; font-weight: 300; color: #4d4d4e; text-align: center; } 
.calculator-banner p { text-align: center; font-size: 25px; color: #4d4d4e; padding: 0px; font-weight: 100; line-height: normal; max-width: 800px; margin: 0 auto; margin-top: 20px; } 
.calculator .col-sm-4:first-child { border-right: 1px solid #f0f0f0; } 
.calculator .row:nth-child(even) { background: #f0f0f0; } 
.calculator .col-sm-4 p { margin-top: 0px; } 
.calculator p { padding: 10px; } 
input { background: none; margin: 10px; } 
</style> 

<div class="calculator-banner"> 
  <div class="container"> 
    <h1>Conversion <strong>Calculator</strong></h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at dui eleifend neque ullamcorper mattis sed sed risus.</p> 
  </div> 
</div> 

<div class="calculator"> 
  <div class="row"> 
    <div class="col-sm-4"> </div> 
    <div class="col-sm-4"> <h5>Without Software</h5> </div> 
    <div class="col-sm-4"> <h5>With Software</h5> </div> 
  </div> 
  <div class="row"> 
    <div class="col-sm-4"> <p>Website Visitors Per Month</p> </div> 
    <div class="col-sm-4"> <input type="number" name="price" id="websitevisitors-without" value="10000" onchange="myChangeFunction(this)" /> </div> 
    <div class="col-sm-4"> <input type="number" name="price" id="websitevisitors-with" value="10000" /> </div> 
  </div> 
  <div class="row"> 
    <div class="col-sm-4"> <p>Standard Form Fill Conversion </p> </div> 
    <div class="col-sm-4"> <input type="number" name="qty" id="standard-form-fill-without" value="2"/> </div> 
    <div class="col-sm-4"> <input type="number" name="qty" id="standard-form-fill-with" value="2"/> </div> 
  </div> 
  <div class="row"> 
    <div class="col-sm-4"> <p>Number of Form Fill Enquiries</p> </div> 
    <div class="col-sm-4"> <input type="number" name="total" id="number-of-form-fills-without" value="200" readonly /> </div> 
    <div class="col-sm-4"> <input type="number" name="total" id="number-of-form-fills-with" value="200" readonly /> </div> 
  </div> 
  <div class="row"> 
    <div class="col-sm-4"> <p>Conversion from Identified Website Visitors</p> </div> 
    <div class="col-sm-4"> </div> 
    <div class="col-sm-4"> </div> 
  </div> 
  <div class="row"> 
    <div class="col-sm-4"> <p>Number of Website Visitor Conversions</p> </div> 
    <div class="col-sm-4"> </div> 
    <div class="col-sm-4"> </div> 
  </div> 
  <div class="row"> 
    <div class="col-sm-4"> <p>Total Number of Opportunities</p> </div> 
    <div class="col-sm-4"> <input type="number" name="total" id="total-opportunities-without" value="200" readonly /> </div> 
    <div class="col-sm-4"> <input type="number" name="total" id="total-opportunities-with" value="200" readonly /> </div> 
  </div> 
  <div class="row"> 
    <div class="col-sm-4"> <p>Conversion of Opportunities to Sales</p> </div> 
    <div class="col-sm-4"> <input type="number" name="total" id="conversion-of-opportunities-without" value="20" /> </div> 
    <div class="col-sm-4"> <input type="number" name="total" id="conversion-of-opportunities-with" value="20" /> </div> 
  </div> 
  <div class="row"> 
    <div class="col-sm-4"> <p>Number of Sales</p> </div> 
    <div class="col-sm-4"> <input type="number" name="total" id="number-of-sales-without" value="40" /> </div> 
    <div class="col-sm-4"> <input type="number" name="total" id="number-of-sales-with" value="40" /> </div> 
  </div> 
  <div class="row"> 
    <div class="col-sm-4"> <p>Average Order Value</p> </div> 
    <div class="col-sm-4"> <input type="number" name="total" id="average-order-value-without" value="1000" /> </div> 
    <div class="col-sm-4"> <input type="number" name="total" id="average-order-value-with" value="1000" /> </div> 
  </div> 
  <div class="row"> 
    <div class="col-sm-4"> <p>Revenue Generated</p> </div> 
    <div class="col-sm-4"> <input type="number" name="total" id="revenue-generated-without" value="40000" /> </div> 
    <div class="col-sm-4"> <input type="number" name="total" id="revenue-generated-with" value="40000" /> </div> 
  </div> 
  <div class="row"> 
    <div class="col-sm-4"> <p>12month business benefit</p> </div> 
    <div class="col-sm-4"> <input type="number" name="total" id="year-business-benefit-without" value="480000" /> </div> 
    <div class="col-sm-4"> <input type="number" name="total" id="year-business-benefit-with" value="480000" /> </div> 
  </div> 
</div> 

<script> 
$('#websitevisitors-without, #standard-form-fill-without, #conversion-of-opportunities-without, #number-of-sales-without, #average-order-value-without, #year-business-benefit-without, #revenue-generated-without').change(function() { 
  // Removed .toFixed(2) since we want integers
  var webvisitorswithout = parseFloat($('#websitevisitors-without').val()); 
  var standardformfillwithout = parseFloat($('#standard-form-fill-without').val()); 
  // Fixed typo in variable name
  var conversionOfOpportunitiesWithout = parseFloat($('#conversion-of-opportunities-without').val()); 
  var numberofsaleswithout = parseFloat($('#number-of-sales-without').val()); 
  var averageordervaluewithout = parseFloat($('#average-order-value-without').val()); 
  var revenuegeneratedwithout = parseFloat($('#revenue-generated-without').val()); 

  // Added Math.ceil() to round up to nearest integer
  $('#number-of-form-fills-without, #total-opportunities-without').val(Math.ceil(webvisitorswithout * standardformfillwithout / 100)); 
  $('#number-of-sales-without').val(Math.ceil(webvisitorswithout * standardformfillwithout / 100 * conversionOfOpportunitiesWithout / 100)); 
  $('#revenue-generated-without').val(Math.ceil(averageordervaluewithout * numberofsaleswithout)); 
  $('#year-business-benefit-without').val(Math.ceil(revenuegeneratedwithout * 12)); 
}); 
</script> 

<script> 
$('#websitevisitors-with, #standard-form-fill-with, #conversion-of-opportunities-with, #number-of-sales-with, #average-order-value-with, #year-business-benefit-with, #revenue-generated-with').change(function() { 
  var webvisitorswith = parseFloat($('#websitevisitors-with').val()); 
  var standardformfillwith = parseFloat($('#standard-form-fill-with').val()); 
  // Fixed typo in variable name
  var conversionOfOpportunitiesWith = parseFloat($('#conversion-of-opportunities-with').val()); 
  var numberofsaleswith = parseFloat($('#number-of-sales-with').val()); 
  var averageordervaluewith = parseFloat($('#average-order-value-with').val()); 
  var revenuegeneratedwith = parseFloat($('#revenue-generated-with').val()); 

  // Added Math.ceil() to round up
  $('#number-of-form-fills-with, #total-opportunities-with').val(Math.ceil(webvisitorswith * standardformfillwith / 100)); 
  $('#number-of-sales-with').val(Math.ceil(webvisitorswith * standardformfillwith / 100 * conversionOfOpportunitiesWith / 100)); 
  $('#revenue-generated-with').val(Math.ceil(averageordervaluewith * numberofsaleswith)); 
  $('#year-business-benefit-with').val(Math.ceil(revenuegeneratedwith * 12)); 
}); 
</script> 

<script type="text/javascript"> 
// Fixed invalid variable name (no hyphens in JS variable names)
function myChangeFunction(websiteVisitorsWithout) { 
  var input2 = document.getElementById('websitevisitors-with'); 
  input2.value = websiteVisitorsWithout.value; 
} 
</script>

Key changes made:

• Replaced all calculations with Math.ceil() to ensure upward rounding
• Removed unnecessary .toFixed(2) calls that added decimal places
• Fixed typo in variable name converstionofopportunitieswihtout
• Corrected invalid variable name in the myChangeFunction (hyphens aren’t allowed in JS variable names)

Solution 2: Use a WordPress Plugin (No Code Needed) #

If you’d rather avoid editing code, use a WordPress calculator plugin that supports rounding:

• Calculated Fields Form: This popular plugin lets you build calculators with a drag-and-drop interface. When setting up your calculation rules, use the CEIL() function to round up results. Just create fields for each input, add read-only fields for outputs, and configure the formulas with upward rounding.
• Calculator Builder: Another option with visual controls—you can set field types, define calculations, and enable rounding directly in the plugin settings.

Once you build the calculator, just insert its shortcode into your WordPress page to replace your current code.

内容的提问来源于stack exchange，提问作者owengaudion