系列文章
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
- 前言
- 一、网页计算器设计目标
- 二、前端界面设计
- CSS样式定义
- 1.大框
- 2.数字显示框
- 3.按钮框
- Div页面布局及样式引用
- 三、计算器功能设计
- 1.功能概述
- 2.流程图
- 3.JavaScript代码示例
- 捕获点击按钮
- 计算逻辑实现
- 总结
前言
综合运用HTML,CSS,JavaScript技术,完成网页计算器案例的学习,实现JavaWeb前端开发能力的提升。主要工作有:
- 采用Div+CSS样式实现页面布局
- JavaScript实现计算器业务逻辑
一、网页计算器设计目标
网页计算器前端界面展示效果,包括数字和符号按钮,其中符号按钮分为运算符号按钮(+,-,*,/,%)和功能按钮(“”<-“”退格,C-清除键,=)。运算结果显示在SUM:后的文本框中。
二、前端界面设计
CSS样式定义
通过DIv实现页面布局
1.大框
计算器框体结构定义:
display:block //display是控件的css属性之一,表示的是显示模式。none表示不显示在网页上,但是代码存在;bolck是此元素将显示为块级元素,此元素前后会带有换行符。
2.数字显示框
其中上面一行用来显示点击的按钮值,下面一行用来显示计算结果,两者样式大致相同,区别在与下一行的文本框长度小一些,并且通过长度Width属性,控制两个文本框右对齐。
布局属性如下图所示
3.按钮框
布局属性如下图所示
以上所述DIV样式的源代码如下
// .为类的引用,#为id引用
<style type="text/css">
#box{width: 295px; margin: 0 auto; text-align: justify; border: 1px solid #ddd; padding: 15px;}
.d_num{display: inline-block; margin: 10px; width: 33px; height: 30px;
border: 1px solid #ddd; text-align: center; line-height: 30px; cursor: pointer;}
.sum{margin: 0 10px 10px; line-height: 30px; font-size: 20px;}
#sum{width: 205px; height: 30px; padding: 0 5px; margin-left: 5px; font-size: 20px;}
#process{width: 255px; height: 30px; padding: 0 5px; margin-left: 5px; font-size: 20px;}
</style>
思考:如何在一行里显示多个按钮?
用Div+Span实现
在Div中嵌套span
Div页面布局及样式引用
本项目采用在HTML文档内定义内部样式表,现梳理一下样式引用的方法:
类型 | 选择符 |
class | . |
id | # |
html | HTML标记符 |
三、计算器功能设计
1.功能概述
实现计算器的基本功能:
,先输入第一个数,再输入运算符,接着输入第二个数,最后点击“=”,计算结果在sum文本框中显示,表达式在第一个文本框中显示。
- 程序捕获鼠标点击按钮值
- 正常流程,先输入第一个数,再输入运算符,接着输入第二个数,最后点击“=”,计算结果在sum文本框中显示,表达式在第一个文本框中显示。
- 当输入功能键 C时,清空所有数值,重新开始。
- 当输入退格键 <- 时,删除一个代表数字的字符,如果符号在数字之后,则连同符号一并删除。如果没有代表输入数字符号,则不做任何处理。
- 允许输入小数。
2.流程图
Created with Raphaël 2.3.0 开始 读取按键 数字或点? 符号标志有效? 计算结果 显示结果 组成第一个数 符号? 是C? 清空所有值 是<--? 删除一个字符 第二个数不为空? 是 =? 计算结果 是 =? 设置符号标志无效 记录操作符 设置符号标志有效 yes no yes no yes yes no yes no yes no yes no yes no
3.JavaScript代码示例
捕获点击按钮
代码如下(示例):
var $box = document.getElementById('box');
var $sum = document.getElementById('sum');
var $process = document.getElementById('process');
var sum = 0, process = '', num1 = '', num2 = '', temp = '', statu = false;
$box.onclick = function(e){
var event = window.event || e;
var ele = event.srcElement || event.target;
var _className = ele.className;
首先获取页面控件,存入以$命名的变量中。再定义控件点击事件,获取点击控件的className值。根据className值判断其实数字还是符号,用于下面逻辑功能的实现。
计算逻辑实现
逻辑代码显示如下(示例):
<script type="text/javascript">
var $box = document.getElementById('box');
var $sum = document.getElementById('sum');
var $process = document.getElementById('process');
var sum = 0, process = '', num1 = '', num2 = '', temp = '', statu = false;
$box.onclick = function(e){
var event = window.event || e;
var ele = event.srcElement || event.target;
var _className = ele.className;
if(_className == 'd_num'){
var num = ele.getAttribute('data-num');//点击的按钮对应的值
var NotNum = isNaN(num);
if(!NotNum || num == '.'){ //点击了数字
if(!statu){ //还没点击过符号
if(num1 == '0'){
num1 = '';
}
num1 += num;
process = num1;
}else{ //已经点击过符号
if(num2 == '0'){
num2 = '';
}
num2 += num;
process = num1 + temp + num2;
}
$process.value = process;
}
else{ //点击了符号
if(num1 == ''){//非法操作
return false;
}
if(num == 'C'){//归零
num1 = '';
num2 = '';
process = '';
temp = '';
sum = '';
$process.value = '0';
$sum.value = '0';
statu = false;
return false;
}
if(num == '<-'){//退档
if(sum != ''){
return false;
}
if(num2 == ''){
num1 = num1.substring(0,num1.length-1);
if(num1 == ''){
num1 = '0';
}
process = num1;
$process.value = process;
}else{
num2 = num2.substring(0,num2.length-1);
if(num2 == ''){
num2 = '0';
}
process = num1 + temp + num2;
$process.value = process;
}
return false;
}
if(num2 != ''){//a&b
if(num == '='){//元操作到此结束
$process.value = process;
}else{
$process.value = process + num;
}
switch(temp){//元操作继续
case '+' : sum = parseFloat(num1) + parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break;
case '-' : sum = parseFloat(num1) - parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break;
case '*' : sum = parseFloat(num1) * parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break;
case '/' : sum = parseFloat(num1) / parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break;
case '%' : sum = parseFloat(num1) % parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break;
}
}else{//a&?
if(num == '='){
return false;
}
$process.value = process + num;
process = '';
}
if(num == '='){
sum = '';
statu = false;
return false;
}
temp = num;//记录操作符
statu = true;//已经触发操作状态
}
}
};
</script>
总结
以上介绍了网页计算器的实现过程。现将技术点总结如下:
- 采用Div+CSS样式实现页面布局
- JavaScript实现计算器业务逻辑
- 重点在于掌握JavaScript语法,捕获鼠标点击事件的方法。
- 难点在于计算器业务逻辑的梳理与编程实现。