1200字范文 > 网页版简易计算器

网页版简易计算器

时间：2020-11-15 09:09:17

相关推荐

网页版简易计算器

运行效果

运行：直接将下面的代码放到任意文本文件中，文件后缀名改为.html，然后用任意浏览器打开即可。

实现思路以及代码

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>网页版的简易计算器</title><center><input type="text" value="0" id="show" disabled="disabled" /></center><table border="1px" cellspacing="0" cellpadding="2" align="center" width="400px" height="600px"><tr><td id="clear">C</td><td id="del">退格</td><td>%</td><td class="operator">/</td></tr><tr><td class="num">7</td><td class="num">8</td><td class="num">9</td><td class="operator">*</td></tr><tr><td class="num">4</td><td class="num">5</td><td class="num">6</td><td class="operator">-</td></tr><tr><td class="num">1</td><td class="num">2</td><td class="num">3</td><td class="operator">+</td></tr><tr><td colspan="2" class="num">0</td><td class="num">.</td><td id="result">=</td></tr></table></body><script>/*** -1.页面布局要么使用div+css,要么table布局table布局:5行4列的表格div+css布局:大的div 嵌套两个字div(输入框的和键盘)2.逻辑处理2.1 将数字键和小数点看成一类:clas="num"2.2 将运算符看成一类:class="operator"2.3 将清除键,退格键,=(等号),显示框,单独设置id属性2.4 获取显示框,清除键,=号,推格键所在的标签对象2.5 获取数字键所在的对象并设置点击事件2.6 获取运算符所在的对象并设置点击事件*///获取显示框所在的标签对象var showResult = document.getElementById("show") ;//获取清除键所在的标签对象var clear = document.getElementById("clear") ;//获取退格键所在的标签对象var del = document.getElementById("del") ;//获取等号所在的对象var result = document.getElementById("result") ;//定义三个变量,分别保存第一个数,第二个数以及运算符//第一个数var numValue1 = "" ;//第二个数var numValue2 = "" ;//操作符var oper ="" ;//获取数字键,包含小数点,并设置点击事件var nums = document.getElementsByClassName("num") ;//遍历数字,分别设置点击事件for(var i = 0 ; i< nums.length ; i++){//设置点击事件:使用匿名函数nums[i].onclick = function(){//小数点的问题：只能出现一个：/*** 如果这个this.innerTest==.* //小数点只能出现一个* 否则：* 不是小数点，就属于整数运算* numValue1 += this.innerText;showResult.value = numValue1*1 ; //去掉首尾无效0*///测试//alert("获取到了每一个数字对象") ;//将点击的数字显示到文本框上//将nums[i]--->看成一个this:代表当前数字键对象的内存地址值//var text = this.innerText ; //普通文本//测试//alert(tesxt) ;//改变显示框对象的value属性//showResult.value = text;//问题1:目前:用户输入第一个数只能是一位数的//将数字内容赋值给第一个数,然后将第一个数展示到文本框上//numValue1 = this.innerText ;numValue1 += this.innerText;//showResult.value = numValue1*1 ; //去掉首尾无效0showResult.value = numValue1 ; //去掉首尾无效0//问题2:小数点的问题(小数点只能出现一个)}}//获取运算符所在的对象并设置点击事件var operators = document.getElementsByClassName("operator") ;//遍历操作符,设置点击事件for(var i = 0 ; i < operators.length ; i++){//设置点击operators[i].onclick = function(){/*** 判断numValue2的值是否为空：* 如果是numValue2=="" * 如果numValue2不是空字符串* 用户可能点击等号或者运算符*/if(numValue2==""){numValue2 = numValue1 ;numValue1 = "" ;//保存操作符oper = this.innerText ;}else{//用户要么点击=号要么进行四则运算//问题：应该将计算的结果赋值numValue2,清空numvalue1 if(numValue1!=""){resultFn() ;}//保留操作符oper = this.innerText ;}//测试//alert("运算符获取到了") ;//做运算 :思考如何做运算,最终处理//将第二个数赋值第一个数,然后将第一个数清空,等待接收用户下一次输入的数据/*numValue2 = numValue1 ;numValue1 = "" ;//保存操作符oper = this.innerText ;*/}}//关于其他的操作:清除键//设置清除键的点击事件clear.onclick = function(){//将第一个数,第二个数以及运算符都情况掉//显示框显示默认值0numValue1 = "" ;numValue2 = "" ;oper = "" ;showResult.value = "0" ;}//删除键的逻辑,设置点击事件del.onclick = function(){//alert("abc") ;//可以用到String :substring()截取功能if(numValue1.length!=1){//进行截取:从0索引开始截取到当前numValue1.length-1处的位置结束,将其值//赋值给numValue1//场景:删除剩余一个数字即可numValue1 = numValue1.substring(0,numValue1.length-1) ;//alert(numValue1) ;//将numValue1显示文本框上//showResult.value = numValue1 *1 ; //去掉首位无效0showResult.value = numValue1 ; //}//else{////自己处理//将第一个数,第二个数,运算符清空掉//}}//给等号添加点击事件,做四则运算result.onclick = function(){//抽取出一个方法resultFn() ;}//具体做四则运算的方法function resultFn(){//定义运算的两个数据: one ,two//数据类型转换var one = new Number(numValue2);//实际是第二个数var two = new Number(numValue1) ;//实际第一个数//保存计算结果var r = null ;//根据运算符进行判断，switch语句switch(oper){case "+":r = one + two ;break ;case "-":r = one - two ;break;case "*":r = one * two ;break ;case "/"://除数不能为0//判断/*if(two==0){//将数据情况掉//并且弹框提示；除数不能为0r = 0 }else{one /two ;}*/r = one /two ;break ;}//将计算结果展示到显示框上//showResult.value = r ;//将计算的结果进行保留小数点的有戏位//numValue2 = r ;numValue2 = new Number(r).toFixed(6) ;numValue1 = "" ; //numValue1清空了showResult.value = numValue2*1; // numValue2*1//问题1 :1.2 * 3 = 3.599999996//问题2：去掉首尾无效0：parseFloat()//问题3：在四则元素：判断用户如果是点击等号或者点击继续运算，每一次都将第一个数清空掉了，//判断第一个数是否为空//问题4：小数点问题：小数点只能出现一个//四则运算的问题：/*** 用户输入两个数据目前是直接处理结果，那么如何判断用户是要点击=号还是继续进行四则运算？* 在运算符点击监听事件中去坐* 判断numValue2的值是否为空：* 如果是numValue2=="" * 如果numValue2不是空字符串* 用户可能点击等号或者运算符* */}</script></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。