谁帮我做做啊 - JavaScript论坛

楼主

已结贴√ 问题点数：20 回复次数：2

谁帮我做做啊

程序代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小型计算器</title>
    
</head>
<style type="text/css">
    *{ padding: 0; margin: 0;}
ul,li,ol{ list-style: none;}
img{ border: 0;}
a{ text-decoration: none;}
input,form,img,textarea,select,option{ vertical-align: middle;}
body{ width: 350px; margin: 0 auto; font-size: 12px;}

#box{ width: 350px; border-collapse: collapse; margin-top: 35px;}
#box td,#box th{ border: 2px solid rgb(2, 199, 123); line-height: 30px; text-align: center; padding: 5px;}
#box td{ font-size: 14px; font-weight: bold;}
#box th{ font-size: 20px;}
#box td:first-child{ width: 80px;}
#box td:last-child{width: 50px;}
#box input[type='button']{ width: 35px; height: 25px; background:rgb(22,160,93); border: none; color: #fff; border-radius: 5px;}
#box input[type='text']{ width: 160px; height: 22px; border-radius: 5px; border: 1px solid #CCC;}
</style>
<body>
    <table id="box">
        <tr>
            <th colspan="3">简易计算器</th>
        </tr>
        <tr>
            <td>第一个数</td>
            <td><input type="text" id="num_1"></td>
            <td rowspan="3">
                <input type="button" value="加"><br>
                <input type="button" value="减"><br>
                <input type="button" value="乘"><br>
                <input type="button" value="除"><br>
            </td>
        </tr>
        <tr>
            <td>第二个数</td>
            <td><input type="text" id="num_2"></td>
        </tr>
        <tr>
            <td>计算结果</td>
            <td><input type="text" id="result"></td>
        </tr>
    </table>
</body>
</html>
	
		
			
        
				
				
					
						图片附件: 游客没有浏览图片的权限，请 登录 或 注册

]1.使用JS任意方法完成简易计算器小程序（3分，使用jQuery实现，扣除3分）
2.点击加按钮：
2.1判断第一个数是否为字符、为空，如果是，弹出警告框：第一个数输入不合理（2分），并将输入错误的数值清空（1分）；
2.2判断第二个数是否为字符、为空，如果是，弹出警告框：第二个数输入不合理（2分），并将输入错误的数值清空（1分）；
2.3第一个数和第二个数输入都合理，将加法计算结果显示到计算结果框中，并且计算结果正确（3分）；
3.点击减按钮：
4.1判断第一个数是否为字符、为空，如果是，弹出警告框：第一个数输入不合理（2分），并将输入错误的数值清空（1分）；
4.1判断第二个数是否为字符、为空，如果是，弹出警告框：第二个数输入不合理（2分），并将输入错误的数值清空（1分）；
4.1第一个数和第二个数输入都合理，将减法计算结果显示到计算结果框中，并且计算结果正确（3分）；
4.点击乘按钮：
4.1判断第一个数是否为字符、为空，如果是，弹出警告框：第一个数输入不合理（2分），并将输入错误的数值清空（1分）；
4.2判断第二个数是否为字符、为空，如果是，弹出警告框：第二个数输入不合理（2分），并将输入错误的数值清空（1分）；
4.3第一个数和第二个数输入都合理，将减法计算结果显示到计算结果框中，并且计算结果正确（3分）；
5.点击除按钮：
5.1判断第一个数是否为字符、为空，如果是，弹出警告框：第一个数输入不合理（2分），并将输入错误的数值清空（1分）；
5.2判断第二个数是否为字符、为空，如果是，弹出警告框：第二个数输入不合理（2分），并将输入错误的数值清空（1分）；
5.3判断第二个数是否为0，如果为0，弹出警告框：操作错误，请重新输入（1分）。并将输入错误的数值清空（1分）；
5.4第一个数和第二个数输入都合理，将减法计算结果显示到计算结果框中，并且计算结果正确（3分）；

搜索更多相关主题的帖子: 个数　结果　输入　计算　一个数　

第 2 楼

得分:20

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小型计算器</title>

</head>
<style type="text/css">
    *{ padding: 0; margin: 0;}
ul,li,ol{ list-style: none;}
img{ border: 0;}
a{ text-decoration: none;}
input,form,img,textarea,select,option{ vertical-align: middle;}
body{ width: 350px; margin: 0 auto; font-size: 12px;}

#box{ width: 350px; border-collapse: collapse; margin-top: 35px;}
#box td,#box th{ border: 2px solid rgb(2, 199, 123); line-height: 30px; text-align: center; padding: 5px;}
#box td{ font-size: 14px; font-weight: bold;}
#box th{ font-size: 20px;}
#box td:first-child{ width: 80px;}
#box td:last-child{width: 50px;}
#box input[type='button']{ width: 35px; height: 25px; background:rgb(22,160,93); border: none; color: #fff; border-radius: 5px;}
#box input[type='text']{ width: 160px; height: 22px; border-radius: 5px; border: 1px solid #CCC;}
</style>
<body>
    <table id="box">
        <tr>
            <th colspan="3">简易计算器</th>
        </tr>
        <tr>
            <td>第一个数</td>
            <td><input type="text" id="num_1"></td>
            <td rowspan="3" id="operation">
                <input type="button" value="加"><br>
                <input type="button" value="减"><br>
                <input type="button" value="乘"><br>
                <input type="button" value="除"><br>
            </td>
        </tr>
        <tr>
            <td>第二个数</td>
            <td><input type="text" id="num_2"></td>
        </tr>
        <tr>
            <td>计算结果</td>
            <td><input type="text" id="result"></td>
        </tr>
    </table>
        <script type="text/javascript">
            var num1 = document.getElementById('num_1');
            var num2 = document.getElementById('num_2');
            var result = document.getElementById('result');
            var box = document.getElementById("box");
            var inputAll = document.getElementById('operation').getElementsByTagName('input');

            for(var i =0,len=inputAll.length;i<len;i++){
                inputAll[i].onclick = function (){
                    if(num1.value==''){
                        console.log("空");
                        result.value='';
                    }else if((num1.value-0)==num1.value){
                    }else{
                        console.log('输入不合理，请重新输入！');
                        num1.value = '';
                        result.value='';
                    }
                    if(num2.value==''){
                        console.log("空");
                    }else if((num2.value-0)==num2.value){
                        switch(this.value){
                            case '加':
                                result.value = (num1.value-0) + (num2.value-0);
                                break;
                            case '减':
                                result.value = (num1.value-0) - (num2.value-0);
                                break;
                            case '乘':
                                result.value = (num1.value-0) * (num2.value-0);
                                break;
                            case '除':
                                result.value = (num1.value-0) / (num2.value-0);
                                break;
                        }
                    }else{
                        console.log('输入不合理，请重新输入！');
                        num2.value = '';
                        result.value='';
                    }

                }
            }
        </script>
</body>
</html>

第 3 楼

得分:0

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>document</title>
    <style>
      table {
        border: 1px solid green;
      }
      table td {
        border: 1px solid green;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>简易计算器</th>
      </tr>
      <tr>
        <td>第一个数</td>
        <td><input type="text" /></td>
        <td rowspan="3">
          <button>加</button>
          <button>减法</button>
          <button>乘</button>
          <button>除</button>
        </td>
      </tr>
      <tr>
        <td>第2个数</td>
        <td><input type="text" /></td>
      </tr>
      <tr>
        <td>计算结果</td>
        <td><input type="text" /></td>
      </tr>
    </table>
    <script>
      const btns = document.querySelectorAll("button");
      const txts = document.querySelectorAll("input");
      btns.forEach((item, index) => {
        item.onclick = () => {
          const num_1 = parseInt(txts[0].value);
          const num_2 = parseInt(txts[1].value);
          isNaN(num_1) || isNaN(num_2)? alert('格式错误'): '';
          let result = 0;
          switch (index) {
            case 0:
              result = num_1 + num_2;
              break;
            case 1:
              result = num_1 - num_2;
              break;
            case 2:
              result = num_1 * num_2;
              break;
            case 3:
              result = num_1 / num_2;
              break;
          }
          console.log(result, num_1, num_2);
          txts[2].value = result;
        };
      });
    </script>
  </body>
</html>