北京乐逍遥网站设计有限公司|乐逍遥网站设计|乐逍遥网站建设|乐逍遥建站|php知识|前端技术|后端技术|网站源码|移动开发|网站运营|UI设计|数据库|网站设计|网站开发|小程序|乐逍遥每日一句|乐逍遥福利图片
主页 > 前端开发 > JavaScript >

js如何实现简易计算器

时间:2020-03-12  编辑:

效果图:

QQ截图20200312175201.jpg

首先,我们在body中制作页面需要的这些元素

1

2

3

4

5

6

7

8

9

10

<input type="text" id="ipt1">

 <select name="" id="slt">

  <option value="+">+</option>

  <option value="-">-</option>

  <option value="*">*</option>

  <option value="/">/</option>

 </select>

 <input type="text" id="ipt2">

 <button id="btn">=</button>

<input type="text" id="ipt3">

上面的id你可随意起,好用就行。

(推荐教程:javascript教程

javascript代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

<script>

  //获取页面标签的元素

  var inpt1 = document.getElementById("ipt1");

  var inpt2 = document.getElementById("ipt2");

  var inpt3 = document.getElementById("ipt3");

  var selt = document.getElementById("slt");

  var butn = document.getElementById("btn");

    

 //给等于按钮添加点击事件

  butn.onclick = function(){

   //将三个输入框的value值分别赋给变量t1,t2,t3中

   var t1 = parseFloat(ipt1.value);

   var t2 = parseFloat(ipt2.value);

   var t3 = parseFloat(ipt3.value);

  

 //定义一个结果变量用于存放结果

   var endValue;

   //用switch语句来写运算语句

   switch(slt.value){

    case "+":

    endValue = t1 + t2;

    break;

    case "-":

    endValue = t1 - t2;

    break;

    case "*":

    endValue = t1 * t2;

    break;

    case "/":

    endValue = t1 / t2;

    break;

    default:

    endValue = t1 + t2;

    break;

   }

   //将结果放入结果输入框的value值中,在页面上显示

   inpt3.value = endValue;

  }

 </script>

</body>

返回
顶部