今天带大家做一个网页版的计算器,页面使用js完成计算,界面的效果如下:
可以看到界面还是挺清爽的,但是功能呢?这里呢,界面上看到的这些按钮的功能都是可以用的
可以看到有括号也是可以算的.
好了,接下来带大家来实现一下:
首先就是布局,这个没有什么好说的,学点html和css马上就可以弄出这个界面,所以我就直接贴出代码:
<table align="center">
<tr>
<td class="td_orange" colspan="5" id="content"></td>
</tr>
<tr>
<td class="td_orange" colspan="5" id="result"></td>
</tr>
<tr>
<td οnclick="appContent(this)">1</td>
<td οnclick="appContent(this)">2</td>
<td οnclick="appContent(this)">3</td>
<td οnclick="appContent(this)">*</td>
<td οnclick="appContent(this)">/</td>
</tr>
<tr>
<td οnclick="appContent(this)">4</td>
<td οnclick="appContent(this)">5</td>
<td οnclick="appContent(this)">6</td>
<td οnclick="appContent(this)">+</td>
<td οnclick="appContent(this)">-</td>
</tr>
<tr>
<td οnclick="appContent(this)">7</td>
<td οnclick="appContent(this)">8</td>
<td οnclick="appContent(this)">9</td>
<td οnclick="appContent(this)">(</td>
<td οnclick="appContent(this)">)</td>
</tr>
<tr>
<td class="td_orange" οnclick="appContent(this)">c</td>
<td οnclick="appContent(this)">0</td>
<td οnclick="appContent(this)">.</td>
<td οnclick="appContent(this)">del</td>
<td class="td_orange" οnclick="appContent(this)">=</td>
</tr>
</table>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
td {
background-color: #303133;
width: 100px;
height: 80px;
color: white;
text-align: center;
font-size: 20px;
}
.td_orange {
background-color: #FA6F14;
}
</style>
css代码就不解释了,看不懂的自行参考css文档
可以看到html代码中,有很多的<td>标签都有一个点击事件,appContent(this),相信大家也看得懂,这是把点击的当前的对象当成参数传进方法中,其实这样子做的目的应该能猜到,就是往上面的框框中尾加字符串的意思,除了几个特别的,比如图中的"del","c","="这几个是不能尾加的,所以需要另作考虑,既然这样的话,那我们的代码其实就很简单了:
function appContent(td){
//找到显示字符串等式的td标签
var content = document.getElementById("content");
//找到显示结果的td标签
var result = document.getElementById("result");
//获取字符串的等式
var text = td.innerText;
//如果是删除键
if("del" == text){
if(content.innerText.length > 0){
//删除最后一个字符
content.innerText = content.innerText.substring(0,content.innerText.length-1);
}
//如果是全部删除
}else if("c" == text){
content.innerText = "";
//如果是按了等于号
}else if("=" == text){
var resultText = parse(content.innerText);
result.innerText = content.innerText + "=" + resultText;
content.innerText = "";
//除了上面三种情况,其他的都是尾加
}else{
content.innerText = content.innerText + text;
}
}
等于好 的那种情况现在先别看.后面会讲解,上面的注释写的挺详细的,应该都看得懂,也就是实现了往显示字符串等式的框框中尾加字符而已
也就是下面的效果:
然后等你按下等于号的时候,上面叫大家不要先看的代码开始起作用了,也就是一个字符串的等式,你需要计算结果并且返回,那么最合适的就是写一个方法,传递进来一个字符串的等式,返回这个等式的结果
核心思想,参照我另外两篇博客:
http://blog.csdn.net/u011692041/article/details/49796343
http://blog.csdn.net/u011692041/article/details/49799145
看懂了思路,那么接下来的js代码你也很轻松的可以看懂了:
/**
* 解析字符串的等式为一个正确的结果
*/
function parse(content){
//寻找最后一个左括号
var index = content.lastIndexOf("(");
//如果等式中有左括号
if(index > -1){
//寻找右括号,从左括号的位置开始寻找
var endIndex = content.indexOf(")",index);
//如果等式中有右括号
if(endIndex > -1){
//调用自己算出括号中的结果
var result = parse(content.substring(index + 1,endIndex));
//然后继续调用自己,
//其实这里完成的工作就是"2+3+(2+3*2)"转化成了"2+3+8",也就是用括号中的结果替换括号所在位置
return parse(content.substring(0,index) + ("" + result) + content.substring(endIndex + 1))
}
}
index = content.indexOf("+");
if(index > -1){
return parse(content.substring(0,index)) + parse(content.substring(index + 1));
}
index = content.lastIndexOf("-");
if(index > -1){
return parse(content.substring(0,index)) - parse(content.substring(index + 1));
}
index = content.lastIndexOf("*");
if(index > -1){
return parse(content.substring(0,index)) * parse(content.substring(index + 1));
}
index = content.lastIndexOf("/");
if(index > -1){
return parse(content.substring(0,index)) / parse(content.substring(index + 1));
}
if("" == content){
return 0;
}else{
return content - 1 + 1;
}
}
好了,网页版的计算器就已经实现了.其实最关键的就是最后一段计算字符串等式的代码,请大家参照两个博客的链接的好好消化消化
源码下载地址:http://pan.baidu.com/s/1qXwxn68
转载请注明出处:http://blog.csdn.net/u011692041/article/details/50585933