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简易计算器制作相关推荐

如何在python制作计算器_Python简易计算器制作方法代码详解
主要用到的工具是Python中的Tkinter库比较简单直接上图形界面和代码引用Tkinter库 from tkinter import * 建立主窗口对象 window=Tk() #设置窗口对 ...
javascript简易计算器
本计算器是仿造iphone手机计算器样式写的,实现了基本的功能:四则运算,清除,回退,小数点,正负号功能.对于初学者而言,可以拿来练练手,重点是学习其中一些函数的使用,以及js语法. html骨架 & ...
c51单片机矩阵键盘1602计算器_基于51单片机矩阵键盘的简易计算器制作
1. 运算过程.符号公式实时显示在显示屏上(I2C 1602). 2. 自带三角函数.开根号.平方运算. 3. 计算得出的结果可设置保存并用以下一次计算. 4. 所有运算结果精确到至少小数点后两位. ...
QT学习日志（附：简易计算器，qq登录界面，简易绘图板，植物大战僵尸魔改版项目实践）
目录写在前面实训前一天头文件无法生成项目栏不见了不知道如何发布程序实训第一天(附简易计算器的实现) 自定义命名空间的相关问题关于隐式调用构造函数的问题实训第二天(不附地址薄的实现) 关 ...
JavaScript初学入门（JS打印9*9乘法表，JS制作简易计算器）
目录网页的三部分组成: Java和JavaScript的关系: JavaScript的三种使用方式: Js的5种输出方式: Js的语法初始: js中值的类型: JS中的运算符: JS中的流程控制语句 ...
html制作简易计算机,用JavaScript制作一个简易计算器
制作出来是一个五行三列的表格,第一行是标题简易计算器,第二行是第一个数,第三行是第二个数,第四行是计算机结果,第五行是说明步骤,第三列是加减乘除四种运算方法. 简易计算器 table{ border: ...
html js制作计算器,JavaScript制作简易计算器
.button { width: 55px; height: 20px; } 购物简易计算器第一个数第二个数计算结果 var num_1=document.getElementById(&quo ...
用HTML5制作一个简易计算器
用H5制作一个简易计算器最近刚学JavaScript,之后紧接着做了一个简易的计算器,能够实现数字的加减乘除运算. 首先,先用HTML5搭建好计算器大体框架.我这里用了两个表格,一个充当显示器,另一 ...
怎么用python自制计算公式_手把手教你用python制作简易计算器，能够记录你使用的情况...
话不多说,首先先看效果图,它能够记录你在使用过程中的历史,方便你查看是否有错: 接下来就仔细分析一下是如何制作的: 简易计算器第一步:导入资源库在过程中使用到了tkinter这个资源库,win+R ...

JavaScript简易计算器制作

JavaScript简易计算器制作相关推荐

最新文章

热门文章