| 网站首页 | 业界新闻 | 小组 | 交易 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
共有 682 人关注过本帖
标题:谁帮我做做啊
只看楼主 加入收藏
tb2766822082
Rank: 1
等 级:新手上路
帖 子:2
专家分:0
注 册:2020-1-7
结帖率:0
收藏
已结贴  问题点数: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分);
附件: 游客没有浏览附件的权限,请 登录注册
搜索更多相关主题的帖子: 个数 结果 输入 计算 一个数 
2020-01-07 10:04
z1151728042
Rank: 2
等 级:论坛游民
帖 子:4
专家分:20
注 册:2019-7-3
收藏
得分: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>
2020-01-13 16:14
mwnb
Rank: 2
等 级:论坛游民
帖 子:7
专家分:20
注 册:2020-3-26
收藏
得分: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>
2020-04-09 02:12
快速回复:谁帮我做做啊
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.055172 second(s), 8 queries.
Copyright©2004-2020, BCCN.NET, All Rights Reserved