lovecoding
/
J250913


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>简易计算器</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Microsoft Yahei", sans-serif;
    }
    body {
      background-color: #f5f5f5;
      padding: 50px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .calc-container {
      background: #fff;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      display: flex;
      align-items: center;
      gap: 15px;
    }
    input[type="number"], select, button {
      padding: 12px 15px;
      border: 1px solid #e5e6eb;
      border-radius: 4px;
      font-size: 16px;
      outline: none;
      transition: border-color 0.3s;
    }
    input[type="number"]:focus, select:focus {
      border-color: #409eff;
      box-shadow: 0 0 5px rgba(64,158,255,0.2);
    }
    select {
      width: 80px;
    }
    button {
      background-color: #409eff;
      color: #fff;
      border: none;
      cursor: pointer;
      padding: 12px 20px;
    }
    button:hover {
      background-color: #337ecc;
    }
    .result-box {
      margin-top: 20px;
      font-size: 18px;
      color: #333;
      padding: 12px 20px;
      background: #fff;
      border-radius: 4px;
      box-shadow: 0 1px 5px rgba(0,0,0,0.1);
      min-width: 450px;
      text-align: center;
    }
  </style>
  <script src="../js/jquery-2.1.4.js"></script>
</head>
<body>
<div class="calc-container">
  <input type="number" id="num1" placeholder="请输入数字1">
  <select id="operator">
    <option value="0">+</option>
    <option value="1">-</option>
    <option value="2">*</option>
    <option value="3">/</option>
  </select>
  <input type="number" id="num2" placeholder="请输入数字2">
  <button onclick="calculate()">=</button>
</div>
<div class="result-box" id="result">请点击=计算结果</div>

<script>
  function calculate() {
    // 获取输入值
    const num1 = $('#num1').val();
    const num2 = $('#num2').val();
    const operator = $('#operator').val();

    // 非空校验
    if (!num1 || !num2) {
      $('#result').text('请输入完整的数字！');
      return;
    }

    // 发送异步请求
    $.ajax({
      url: 'http://c46a5489.natappfree.cc/calc',
      type: 'get',
      data: {
        num1: num1,
        num2: num2,
        operator: operator
      },
      dataType: 'json',
      success: function(res) {
        if (res.success) {
          $('#result').text(`计算结果：${res.data}`);
        } else {
          $('#result').text('计算失败：' + res.msg);
        }
      },
      error: function() {
        $('#result').text('网络错误，请求失败！');
      }
    });
  }
</script>
</body>
</html>