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 相关文章推荐
js 遍历对象的属性的代码
Dec 29 Javascript
js单例模式的两种方案
Oct 22 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
JS动态添加iframe的代码
Sep 14 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
JavaScript数据结构之二叉树的删除算法示例
Apr 13 Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 Javascript
微信小程序通过js实现瀑布流布局详解
Aug 28 Javascript
Vue脚手架编写试卷页面功能
Mar 17 Javascript
vue实现前端列表多条件筛选
Oct 26 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
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中static 静态变量和普通变量的区别
2016/12/01 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
JS实现的简易拖放效果示例
2016/12/29 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
layUI实现前端分页和后端分页
2019/07/27 Javascript
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
python网络编程学习笔记(三):socket网络服务器
2014/06/09 Python
基于Python os模块常用命令介绍
2017/11/03 Python
python实现根据文件关键字进行切分为多个文件的示例
2018/12/10 Python
Python flask框架post接口调用示例
2019/07/03 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
基于Python检测动态物体颜色过程解析
2019/12/04 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
输入N,打印N*N矩阵
2012/02/20 面试题
采购文员岗位职责
2013/11/20 职场文书
协议书范本
2014/04/23 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python