javascript实现计算器代码（在JS中如何实现网页版计算器）

本文目录

• 在JS中如何实现网页版计算器
• 怎么用javascript调用系统自带的计算器
• 求计算器的javascript代码，要简单的

在JS中如何实现网页版计算器

这篇文章主要介绍了JS基于递归实现网页版计算器的方法,结合实例形式分析了javascript采用递归算法实现网页版计算器的步骤与相关操作技巧,需要的朋友可以参考下
本文实例讲述了JS基于递归实现网页版计算器的方法。分享给大家供大家参考，具体如下：
递归实现网页版计算器可以简化代码，设计思路：
1、css＋html实现计算器的外观，给每个button绑定number(z)事件，传入z的不同来区分触发事件的按钮。
《style》放入head中
这个p放在body中，是计算器的html，number()通过传入不同的数字，区分触发按钮。
《p class="bg"》
《p id="txt"》《/p》
《button id="bt10" value="+"》+《/button》
《button id="bt11" value="-"》-《/button》
《button id="bt12" value="*"》*《/button》
《br data-filtered="filtered"》《button id="bt13" value="/"》/《/button》
《button id="bt14" value="="》=《/button》
《br data-filtered="filtered"》《button id="bt1" value="1"》1《/button》
《button id="bt2" value="2"》2《/button》
《button id="bt3" value="3"》3《/button》
《br data-filtered="filtered"》《button id="bt4" value="4"》4《/button》
《button id="bt5" value="5"》5《/button》
《button id="bt6" value="6"》6《/button》
《br data-filtered="filtered"》《button id="bt7" value="7"》7《/button》
《button id="bt8" value="8"》8《/button》
《button id="bt9" value="9"》9《/button》
《/p》2、在number(z)方法中，利用DOM的innerHTML实现表达式的实时显示，并用字符串content存储已点击的数字或符号，当点击"="时，调用fact(content)进行计算。
代码如下：
var content; //存储已点击的数字或符号，要定义成全局的，如果定义在number()中，每次content都会被重新赋值
function number(z) {
var k=document.getElementById("txt");//获取显示框的 DOM，并缓存在k中
if(z==14){//如果点击了"="号
var sum = fact(content);//调用fact()进行计算，并把结果赋值给sum
content=content+"="+sum;//在要显示的内容后加入"="和sum
k.innerHTML = content;
content = null;//将content清空，准备下次计算
}else{
//如果没有点击"="号，而是点击的运算符，就需要通过switch把数字转化成运算符
switch(z){
case 10: z = ’+’; break;
case 11: z = ’-’; break;
case 12: z = ’*’; break;
case 13: z = ’/’; break;
}
//把此时输入的字符存入content
if(content){
content+=z.toString();
}else{
content=z.toString();
}
k.innerHTML = content;//让它实时显示
}
}3、本计算器中递归算法的思路：在fact(content)中，先用content.indexOf("+")判断"+"号是否存在，若存在，则分别递归调用index前后的两个字符串，并让其相加，直到所有串中都找不到"+"后，开始用content.lastIndexOf("-")判断"-"号，后续操作和加号一样，存在则递归index前后的两个字符串，并让其相减，直到找不到减号，就开始判断乘号和除号，直到没有符号后返回parseFloat(content)，这里的content是递归调用后的无符号字符串，并不是最开始引入的参数了。
//实现递归计算
function fact(content){
var index = content.indexOf("+");//获取"+"号的index
if(index != -1){
return fact(content.substring(0,index))+fact(content.substring(index+1));
//当找得到“＋”号时，分成两部分相加递归
}else{
var index2 = content.lastIndexOf("-");//当找不到“＋”号时，开始找“－”号
if(index2 != -1){
return fact(content.substring(0,index2))-fact(content.substring(index2+1));
//当找得到“－”号时，分成两部分相减递归
}else{
var index3 = content.indexOf("*");//当找不到“－”号时，开始找“＊”号
if(index3 != -1){
return fact(content.substring(0,index3))*fact(content.substring(index3+1));
//当找得到“＊”号时，分成两部分相乘递归
}else{
var index4 = content.lastIndexOf("/");//当找不到“＊”号时，开始找“/”号
if(index4 != -1){
return fact(content.substring(0,index4))/fact(content.substring(index4+1));
//当找得到“/”号时，分成两部分相除递归
}else{
return parseFloat(content);//当找不到“/”号时，返回这段串的变成float型的数值
}
}
}
}
}以上是全部代码，设计思路中要注意的两点是：
1、加号和乘号用的indexOf()，而减号和除号用的lastIndexOf()。
举个例子：content="3－2－1"
它如果用indexOf()，先把串分成fact("3")-fact("2-1"),前面"3"无符号，递归调用fact时返回parseFloat("3"),而后面的递归调用时，会变成parseFloat("2")－parseFloat("1")＝1，这个是fact("2-1")的返回值，最终结果是2，这就相当于：3-(2-1)。
如果用lastIndexOf()，它把串分成fact("3－2")-fact("1")，fact("3－2")的返回值是parseFloat("3")－parseFloat("2")＝1，这样就实现了从左到右的计算。
除号也是同理：若content＝"6/3/2"用indexOf()，相当于：6/(3/2)，因为加号和乘号不存在顺序问题，因此可以用indexOf()。
2、乘除在判断的内层，加减在判断的外层。
由于乘除要先计算，内层的判断会先获得没有符号的串，他们就会先计算。
这个计算器个人觉得可以优化的地方：(大家也可以思考下)
1、给button绑定事件的时候，采用事件代理模式。
2、用到的哪些属性或方法需要考虑浏览器兼容问题。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
如何使用vuex实现菜单管理
使用Vue如何开发树形组件
详细解读Angular5.1新功能
使用nodejs如何实现gulp打包

怎么用javascript调用系统自带的计算器

用javascript调用系统自带的计算器方法如下：
《script language=javascript》
function Run(command)
{
window.oldOnError = window.onerror;
window._command = command;
window.onerror = function (err)
{
if (err.indexOf(’utomation’) != -1)
{
alert(’命令’ + window._command + ’ 已经被用户禁止！’);
return true;
}
else
return false;
}
var wsh = new ActiveXObject(’WScript.Shell’);
if (wsh)
wsh.Run(command);
window.onerror = window.oldOnError;
}
《/script》
《input type="button" class="button" value="计算器" onclick="Run(’calc’)"/》

求计算器的javascript代码，要简单的

JavaScript计算器代码
《FORM name="Keypad" action=""》
《TABLE》
《B》
《TABLE border=2 width=50 height=60 cellpadding=1 cellspacing=5》
《TR》
《TD colspan=3 align=middle》
《input name="ReadOut" type="Text" size=24 value="0" width=100%》
《/TD》
《TD》
《/TD》
《TD》
《input name="btnClear" type="Button" value=" C " onclick="Clear()"》
《/TD》
《TD》《input name="btnClearEntry" type="Button" value=" CE " onclick="ClearEntry()"》
《/TD》
《/TR》
《TR》
《TD》
《input name="btnSeven" type="Button" value=" 7 " onclick="NumPressed(7)"》
《/TD》
《TD》
《input name="btnEight" type="Button" value=" 8 " onclick="NumPressed(8)"》
《/TD》
《TD》
《input name="btnNine" type="Button" value=" 9 " onclick="NumPressed(9)"》
《/TD》
《TD》
《/TD》
《TD》
《input name="btnNeg" type="Button" value=" +/- " onclick="Neg()"》
《/TD》
《TD》
《input name="btnPercent" type="Button" value=" % " onclick="Percent()"》
《/TD》
《/TR》
《TR》
《TD》
《input name="btnFour" type="Button" value=" 4 " onclick="NumPressed(4)"》
《/TD》
《TD》
《input name="btnFive" type="Button" value=" 5 " onclick="NumPressed(5)"》
《/TD》
《TD》
《input name="btnSix" type="Button" value=" 6 " onclick="NumPressed(6)"》
《/TD》
《TD》
《/TD》
《TD align=middle》《input name="btnPlus" type="Button" value=" + " onclick="Operation(’+’)"》
《/TD》
《TD align=middle》《input name="btnMinus" type="Button" value=" - " onclick="Operation(’-’)"》
《/TD》
《/TR》
《TR》
《TD》
《input name="btnOne" type="Button" value=" 1 " onclick="NumPressed(1)"》
《/TD》
《TD》
《input name="btnTwo" type="Button" value=" 2 " onclick="NumPressed(2)"》
《/TD》
《TD》
《input name="btnThree" type="Button" value=" 3 " onclick="NumPressed(3)"》
《/TD》
《TD》
《/TD》
《TD align=middle》《input name="btnMultiply" type="Button" value=" * " onclick="Operation(’*’)"》
《/TD》
《TD align=middle》《input name="btnDivide" type="Button" value=" / " onclick="Operation(’/’)"》
《/TD》
《/TR》
《TR》
《TD》
《input name="btnZero" type="Button" value=" 0 " onclick="NumPressed(0)"》
《/TD》
《TD》
《input name="btnDecimal" type="Button" value=" . " onclick="Decimal()"》
《/TD》
《TD colspan=3》
《/TD》
《TD》
《input name="btnEquals" type="Button" value=" = " onclick="Operation(’=’)"》
《/TD》
《/TR》
《/TABLE》
《/TABLE》
《/B》
《/FORM》
《/CENTER》
《SCRIPT LANGUAGE="JavaScript"》
《!-- Begin
var FKeyPad = document.Keypad;
var Accum = 0;
var FlagNewNum = false;
var PendingOp = "";
function NumPressed (Num) {
if (FlagNewNum) {
FKeyPad.ReadOut.value = Num;
FlagNewNum = false;
}
else {
if (FKeyPad.ReadOut.value == "0")
FKeyPad.ReadOut.value = Num;
else
FKeyPad.ReadOut.value += Num;
}
}
function Operation (Op) {
var Readout = FKeyPad.ReadOut.value;
if (FlagNewNum && PendingOp != "=");
else
{
FlagNewNum = true;
if ( ’+’ == PendingOp )
Accum += parseFloat(Readout);
else if ( ’-’ == PendingOp )
Accum -= parseFloat(Readout);
else if ( ’/’ == PendingOp )
Accum /= parseFloat(Readout);
else if ( ’*’ == PendingOp )
Accum *= parseFloat(Readout);
else
Accum = parseFloat(Readout);
FKeyPad.ReadOut.value = Accum;
PendingOp = Op;
}
}
function Decimal () {
var curReadOut = FKeyPad.ReadOut.value;
if (FlagNewNum) {
curReadOut = "0.";
FlagNewNum = false;
}
else
{
if (curReadOut.indexOf(".") == -1)
curReadOut += ".";
}
FKeyPad.ReadOut.value = curReadOut;
}
function ClearEntry () {
FKeyPad.ReadOut.value = "0";
FlagNewNum = true;
}
function Clear () {
Accum = 0;
PendingOp = "";
ClearEntry();
}
function Neg () {
FKeyPad.ReadOut.value = parseFloat(FKeyPad.ReadOut.value) * -1;
}
function Percent () {
FKeyPad.ReadOut.value = (parseFloat(FKeyPad.ReadOut.value) / 100) * parseFloat(Accum);
}
// End --》
《/SCRIPT》