简易计算器
- 效果展示图
- 项目要求
- 内容分析
- 涉及函数
效果展示图
项目要求
- 制作简易计算器，使其能实现简单的加，减，乘，除运算。
1.在两个文本框中分别输入两个数字
2.输入完成后，再次点击加，减，乘，除按钮（即选择哪种运算）
3.在最后的计算结果中显示出，最终的运算结果
内容分析
window.onload()方法用于在网页砸在完成后立即执行的操作，即当HTML文档加载完毕后，立即执行的某个方法
window.onload（）通常用于元素，在页面完全加载后（包括图片，css文件等等）执行脚本代码
isNaN()此函数接受一个参数，该参数可以是任意类型，而函数会帮我们确定这个参数是否‘“不是数值”；isNaN在接收到一个值后，会尝试将这个值转换成数值，如果能成功转换则返回false，否则返回true。
parseFloat() 函数可解析一个字符串，并返回一个浮点数。该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。
代码展示
window.onload = function() { //延迟加载 先加载静态在加载jsfunction pack(num1, Fh, num2) {var result = '无法计算！'; //给result 赋初值 if(isNaN(parseFloat(num1)) || isNaN(parseFloat(num2))) { //用number无法识别空字符 result = result + '请确保输入的是数值！';} else {switch(Fh) {case '+':case '-':result = eval(num1 + Fh + '(' + num2 + ')');break;case '×':result = parseFloat(num1) * parseFloat(num2);break;case '÷':if(num2 == 0) {result = result + '除数不能为0';} else {result = (parseFloat(num1) / parseFloat(num2)).toFixed(2);}break;default:result = result + '请正确使用运算符（+-*/中的任意一个！';}}
动态内容分析
oBtns[i].onclick = function() 增加鼠标单击事件，保证所有按钮都添加了鼠标单击事件
document.getElementById(id)是javascript中访问某个元素的方法,括号中的id是用来标识某个元素的。
代码展示
for(var i = 0; i < oBtns.length; i++) {oBtns[i].onclick = function() { var num1 = document.getElementById('f1').value; var num2 = document.getElementById('f2').value;var Fh = this.innerText;document.getElementById('jieG').innerText = pack(num1, Fh, num2); //pack 函数名}}
静态代码展示
<body><table><tr><td><img /></td><td colspan="3"><h3>简易计算器</h3></td></tr><tr><td>第一个数</td><td colspan="3"><input type="text" id="f1"></td></tr><tr><td>第二个数</td><td colspan="3"><input type="text" id="f2"></td></tr><tr><td><button onclick=get( "+")>+</button></td><td><button onclick=get( "-")>-</button></td><td><button onclick=get( "*")>×</button></td><td><button onclick=get( "/")>÷</button></td></tr><tr><td>计算结果</td><td colspan="3"><span id="jieG"></span></td></tr></table></body>
涉及函数
- if语句的基本格式
if(表达式){
//JavaScript语句1;
}
else{
//JavaScript语句2;
}
- switch语句的基本格式
switch(表达式){case 值1：JavaScript语句1；break;case 值2:JavaScript 语句2；break;
...defualt:JavaScript语句n;break;
}
