为了账号安全,请及时绑定邮箱和手机立即绑定

一个简单易懂的做法

<!DOCTYPE html>
<html>
  <head>
    <title>事件</title>
    <script type="text/javascript">
      function count() {
        //获取第一个输入框的值
        var a = document.getElementById("txt1").value - 0;
        //获取第二个输入框的值
        var b = document.getElementById("txt2").value - 0;
        //获取选择框的值
        var c = document.getElementById("select");
        var fruit = document.getElementById("fruit");
        //获取通过下拉框来选择的值来改变加减乘除的运算法则
        switch (c.value) {
          case "+":
            fruit.value = a + b;
            break;
          case "-":
            fruit.value = a - b;
            break;
          case "*":
            fruit.value = a * b;
            break;
          case "/":
            fruit.value = a / b;
            break;
        }
        //设置结果输入框的值
      }
    </script>
  </head>
  <body>
    <input type="text" id="txt1" />
    <select id="select">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
    <input type="text" id="txt2" />
    <input type="button" value=" = " onclick="count()" />
    <!--通过 = 按钮来调用创建的函数,得到结果-->
    <input type="text" id="fruit" />
  </body>
</html>

正在回答

4 回答

<!DOCTYPE html><html> <head>  <title> 事件</title>    <script type="text/javascript">   function count(){    var a = document.getElementById('txt1').value;       //获取第一个输入框的值    var b = document.getElementById('txt2').value;	//获取第二个输入框的值	var f = document.getElementById('select').value; 	//获取选择框的值	//获取通过下拉框来选择的值来改变加减乘除的运算法则    //设置结果输入框的值     document.getElementById('fruit').value = eval(a + f + b);   }  </script>  </head>  <body>   <input type='text' id='txt1' />    <select id='select'>		<option value='+'>+</option>		<option value="-">-</option>		<option value="*">*</option>		<option value="/">/</option>   </select>   <input type='text' id='txt2' />    <input type='button' value=' = ' onclick="count()" /> <!--通过 = 按钮来调用创建的函数,得到结果-->    <input type='text' id='fruit' />    </body></html>


0 回复 有任何疑惑可以回复我~

<!DOCTYPE html>

<html>

<head>

<title> 事件 </title>   

<script type = "text/javascript" >

function count() {

var a = document.getElementById("txt1").value;

var b = document.getElementById("txt2").value;

var sum = 0;

//获取第一个输入框的值

//获取第二个输入框的值

//获取选择框的值

var c = document.getElementById("select").value;

//获取通过下拉框来选择的值来改变加减乘除的运算法则

switch(c) {

case "+":

sum = parseInt(a)+ parseInt(b);

break;

case "-":

sum = parseInt(a) - parseInt(b);

break;

case "*":

    sum = parseInt(a) * parseInt(b);

    break;

case "/":

    sum =parseInt(a) / parseInt(b);

    break;

}

document.getElementById("fruit").value=sum;

}

</script>

</head> 

<body>

<input type = 'text'id = 'txt1' / >

<select id = 'select' onchange="count()">

<option value = '+' > + < /option> 

<option value = "-" > - < /option>

<option value = "*" > * < /option> 

<option value = "/" > /</option >

</select>

<input type = 'text'id = 'txt2' / >

<input type = 'button'value = ' = 'onclick="count()" / > 

<!--通过 = 按钮来调用创建的函数,得到结果-->

<input type = 'text'id = 'fruit' / >

</body> 

</html>


0 回复 有任何疑惑可以回复我~

为什么-0就变成number类型了

0 回复 有任何疑惑可以回复我~
#1

蜘蛛侦探reg

这是js的隐式转化,同理存在显示转化即利用方法转化数据类型。 隐式转化 a="2"-1; //a=1 b="2"+1; //b=3 c="2"-"1";//c=1 这里的a,b,c都是隐式转化为number类型
2022-04-07 回复 有任何疑惑可以回复我~
var fruit = document.getElementById("fruit");

提前赋值,是挺好的,省了一些代码

var b = document.getElementById("txt2").value - 0;

隐式转换为数字也很巧妙啊

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

一个简单易懂的做法

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信