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 相关文章推荐
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
javascript实现跳转菜单的具体方法
Jul 05 Javascript
jquery自定义下拉列表示例
Apr 25 Javascript
jquery队列函数用法实例
Dec 16 Javascript
jQuery中extend函数的实现原理详解
Feb 03 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
AngularJS动态绑定HTML的方法分析
Nov 07 Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
JS removeAttribute()方法实现删除元素的某个属性
Jan 11 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输出九九乘法表代码实例
2015/03/27 PHP
php 三元运算符实例详细介绍
2016/12/15 PHP
php二维码生成以及下载实现
2017/09/28 PHP
js下用gb2312编码解码实现方法
2009/12/31 Javascript
JavaScript 编写匿名函数的几种方法
2010/02/21 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
js封装成插件的步骤方法
2017/09/11 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
python实现画圆功能
2018/01/25 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
Python txt文件如何转换成字典
2020/11/03 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
乌克兰网上服装店:Bolf.ua
2018/10/30 全球购物
T3官网:头发造型工具
2019/12/26 全球购物
大学生村官心得体会范文
2014/01/04 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
2014年教研组工作总结
2014/11/26 职场文书
小学生作文评语集锦
2014/12/25 职场文书
求职自荐信怎么写
2015/03/04 职场文书
驻村工作简报
2015/07/20 职场文书
高一作文之乐趣
2019/11/21 职场文书
教你利用python实现企业微信发送消息
2021/05/23 Python
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python