案例1

计算增加后工资的HTML示例

原创于 2018-05-26 15:23:40 发布 · 283 阅读

0 ·

CC 4.0 BY-SA版权

本文提供了一个HTML页面示例，通过简单的JavaScript代码实现根据工龄不同百分比增加工资的功能。用户输入工作年份及当前工资后，点击按钮即可得到调整后的工资数额。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--1.编写一个程序，计算增加后的工资。要求工龄满5，增加20%工资；若2—4，则增加15%；若小于2，则增加10%工资。-->
<div id="box">
  <p>输入工作年份<input type="text" id="life"></p>
  <p>输入工资<input type="text" id="wage"></p>
  <button id="btn">点击我计算</button>
  <p id="result">结果：</p>
</div>
<script>
  var btn =document.querySelector("#btn");
  var life=document.querySelector("#life");
  var wage =document.querySelector("#wage");
  var result =document.querySelector("#result");
  btn.addEventListener('click',function () {
    var cont =parseInt(life.value);
    life.value ='';
    var qian =parseInt(wage.value);
    wage.value ='';
    if(cont >=5){
      qian+=qian*0.2;
    }else if(cont>=2&&cont<=4){
      qian+=qian*0.15;
    }else{
      qian+=qian*0.1;
    }
   return result.innerText=qian;
  })
</script>
</body>
</html>