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类型转换方法及需要注意的问题小结(挺全面)
Nov 11 Javascript
jquery实现div拖拽宽度示例代码
Jul 31 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 Javascript
javascript移动设备Web开发中对touch事件的封装实例
Jun 05 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
javascript检查浏览器是否支持flash的实现代码
Aug 14 Javascript
详解 vue better-scroll滚动插件排坑
Feb 08 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
Aug 20 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
JS继承实现方法及优缺点详解
Sep 02 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简单开启gzip压缩方法(zlib.output_compression)
2013/04/13 PHP
如何使用Gitblog和Markdown建自己的博客
2015/07/31 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
使用jquery动态加载js文件的方法
2014/12/24 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
2016/05/18 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
浅析Javascript ES6中的原生Promise
2016/08/25 Javascript
jQuery代码实现实时获取时间
2017/01/29 Javascript
H5手机端多文件上传预览插件
2017/04/21 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
在react中使用vuex的示例代码
2018/07/30 Javascript
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
js实现验证码功能
2020/07/24 Javascript
如何在vue 中引入使用jquery
2020/11/10 jQuery
下载糗事百科的内容_python版
2008/12/07 Python
Python实现抓取城市的PM2.5浓度和排名
2015/03/19 Python
Python中操作mysql的pymysql模块详解
2016/09/13 Python
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
python编程羊车门问题代码示例
2017/10/25 Python
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
python同步windows和linux文件
2019/08/29 Python
django中media媒体路径设置的步骤
2019/11/15 Python
精通CAD能手自荐书
2014/01/31 职场文书
优秀教师主要事迹
2014/02/01 职场文书
粗加工管理制度
2014/02/04 职场文书
财务人员求职自荐书范文
2014/02/10 职场文书
五水共治一句话承诺
2014/05/30 职场文书
新闻报道策划方案
2014/06/11 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL