JavaScript简易计算器制作


Posted in Javascript onJanuary 17, 2020

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

成品图

JavaScript简易计算器制作

这个简易的计算器只能实现 + - * /的运算

在动手之前,我们要先理清思路,看图,若想实现这样一个简易的计算器,我们需要两个输入框用来存放我们需要进行运算的两个值,一个下拉框来选择要进行什么运算,一个按钮来实现开始运算,一个输入框来保存我们计算后的值!

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

<body>
 <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">
</body>

上面的id你可随意起,好用就行
接下来就是最重要的JavaScript的地方了

<body>
 <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>

这样一个简易的页面计算器就做好了。

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

Javascript 相关文章推荐
Javascript中常见的校验如域名、手机、邮箱等等
Jan 02 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
JavaScript数组和循环详解
Apr 27 Javascript
Js与Jq 获取页面元素值的方法和差异对比
Apr 30 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 Javascript
javascript创建对象的3种方法
Nov 02 Javascript
webuploader模态框ueditor显示问题解决方法
Dec 27 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
Jan 20 Javascript
js实现简单掷骰子效果
Oct 24 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 Javascript
vue下axios拦截器token刷新机制的实例代码
Jan 17 #Javascript
js布局实现单选按钮控件
Jan 17 #Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 #Javascript
JavaScript数组去重实现方法小结
Jan 17 #Javascript
JS面向对象之多选框实现
Jan 17 #Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 #Javascript
JS面向对象之单选框实现
Jan 17 #Javascript
You might like
PHP基础知识回顾
2012/08/16 PHP
php上传文件中文文件名乱码的解决方法
2013/11/01 PHP
表单内同名元素的控制
2006/11/22 Javascript
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
jQuery为动态生成的select元素添加事件的方法
2016/08/29 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
在Vue组件中使用 TypeScript的方法
2018/02/28 Javascript
layui 弹出删除确认界面的实例
2019/09/06 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
pyenv命令管理多个Python版本
2017/03/26 Python
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
详解Numpy数组转置的三种方法T、transpose、swapaxes
2019/05/27 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
python中return如何写
2020/06/18 Python
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
策划主管的工作职责
2013/11/24 职场文书
个人四风对照检查材料
2014/09/26 职场文书
毕业生银行实习自我鉴定
2014/10/14 职场文书
婚礼家长致辞
2015/07/27 职场文书