使用Javascript简单计算器


Posted in Javascript onNovember 17, 2018

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js文字滚动停顿效果代码
Jun 28 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
Oct 20 Javascript
JS的location.href跳出框架打开新页面的方法
Sep 04 Javascript
浅谈Javascript中匀速运动的停止条件
Dec 19 Javascript
JavaScript中获取Radio被选中的值
Nov 11 Javascript
jQuery中cookie插件用法实例分析
Dec 04 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
Feb 26 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 Javascript
Bootstrap栅格系统的使用详解
Oct 30 Javascript
Bootstrap table使用方法汇总
Nov 17 Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 Javascript
Vue实现手机计算器
Aug 17 Javascript
JS实现图片切换效果
Nov 17 #Javascript
js实现导航跟随效果
Nov 17 #Javascript
JavaScript实现新年倒计时效果
Nov 17 #Javascript
JS实现倒计时图文效果
Nov 17 #Javascript
javaScript实现游戏倒计时功能
Nov 17 #Javascript
Javascript实现时间倒计时功能
Nov 17 #Javascript
Javascript实现秒表倒计时功能
Nov 17 #Javascript
You might like
phpMyAdmin 安装及问题总结
2009/05/28 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
15 个 JavaScript Web UI 库
2010/05/19 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
2014/06/07 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
node.js学习之交互式解释器REPL详解
2016/12/08 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
vue观察模式浅析
2018/09/25 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
Python实现读写sqlite3数据库并将统计数据写入Excel的方法示例
2017/08/07 Python
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
优秀德育工作者事迹材料
2014/05/07 职场文书
本科生就业推荐信
2014/05/19 职场文书
班组拓展活动方案
2014/08/14 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
公司员工辞职信范文
2015/05/12 职场文书
婚宴来宾致辞
2015/07/28 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs