我想在jQuery

问题描述 投票：0回答：3

基本上，我正在尝试在JQuery中创建一个简单的计算器，因为我在JavaScript中首次创建，但在jQuery函数中有一些混乱。 首先是我的HTML代码。

<body> <h1>Calculator in jQuery</h1> <div class="calculator"> <form name="myform"> <tr> <td> <input type="screen" id="screen" name="screen"><br> </td> </tr> <tr> <td> <input type="button" name="7" value="7"> <input type="button" name="8" value="8"> <input type="button" name="9" value="9"> <input type="button" name="/" value="/"> <br> <input type="button" name="4" value="4"> <input type="button" name="5" value="5"> <input type="button" name="6" value="6"> <input type="button" name="*" value="*"> <br> <input type="button" name="1" value="1"> <input type="button" name="2" value="2"> <input type="button" name="3" value="3"> <input type="button" name="-" value="-"> <br> <input type="button" name="C" value="C"> <input type="button" name="CE" value="CE"> <input type="button" name="0" value="0"> <input type="button" name="+" value="+"> <br> <input type="button" name="=" value="="> </form> </body> 
在jQuery标签中，我有基本问题，例如我创建了3个功能，但是如何链接它们以及如何从该功能中获取输出。
这是我的jQuery功能：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){ function update(value){ $("#screen").html(.myform .screen .value) +=value; } function result(value){ $("#") } function form_reset(value){ $("#") } }); </script>
您正在尝试与JavaScript相同的代码，您必须知道jQuery的基本工作。这是jQuery中计算器的代码。 样式标签
javascript jquery
3个回答
1
投票
<style> body{ margin: 0; padding: 0; box-sizing: border-box; text-align: center; } h1{ text-align: center; } .main{ margin-left: 470px; background-color: #1f1f21; width: 30%; } #display{ width: 93%; padding: 5px; font-size: 55px; color: black; background-color: #fff; text-align: right; border: 1px solid black; outline: none; } .clear{ background-color: red; color: #fff; } input{ background-color: #333; color: #fff; margin-top: 5px; font-size: 25px; width: 95px; height: 95px; border-radius: 40px; border-width: 0; } .finalresult{ background-color: #001010; } </style>

现在朝jQuery标签迈 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   

<script>
    $(document).ready(function(){
      $(".clc").click(function(){
        $("#display").val($("#display").val() +$(this).val());
      });
      $(".clear").click(function(){
        $("#display").val('');
      }); 
      $(".result").click(function(){
        $("#display").val(eval($("#display").val()));
      });
    });
</script>

这是那个基本的HTML代码

<h1>Simple Calculator in jQuery</h1><br><br>
    <div class="main">
<!--form tags-->
    <input id="display" type="text" placeholder=""><br>

    <input class="clc" type="button" value="7">
    <input class="clc" type="button" value="8">
    <input class="clc" type="button" value="9">
    <input class="clc" type="button" value="*">
    <br>
    <input class="clc" type="button" value="4">
    <input class="clc" type="button" value="5">
    <input class="clc" type="button" value="6">
    <input class="clc" type="button" value="/">
    <br>
    <input class="clc" type="button" value="1">
    <input class="clc" type="button" value="2">
    <input class="clc" type="button" value="3">
    <input class="clc" type="button" value="-">
    <br>
    <input class="clear" type="button" value="C">
    <input class="clc" type="button" value="0">
    <input class="clc" type="button" value="+">
    <input class="result" type="button" value="=">
</div>


您可以用
$.on(event, handler)
0
投票
$.val()

.

获取按钮的值。
然后，您可以使用
isNaN()
检查单击按钮是否对应一个数字或非数字。

*请注意，

$.val()

主要用于
<input>, <select>, and <textarea>

元素。对于其他元素，您通常会使用

$.html()或

$.attr()
。 


$(function(){
  $("input[type=button]").on("click", function(){
    let val = $(this).val();
    if(isNaN(val))
    {
      //Handle operators
      console.log("You entered an operator!", val);
    }
    else
    {
      //Handle numbers
      console.log("You entered a number!", val);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <h1>Calculator in jQuery</h1>
    <div class="calculator">
    <form name="myform">
        <tr>
            <td>
                <input type="screen" id="screen" name="screen"><br>
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" name="7" value="7">
                <input type="button" name="8" value="8">
                <input type="button" name="9" value="9">
                <input type="button" name="/" value="/">
                <br>
                <input type="button" name="4" value="4">
                <input type="button" name="5" value="5">
                <input type="button" name="6" value="6">
                <input type="button" name="*" value="*">
                <br>
                <input type="button" name="1" value="1">
                <input type="button" name="2" value="2">
                <input type="button" name="3" value="3">
                <input type="button" name="-" value="-">
                <br>
                <input type="button" name="C" value="C">
                <input type="button" name="CE" value="CE">
                <input type="button" name="0" value="0">
                <input type="button" name="+" value="+">
                <br>
                <input type="button" name="=" value="=">
    </form> 
</body>







    






$(function(){
  $("input[type=button]").on("click", function(){
    let val = $(this).val();
    if(isNaN(val))
    {
      //Handle operators
      console.log("You entered an operator!", val);
    }
    else
    {
      //Handle numbers
      console.log("You entered a number!", val);
    }
  });
});



    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        







    
	

    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2025. All rights reserved.