个人中心
gpt4 book ai didi

javascript - Jquery 移动输出

转载 作者：行者123 更新时间：2023-11-28 03:18:44 25 4
gpt4 key购买 nike

我正在尝试构建一个简单的养老金计算器。三个输入在一个表单页面中进行，结果显示在另一个页面中。输出为文本格式。但是会出现以下问题:

输出显示为例如2100021000 而不是实际的 21000 这发生在所有计算结果中。

  1. 如何在不重复的情况下正确显示结果？
  2. 如何在类似于文本输入表单页面的结果页面中的三个单独的文本框中显示结果？我对此很陌生。需要帮助。

index.html

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<title>Pension Calculator</title>

<link rel="stylesheet" href="js1/jquery.mobile-1.4.3.min.css" type="text/css"/>
<script src="js1/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js1/jquery.mobile-1.4.3.min.js" type="text/javascript"></script>

<script>
// Bind to 'pageinit' event for our data page
//$(document).delegate('#data', 'pageinit', function(){
     $(document).on('pagecreate', '#page1', function() {
     // Do some processing when the button with id 'calc' is clicked or tapped

    $('#calc').bind('click', function() {
        //event.preventDefault();
          var basic = $('[name="basic"]').val(),
              pbasic = $('[name="pbasic"]').val(),
              gratuity = $('[name="gratuity"]').val(),
              da = $('[name="da"]').val(),
              years = $('[name="years"]').val(),
              total = $('[name="total"]').val(),


     basic = basic + (basic*da/100);
     pbasic = basic/2;     
     da = pbasic*da/100;
     gratuity = (basic) + ((da))*15/26 * years;

    if  
        (gratuity > 1000000)

        gratuity = 10000000;        

    total = (pbasic) + (da);
    gratuity = gratuity.toFixed(2);
    pbasic = pbasic.toFixed(2);
    total = total.toFixed(2);

      // Get to the DOM node that has the actual BMI text
          //  while ($total.children().length) {
              //  $total = $total.children().first();


            // Set it to the calculated value
           // $total.text(total);


              $result = $('#results #gratuity');
              $result.text(gratuity);


              $result = $('#results #pbasic');
              $result.text(pbasic);


              $result = $('#results #total');
              $result.text(total);





    });   
});
</script>

</head>

<body>
<div id="page1" data-role="page">
<header data-role="header">
<h1>Simple Pension Calculator</h1>  

</header>

<div data-role="content" data-theme="a">


    <div data-role="content">

    <form id="theForm">


        <div data-role="fieldcontain" data-inset="true">

         <label for="basic">Present Basic (Basic including Grade Pay + NPA)</label>
                <input type="number" name="basic" id="basic" value="0" autofocus required>
            </div>

            <div data-role="fieldcontain">
                <label for="years">Years of Service</label>
                <input type="number" name="years" id="years" value="0" required>
            </div>

            <div data-role="fieldcontain">
                <label for="da">Existing DA (%)</label>
                <input type="number" name="da" id="da" value="0" required>
            </div>
            </form>
            <a id="calc" href="#results" data-role="button" data-icon="gear">Calculate</a>
        </div>
        </div>
        </div>


<div id="results" data-url="results" data-role="page">
<div data-role="header">
<h1>Results</h1>
</div>

<div data-role="content">
Your Gratuity:<br>
<span id="gratuity"><span style="font-size: 52px; "><strong>24</strong></span></span><br>
Your Basic Pension:<br>
<span id="pbasic"><span style="font-size: 52px; "><strong>24</strong></span></span><br>
Your Pension:<br><br>
<span id="total"><span style="font-size: 52px; "><strong>24</strong></span></span>
</div>
</div>
</body>
</html>

最佳答案

像这样清理你的代码:

<div id="page1" data-role="page">
    <header data-role="header">
        <h1>Simple Pension Calculator</h1>  
    </header>
    <div role="main" class="ui-content">
        <form id="theForm">
            <div data-role="fieldcontain" data-inset="true">
                <label for="basic">Present Basic (Basic including Grade Pay + NPA)</label>
                <input type="number" name="basic" id="basic" value="0" autofocus required />
            </div>
            <div data-role="fieldcontain">
                <label for="years">Years of Service</label>
                <input type="number" name="years" id="years" value="0" required />
            </div>
            <div data-role="fieldcontain">
                <label for="da">Existing DA (%)</label>
                <input type="number" name="da" id="da" value="0" required />
            </div>
        </form>
        <a id="calc" href="#results" data-role="button" data-icon="gear">Calculate</a>
    </div>
</div>

<div id="results" data-url="results" data-role="page">
    <div data-role="header">
        <h1>Results</h1>
    </div>

    <div role="main" class="ui-content">
        Your Gratuity:<br />
        <span id="gratuity" class="resultspan"></span><br />
        Your Basic Pension:<br />
        <span id="pbasic"  class="resultspan"></span><br />
        Your Pension:<br />
        <span id="total" class="resultspan"></span>
    </div>
</div>

使用 CSS 类而不是内联样式设置结果范围:

.resultspan {
    font-size: 52px;
    font-weight: bold;
}

在脚本中，pbasic、gratuity 和 total 不是从 DOM 中读取的，而是在计算过程中设置的，因此将它们初始化为零。当从输入中读取其他值时，您可以使用 parseInt() 来确保在计算中使用它们之前将文本转换为整数:

$('#calc').on('click', function() {        
    //event.preventDefault();
      var basic = parseInt($('#basic').val()),
          da = parseInt($('#da').val()),
          years = parseInt($('#years').val()),
          pbasic = 0,
          gratuity = 0,
          total = 0;

     basic = basic + (basic*da/100);
     pbasic = basic/2;     
     da = pbasic*da/100;
     gratuity = (basic) + ((da))*15/26 * years;

    if (gratuity > 1000000)
        gratuity = 10000000;        

    total = (pbasic) + (da);
    gratuity = gratuity.toFixed(2);
    pbasic = pbasic.toFixed(2);
    total = total.toFixed(2);


    $('#results #gratuity').text(gratuity);
    $('#results #pbasic').text(pbasic);
    $('#results #total').text(total);
});

Working DEMO

关于javascript - Jquery 移动输出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25751868/

25 4 0
文章推荐： javascript - 如何在 Angular 单元测试中设置 html5Mode？使用 karma
文章推荐： javascript - 判断 iframe 是否已经加载
文章推荐： javascript - 如何根据 CSS 类和二进制数字开/关位置突出显示特定列值
文章推荐： javascript - 克隆表单元素并增加名称标签
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com