本文实例讲述了JS基于递归实现网页版计算器的方法。分享给大家供大家参考,具体如下:
递归实现网页版计算器可以简化代码,设计思路:
<强> 1,css + html实现计算器的外观,给每个按钮绑定数量(z)事件,传入z的不同来区分触发事件的按钮。
& lt; style>放入头中
这个div放在身体中,是计算器的html,数量()通过传入不同的数字,区分触发按钮。
& lt; div类=癰g”比;
& lt; div id="三"祝辞& lt;/div>
& lt;按钮id=" bt10 " value=" https://www.yisu.com/zixun/+”祝辞+ & lt;/button>
& lt;按钮id=" bt11 " value=" https://www.yisu.com/zixun/- "祝辞& lt;/button>
& lt;按钮id=" bt12 " value=" https://www.yisu.com/zixun/*”祝辞* & lt;/button>
& lt; br过滤数据="过滤"祝辞& lt;按钮id=" bt13 " value=" https://www.yisu.com/"祝辞/& lt;/button>
& lt;按钮id=" bt14 " valuehttps://www.yisu.com/zixun/="="祝辞=& lt;/button>
& lt; br过滤数据="过滤"祝辞& lt;按钮id=" bt1 " value=" https://www.yisu.com/zixun/1 "祝辞1 & lt;/button>
& lt;按钮id=" bt2 " value=" https://www.yisu.com/zixun/2 "祝辞2 & lt;/button>
& lt;按钮id=" bt3 " value=" https://www.yisu.com/zixun/3 "祝辞3 & lt;/button>
& lt; br过滤数据="过滤"祝辞& lt;按钮id=" bt4 " value=" https://www.yisu.com/zixun/4 "祝辞4 & lt;/button>
& lt;按钮id=" bt5 " value=" https://www.yisu.com/zixun/5 "祝辞5 & lt;/button>
& lt;按钮id=" bt6 " value=" https://www.yisu.com/zixun/6 "祝辞6 & lt;/button>
& lt; br过滤数据="过滤"祝辞& lt;按钮id=" bt7 " value=" https://www.yisu.com/zixun/7 "祝辞7 & lt;/button>
& lt;按钮id=" bt8 " value=" https://www.yisu.com/zixun/8 "祝辞8 & lt;/button>
& lt;按钮id=" bt9 " value=" https://www.yisu.com/zixun/9 "祝辞9 & lt;/button>
& lt;/div>
之前
<强> 2,在数量(z)方法中,利用DOM的innerHTML实现表达式的实时显示,并用字符串内容存储已点击的数字或符号,当点击“=笔?调用事实(内容)进行计算。
代码如下:
var内容;//存储已点击的数字或符号,要定义成全局的,如果定义在()中,数量每次内容都会被重新赋值
函数数量(z) {
var k=. getelementbyid (txt);//获取显示框的DOM,并缓存在k中
如果(z==14){//如果点击了“=焙?
var=事实总和(内容);//调用事实()进行计算,并把结果赋值给求和
内容=+ "=" +总和;//在要显示的内容后加入“=焙妥芎?
k。innerHTML=内容;
内容=零;//将内容清空,准备下次计算
其他}{//如果没有点击“=焙?而是点击的运算符,就需要通过开关把数字转化成运算符
开关(z) {
例10:z=?”;打破;
例11:z=?”;打破;
例12:z=?’;打破;
例13:z='/';打破;
}//把此时输入的字符存入内容
如果(内容){
内容+=z.toString ();
其他}{
内容=z.toString ();
}
k。innerHTML=内容;//让它实时显示
}
}
之前
<强> 3,本计算器中递归算法的思路:在<代码>(内容)中,先用<代码> content.indexOf(“+”) 判断“+”号是否存在,若存在,则分别递归调用指数前后的两个字符串,并让其相加,直到所有串中都找不到“+”后,开始用<代码> content.lastIndexOf(“-”) 判断”——“号,后续操作和加号一样,存在则递归指数前后的两个字符串,并让其相减,直到找不到减号,就开始判断乘号和除号,直到没有符号后返回<代码> parseFloat(内容)>
//实现递归计算
函数的事实(内容){
var指数=content.indexOf(" + ");//获取“+”号的指数
如果(指数!=1){
返回的事实(content.substring(0,指数))+事实(content.substring(索引+ 1));//当找得到“+”号时,分成两部分相加递归
其他}{
var index2=content.lastIndexOf(“-”);//当找不到“+”号时,开始找“-”号
如果(index2 !=1) {
返回的事实(content.substring (0, index2)事实(content.substring (index2 + 1);//当找得到“-”号时,分成两部分相减递归
其他}{
var index3=content.indexOf(" * ");//当找不到“-”号时,开始找“*”号
如果(index3 !=1) {
返回的事实(content.substring (0, index3)) *事实(content.substring (index3 + 1);//当找得到“*”号时,分成两部分相乘递归
其他}{
var index4=content.lastIndexOf("/");//当找不到“*”号时,开始找“/焙?
如果(index4 !=1) {
返回的事实(content.substring (0, index4))/事实(content.substring (index4 + 1);//当找得到“/焙攀?分成两部分相除递归
其他}{
返回parseFloat(内容);//当找不到“/焙攀?返回这段串的变成漂浮型的数的值
}
}
}
}
}
