使用Javascript简单计算器

作者:wxk_前端开发 时间:2024-04-29 13:37:15 

本文实例为大家分享了js简单计算器的实现代码,供大家参考,具体内容如下

1.html代码


<input type="text" name="" id="txt-num1">//输入第一个数
<select id="dropdown">
 <option value="+">+</option>
 <option value="-">-</option>
 <option value="*">*</option>
 <option value="/">/</option>
</select>//下拉菜单,让用户选择自己需要的运算符
<input type="text" name="" id="txt-num2">//输入第二个数
<button type="" id="btn">=</button>//当点击等于时就会输出结果
<input type="" name="" id="txt-result">//结果存储在这里

2.JS代码


<script type="text/javascript">
 var btn_result=document.getElementById('btn');//获取等号的ID
 var num1=document.getElementById('txt-num1');//获取第一个数的ID
 var num2=document.getElementById('txt-num2');//获取第二个数的ID
 var result=document.getElementById('txt-result');//获取结果ID
 var drop=document.getElementById('dropdown');//获取下拉菜单ID
 btn_result.onclick=function(){//这句代码的意思是两个数的运算全是等号引起的,当点击等号时就会使两个数值进行运算
 var v1=parseFloat(num1.value);//把num转化为数值型 string------>number
 var v2=parseFloat(num2.value);
 var v3=drop.value;//用v3 来存储下拉菜单的值
 var num;///num用于接收两数的运算结果
 switch(v3){//判断用户选的是哪种运算符,并进行运算
  case "+":
  num=v1+v2;
  break;
  case "-":
  num=v1-v2;
  break;
  case "*":
   num=v1*v2;
  break;
  case "/":
  num=v1/v2;
  break;
  default:
   num=v1+v2;
  break;
 }
 result.value=num;//把结果保存到result中
 }
</script>

来源:https://blog.csdn.net/m0_37058714/article/details/80888411

标签:js,计算器
0
投稿

猜你喜欢

  • Python利用xlrd 与 xlwt 模块操作 Excel

    2022-07-19 20:57:13
  • Golang 类型断言的具体使用

    2024-05-13 10:45:23
  • python 对给定可迭代集合统计出现频率,并排序的方法

    2023-02-10 17:28:47
  • Python中常见的异常总结

    2021-11-15 04:21:27
  • python 读写excel文件操作示例【附源码下载】

    2023-02-20 09:26:31
  • python第三方异步日志库loguru简介

    2022-03-25 14:34:23
  • SQL Server 使用触发器(trigger)发送电子邮件步骤详解

    2024-01-22 11:15:39
  • Python socket C/S结构的聊天室应用实现

    2023-08-01 05:06:38
  • python+selenium 实现扫码免密登录示例代码

    2021-02-03 06:41:57
  • asp如何向前端显示用户请求的信息?

    2010-06-09 18:52:00
  • Windows下mysql 8.0.12 安装详细教程

    2024-01-23 23:52:36
  • 新手入门:防范SQL注入攻击的新办法

    2009-03-11 15:14:00
  • CentOS 5.5下安装MySQL 5.5全过程分享

    2024-01-16 02:06:57
  • python序列化与数据持久化实例详解

    2023-08-05 11:44:29
  • Python中的迭代器与生成器使用及说明

    2022-01-01 08:14:27
  • 利用PHP函数计算中英文字符串长度的方法

    2023-10-13 16:35:46
  • python统计文本文件内单词数量的方法

    2021-09-20 17:51:55
  • 使用tensorflow实现AlexNet

    2023-08-10 08:29:30
  • pytorch常用函数定义及resnet模型修改实例

    2022-09-18 08:19:19
  • 玩转Python图像处理之二值图像腐蚀详解

    2022-09-01 16:23:24
  • asp之家 网络编程 m.aspxhome.com