步骤:
1、对简单计算器的页面进行布局
在没有牵扯大量图片的前提下:
1)table布局
2)div+Css布局
外层div
文本输入框:div嵌套
这里我们选用table布局
5行4列的表格+表格标签的一些属性+文本输入框的样式
2、
2.1需要点击数字键以及运算符,进行计算
2.2将数字键以及小数点看成一类,指定同名的class属性
2.3 将运算符看成一类,指定同名的class属性
2.4 将清除键,退格键,等号,表格上面的显示框分别设置id
3、使用js:dom操作 获取清除键/退格键/等号/显示框所在的标签对象
4、获取数字键所在的标签对象,分别设置点击事件
5、获取运算符所在的标签对象,分别设置点击事件
设置获取到运算符的点击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页版简易计算器</title>
<style>
/*将表格的边框合并*/
table{
border-collapse: collapse;
}
/*设置表格每一个单元格的排列方式*/
tr{
text-align: center;
}
/*设置单元格的宽度和高度*/
td{
width: 100px;
height:119px ;
font-size: 20px;
color:#C90;
}
/*设置文本输入框的宽度*/
input{
height: 50px;
width: 396px;
font-size: 20px;
}
/*鼠标经过每一个单元格,设置背景色以及鼠标变成小手状(点击内容)*/
td:hover{
background-color: blanchedalmond;
cursor: pointer;
}
</style>
</head>
<body>
<!--
禁用输入框的输入功能
disabled="disabled"
-->
<center><input type="text" value="0" id="show" disabled="disabled" /></center>
<table border="1px" 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>
//获取显示框所在标签对象
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") ;
//如何设置点击
//将nums进行遍历,获取到每一个数字键,直接匿名函数的设置点击事件
for(var i = 0 ; i <nums.length ; i++){
nums[i].onclick = function(){
//获取到文本内容之后,将文本内容数据赋值第一个数据,然后将第一个数展示到显示框上
// numValue1 = this.innerText ;
//用户点击第一个数据的时候不可能只点击一位数字,所以拼接
numValue1 += this.innerText ;
showResult.value = numValue1 *1 ;
//if (this.innerText == "."){}
//indexOf(".")==-1 && numValue1长度==1
}
}
//获取运算符所在的标签对象,分别设置点击事件
var operators = document.getElementsByClassName("operator") ;
//遍历
for(var i = 0 ; i <operators.length ;i++){
//每一个运算符设置点击
operators[i].onclick = function(){
//三个数据:numvalue1 numValue2 oper
//将第一个数据赋值给第二个第二个数据,
//将第一个数据值清空掉,等待下次用户的点击(输入)
//如何判断点击的是=还是继续点击运算符
//通过numValue2的值是否为空判断
if(numValue2==""){
//用户输入了一个数据
numValue2 = numValue1 ;
//清空掉numValue1,等待下次接受数据
numValue1 ="" ;
//保存操作符
oper = this.innerText ;
}else{//用户要么点击=号,要么继续点击运算符进行运算处理
//如果第一个值不为空,在继续进行运算
if(numValue1!=""){
//bug:每次用numValue1接受下一个数据,所以是空值的话,进行连乘的存在问题!
resultFun() ;
}
//保存操作符:
oper = this.innerText ;
}
}
}
//设置清除键的点击事件
clear.onclick = function(){
//将第一个数numvalue1,numValue2,运算符都设置为初始状态
numValue1 ="" ;
numVale2 ="" ;
oper ="" ;
//显示框
showResult.value = 0 ;
}
//退格键的逻辑(可以自己扩展)
del.onclick =function(){
//用户输入第一个数的时候
if(numValue1.length!=1){
//将截取后的结果赋值给numValue1 //截取substring（始，终）
numValue1 =numValue1.substring(0,numValue1.length-1) ;
//将数据展示显示框
showResult.value = numValue1 ;
}
//else{
//可以将之前的第一个数据,第二个数清空掉
//}
}
//做运算结果的逻辑处理
result.onclick = function(){
//封装做运算的函数
resultFun() ;
}
//具体做运算的函数
function resultFun(){ //计算结果= one第一个数据其实是第二个数据
//定义两个数据
//类型转换成Number类型
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){
alert("除数不能为0") ;
numValue1 ="" ;
numValue2= "" ;
oper ="" ;
r = 0 ;
}else{
one / two ;
}
break ;
}
//bug:1.2 * 3 = 3.5999999996 :使用Number对象的toFixed(num):保留num个有效位数
//改进:
//numValue2 = r ;
//Number对象:内置方法toFixed(var num):来保存当前的有效位
new Number(r).toFixed(6) ;
numValue2 = new Number(r).toFixed(6) ;
//清空掉numValue1
numValue1 = "" ;
//将numValue2的值展示显示框
showResult.value = numValue2 *1;
}
</script>
</html>效果截图：
问题:用户在输入第一个数和第二个数之和进行计算,可能继续点击运算符或者直接输出结果=
如判断用户点击的是=还是运算符呢?
解决：通过numvalue2的值是否为空来进行判断 :应该在设置运算符的点击事件中进处理
在： operators[i].onclick = function(){
//如何判断点击的是=还是继续点击运算符
//通过numValue2的值是否为空判断
if(numValue2==""){
//用户输入了一个数据
numValue2 = numValue1 ;
//清空掉numValue1,等待下次接受数据
numValue1 ="" ;
//保存操作符
oper = this.innerText ;
}else{//用户要么点击=号,要么继续点击运算符进行运算处理
//如果第一个值不为空,在继续进行运算
if(numValue1!=""){
//bug:每次用numValue1接受下一个数据,所以是空值的话,进行连乘的存在问题!
resultFun() ;
}
//保存操作符:
oper = this.innerText ;
}
}//1)bug:1.2 * 3 = 3.5999999996
// 使用Number对象的toFixed(num):保留num个有效位数
//2)bug:去掉输入数据的首尾无效0
//用字符串值乘以 number类型
//3)bug:小数点问题:只能出现一个,并且输入第一个数的第一位数的时候不能点击小数点
// （1）如果第一个点击的数据是"."(小数点)，则前面拼接一个零；
// （2）直接第一次无法点击小数点（不显示）
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
