一个简单易懂的做法-慕课网

一个简单易懂的做法

来源：6-11 编程练习

初学小萌新

2020-12-19 20:45

<!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回答

慕函数3294430: 2022-01-21 16:37:32

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

一只小白鼠i

2021-04-06 11:26:02

<!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
慕无忌4360779

2021-04-02 21:59:22

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

1 0

蜘蛛侦探re...

这是js的隐式转化,同理存在显示转化即利用方法转化数据类型。隐式转化 a="2"-1; //a=1 b="2"+1; //b=3 c="2"-"1";//c=1 这里的a，b，c都是隐式转化为number类型

2022-04-07 16:55:29

共 1 条回复 >
qq_默默_9

2021-01-25 10:56:48
```
var fruit = document.getElementById("fruit");
```
提前赋值，是挺好的，省了一些代码
```
var b = document.getElementById("txt2").value - 0;
```
隐式转换为数字也很巧妙啊
0 0

JavaScript进阶篇

本课程从如何插入JS代码开始，带您进入网页动态交互世界

468060 学习 · 21891 问题

查看课程

相似问题

兄弟们，我这个简单易懂，可做参考一下

回答 1

测试有效，简单易懂

回答 2

应该是最简单易懂的了

回答 1

如何写出一个简易加法计算器

回答 4

一个简单的钟表

回答 4

打开慕课网App查看更多内容