计算年终奖

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>计算年终奖</title>
  6. </head>
  7. <body>
  8.     工龄：<input type="text" value="1" id="workYear">
  9.     <br>
  10.     薪资：<input type="text" value="14000" id="workMoney">
  11.     <br>
  12.     <button id="submit">计算年终奖</button>
  13.     <br>
  14.     你的年终奖是：￥ <span id="valBox"></span>
  15.     <!-- IMPORT JS -->
  16.     <script>
  17.         let workYear = document.getElementById('workYear');
  18.         let workMoney = document.getElementById('workMoney');
  19.         let submit = document.getElementById('submit');
  20.         let valBox = document.getElementById('valBox');
  22.         submit.onclick = function () {
  23.             // 1.获取文本框中的信息  
  24.             // 文本框.value 获取输入的内容，格式是字符串
  25.             let year = Number(workYear.value);
  26.             let money = Number(workMoney.value);
  27.             if (isNaN(year) || isNaN(money)) {
  28.                 alert('输入的内容是非法格式~~');
  29.                 return;
  30.             }
  31.             // 2.经过逻辑处理，计算出结果 
  32.             let result = null;
  33.             if (year < 1) {
  34.                 result = money >= 8000 ? money * 1.2 : money;
  35.             } else if (year >= 1 && year < 2) {
  36.                 result = money >= 10000 ? money * 1.7 : money * 1.5;
  37.             } else {
  38.                 result = money >= 12000 ? money * 3.2 : money * 3;
  39.             }
  40.             // 3. 把结果赋值给 #valBox 即可
  41.             valBox.innerHTML = result;
  42.         }
  43.     </script>
  44. </body>
  45. </html>