使用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 相关文章推荐
javascript编程起步(第六课)
Feb 27 Javascript
javascript里的条件判断
Feb 27 Javascript
指定js可访问其它域名的cookie的方法
Sep 18 Javascript
Jquery插件之打造自定义的select标签
Nov 30 Javascript
js+html5操作sqlite数据库的方法
Feb 02 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
Angular.js组件之input mask对input输入进行格式化详解
Jul 10 Javascript
原生JS 购物车及购物页面的cookie使用方法
Aug 21 Javascript
JS手机端touch事件计算滑动距离的方法示例
Oct 26 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
vue-cli3.0使用及部分配置详解
Aug 29 Javascript
用js简单提供增删改查接口
May 12 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
使用PHP生成二维码的方法汇总
2015/07/22 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
JavaScript单元测试ABC
2012/04/12 Javascript
使用jquery动态加载javascript以减少服务器压力
2012/10/29 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
js实现上传并压缩图片效果
2018/01/10 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
2019/06/03 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
在项目vue中使用echarts的操作步骤
2020/09/07 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
python中base64加密解密方法实例分析
2015/05/16 Python
解决vscode python print 输出窗口中文乱码的问题
2018/12/03 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
Python爬虫爬取煎蛋网图片代码实例
2019/12/16 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
Html5 localStorage入门教程
2018/04/26 HTML / CSS
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
药学专业大专生的自我评价
2013/12/12 职场文书
大学军训感言600字
2014/02/25 职场文书
单位工程竣工验收方案
2014/03/16 职场文书
商场圣诞节活动总结
2015/05/06 职场文书