JavaScript实现网页版简易计算器功能
作者：Mtreellen
这篇文章主要介绍了JavaScript实现网页版简易计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现网页版计算器功能的具体代码，供大家参考，具体内容如下
运行效果
运行：直接将下面的代码放到任意文本文件中，文件后缀名改为.html，然后用任意浏览器打开即可。
实现思路以及代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页版的简易计算器</title>
<!--使用js完成,之后可用:jquery-->
<!-
-->
<style>
/*设置input的宽度和高度*/
input{
width: 396px;
height: 50px;
font-size: 30px;
}
/*表格的行文本左右居中*/
tr{
/*text-align*/
text-align: center;
}
/*设置单元格的内容宽度和高度以及字体大小*/
td{
width: 100px;
height: 119px;
font-size:30px;
}
/*伪类选择器:hover*/
td:hover{
/*指定背景色*/
background-color: greenyellow;
/*cursor:pointer
* 鼠标经过的时候,变成小手
*/
cursor:pointer ;
}
</style>
</head>
<body>
<!--
cellspacing:单元边沿和单元格之间的空间
cellpadding:单元格和单元格之间的空间
-->
<!--在input上面写一个div: 指定这个当前系统时间-->
<!--禁用文本框的输入功能:disabled:disabled-->
<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 ; //去掉首尾无效0
showResult.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(){
//将第一个数,第二个数以及运算符都情况掉
//显示框显示默认值0
numValue1 = "" ;
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 ; //去掉首位无效0
showResult.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){
//将数据情况掉
//并且弹框提示；除数不能为0
r = 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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。