用js做出计算机界面,网页版计算器的实现(js实现计算功能)

标签都有一个点击事件,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

版权所有 IT知识库 CopyRight © 2000-2050 IT知识库 IT610.com , All Rights Reserved.

京ICP备09083238号