JS实现简易计算器_javascript技巧

来源:脚本之家  责任编辑:小易  

js做一个简易计算器具体如下:js运算第一个数input type="text"id="onesum">运算符号input type="text"id="fh">第二个数input type="text"id="twosum">计算结果input type="text"id="sum">input type="button"value="计算"onclick="js()">function js(){var num1=document.getElementById("onesum").value;var num2=document.getElementById("twosum").value;var fh=document.getElementById("fh").value;var sum=0;num1=Number(num1);num2=Number(num2);if(fh='+'){sum=num1+num2;}else if(fh='-'){sum=num1-num2;}else if(fh='*'){sum=num1*num2;}else if(fh='/'){sum=num1/num2;}alert(sum);document.getElementById("sum").value=sum;}JavaScript 教程 JavaScript 是属于网络的脚本语言!JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用www.zgxue.com防采集请勿采集本网。

用JS实现简易计算器,供大家参考,具体内容如下

制做简单计算器 function count(){ var txt1=document.all.txt1.value;var txt2=document.all.txt2.value;var s=document.all.select.value;var z;switch(s){ case\"+\":z=parseFloat(txt1)+parseFloat(txt2

首先创建结构和样式

function test(){ var txt1=document.eval函数可计算某个字符串,并执行其中的的js代码 } 计算\"onclick=\"test()\"/>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ margin:0; padding:0; background-color: #abcdef; } .cal{ width:560px; height:100px; margin:0 auto; padding-top:300px; } </style></head><body> <div class="cal"> <p> <input type="text" class="num1" value="1"> <span class="sign">+</span> <input type="text" class="num2" value="1"> <span>=</span> <span class="res">2</span> </p> <p> <input type="button" value="+"> <input type="button" value="-"> <input type="button" value="*"> <input type="button" value="/"> </p> </div><script></script></body></html>

写给新手:js表单操作(四)简单计算器(二) body { font-size:12px;font-family:Arial,Georgia,\"Times New Roman\",Times,serif;color:#555;text-align:center;background-color:#e2e2e2;} h6{ margin:0

然后添加Java script

1.html是从上往下逐行执行的,当执行到“var resultValue=document.getElementById(\"result\").value;时id为result的页面元素还没有创建,所以出错。应该把这句放在getNum函数里面 2.getNum函数应该这样写

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ margin:0; padding:0; background-color: #abcdef; } .cal{ width:560px; height:100px; margin:0 auto; padding-top:300px; } </style></head><body> <div class="cal"> <p> <input type="text" class="num1" value="1"> <span class="sign">+</span> <input type="text" class="num2" value="1"> <span>=</span> <span class="res">2</span> </p> <p> <input type="button" value="+" class="btn"> <input type="button" value="-" class="btn"> <input type="button" value="*" class="btn"> <input type="button" value="/" class="btn"> </p> </div><script> var cal=document.querySelector(".cal"); var num1=cal.querySelector(".num1"); var num2=cal.querySelector(".num2"); var sign=cal.querySelector(".sign"); var res=cal.querySelector(".res"); var btns=cal.querySelectorAll(".btn"); btns[0].onclick=add; btns[1].onclick=subtract; btns[2].onclick=multiply; btns[3].onclick=divide; function add(){ sign.innerHTML="+"; //由于DOM获取到的值都是字符串形式,因此进行操作时需要先转为number类型 res.innerHTML=Number(num1.value)+Number(num2.value); } function subtract(){ sign.innerHTML="-"; res.innerHTML=Number(num1.value)-Number(num2.value); } function multiply(){ sign.innerHTML="*"; res.innerHTML=Number(num1.value)*Number(num2.value); } function divide(){ sign.innerHTML="/"; res.innerHTML=Number(num1.value)/Number(num2.value); }</script></body></html>

你这个简单计算器,见到什么地步,加减乘除么?如果你比较面向对象js,可以参考大话设计模式前四章,里面把一个计算器做的很漂亮

代码的优化:

循环实现绑定

给一个外部接口,用于新增运算

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ margin:0; padding:0; background-color: #abcdef; } .cal{ width:560px; height:100px; margin:0 auto; padding-top:300px; } </style></head><body> <div class="cal"> <p> <input type="text" class="num1" value="1"> <span class="sign">+</span> <input type="text" class="num2" value="1"> <span>=</span> <span class="res">2</span> </p> <p> <input type="button" value="+" class="btn" title="add"> <input type="button" value="-" class="btn" title="subtract"> <input type="button" value="*" class="btn" title="multiply"> <input type="button" value="/" class="btn" title="divide"> <input type="button" value="%" class="btn" title="mod"> </p> </div><script> var cal=document.querySelector(".cal"); var num1=cal.querySelector(".num1"); var num2=cal.querySelector(".num2"); var sign=cal.querySelector(".sign"); var res=cal.querySelector(".res"); var btns=cal.querySelectorAll(".btn"); //给每个按钮绑定事件 for(var i=0;i<btns.length;i++){ operate(i); } //运算函数 function operate(i){ var op=btns[i].value;//获取运算 var opName=btns[i].title;//获取运算名 //绑定事件 btns[i].onclick=function(){ sign.innerHTML=op; res.innerHTML=operation[opName](Number(num1.value),Number(num2.value)); } } var operation={ add:function(n1,n2){ return n1+n2; }, subtract:function(n1,n2){ return n1-n2; }, multiply:function(n1,n2){ return n1*n2; }, divide:function(n1,n2){ return n1/n2; }, //给一个新增运算的接口 addOperation:function(name,fn){ //如果该运算不存在 if(!this.name){ this[name]=fn; } } } //新增取余运算 operation.addOperation("mod",function(n1,n2){ return n1%n2; });</script></body></html>

这样就圆满完成咯

!doctypehtml>无标题文档table{border-collapse:separate;border-spacing:8px;width:800px;}table,td{border:1px dashed black;padding:1px;}function add(){var n1=parseInt(document.getElementById('n1').value);var n2=parseInt(document.getElementById('n2').value);var n3=n1+n2;document.getElementById('n3').value=n3;}function minx(){var n1=parseInt(document.getElementById('n1').value);var n2=parseInt(document.getElementById('n2').value);var n3=n1-n2;document.getElementById('n3').value=n3;}function plus(){var n1=parseInt(document.getElementById('n1').value);var n2=parseInt(document.getElementById('n2').value);var n3=n1*n2;document.getElementById('n3').value=n3;}function divd(){var n1=parseInt(document.getElementById('n1').value);var n2=parseInt(document.getElementById('n2').value);var n3=n1/n2;document.getElementById('n3').value=n3;}第一个数:第二个数:结果:()">()">onclick="plus()">()">以上代码是我修改后的,你的代码有几个问题:没有方法 document.getElementsByld,应该是document.getElementById,注意:你用的是'L',应该是'哎'。同时html中input的name="n1",name="n2",name="n3"修改为id="n1",id="n2",id="n3。var n2=parseInt(document.getElementsByld('n2').value);你每次获取n2的值的时候用的是中文的前括号,js里面是不允许的。document.getElementsByld('n3').value)=n3;在个n3赋值的时候,前括号也是中文的,value后面多了一个后括号内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • javascript写的简单的计算器,内容很多,方法实用,推荐
  • 简易js代码实现计算器操作
  • js实现简单计算器
  • 用js写的简单的计算器实现代码
  • javascript-简单的计算器实现步骤分解(附图)
  • html+js实现简单的计算器代码(加减乘除)
  • javascript实现计算器功能
  • javascript实现简单计算器
  • vue.js实现简单的计算器功能
  • vue.js实现立体计算器
  • js快速实现简单计算器
  • 详解js前端代码异常监控
  • js实现简单鼠标跟随效果的方法
  • js仿手机页面文件下拉刷新效果
  • javascript 的addeventlistener()及attachevent()区别分析
  • js判断输入是否中文,数字,身份证等等js函数集合
  • 微信小程序仿知乎实现评论留言功能
  • js动态修改网页body的背景色实例代码
  • 图片翻转效果具体实现代码
  • javascript 函数及作用域总结介绍
  • 打印/预览/设置的客户端代码
  • JS实现简单的计算器功能
  • 如何用js做一个简易计算器
  • 用html和js编程,实现一个简单的计算器
  • js编写简易计算器,菜鸟卡壳了,求教
  • 求助,用js做个简易计算器
  • 用js代码做一个简易计算器
  • 如何使用JS编写一个简单的计算器
  • js简易计算器代码
  • 如何用js实现简单计算器
  • 利用JS算术运算符实现一个简单的页面计算器功能。效果见下图:
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript技巧javascript写的简单的计算器,内容很多,方法实用,推荐简易js代码实现计算器操作js实现简单计算器用js写的简单的计算器实现代码javascript-简单的计算器实现步骤分解(附图)html+js实现简单的计算器代码(加减乘除)javascript实现计算器功能javascript实现简单计算器vue.js实现简单的计算器功能vue.js实现立体计算器js快速实现简单计算器详解js前端代码异常监控js实现简单鼠标跟随效果的方法js仿手机页面文件下拉刷新效果javascript 的addeventlistener()及attachevent()区别分析js判断输入是否中文,数字,身份证等等js函数集合微信小程序仿知乎实现评论留言功能js动态修改网页body的背景色实例代码图片翻转效果具体实现代码javascript 函数及作用域总结介绍打印/预览/设置的客户端代码js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js 将json字符串转换为json对象的js删除数组里的某个元素方法javascript深入理解js闭包js带点自动图片轮播幻灯片特效代码分享实现点击列表弹出列表索引的两种方式解决javascript layui 下拉框不显示的问题javascript获得表单target属性的方法js小数运算出现多为小数问题的解决方法原生javascript实现连连看游戏(附源码)js冒泡法和数组转换成字符串示例代码原生javascript实现的无缝滚动功能详解javascript中判断一个值是否为undefined的js改变透明度实现轮播图的算法
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved