以计算器形式将输入更改为响应div

时间：2015-12-31 01:02:29

标签： javascript jquery input

目前我正在使用以下代码在我的网站上生成功能计算器：

function addChar(input, character) {
  if (input.value == null || input.value == "0")
    input.value = character
  else
    input.value += character
}

function cos(form) {
  form.display.value = Math.cos(form.display.value);
}

function sin(form) {
  form.display.value = Math.sin(form.display.value);
}

function tan(form) {
  form.display.value = Math.tan(form.display.value);
}

function sqrt(form) {
  form.display.value = Math.sqrt(form.display.value);
}

function ln(form) {
  form.display.value = Math.log(form.display.value);
}

function exp(form) {
  form.display.value = Math.exp(form.display.value);
}

function deleteChar(input) {
  input.value = input.value.substring(0, input.value.length - 1)
}

function changeSign(input) {
  if (input.value.substring(0, 1) == "-")
    input.value = input.value.substring(1, input.value.length)
  else
    input.value = "-" + input.value
}

function compute(form) {
  form.display.value = eval(form.display.value)
}

function square(form) {
  form.display.value = eval(form.display.value) * eval(form.display.value)
}

function checkNum(str) {
  for (var i = 0; i < str.length; i++) {
    var ch = str.substring(i, i + 1)
    if (ch < "0" || ch > "9") {
      if (ch != "/" && ch != "*" && ch != "+" && ch != "-" && ch != "." && ch != "(" && ch != ")") {
        alert("invalid entry!")
        return false
      }
    }
  }
  return true
}

$('#button-exp').click(function() {
  if (checkNum(this.form.display.value)) {
    exp(this.form)
  }
});

$('#button-divide').click(function() {
  addChar(this.form.display, '/')
});

$('#button-ln').click(function() {
  if (checkNum(this.form.display.value)) {
    ln(this.form)
  }
});

$('#button-sqrt').click(function() {
  if (checkNum(this.form.display.value)) {
    sqrt(this.form)
  }
});

$('#button-minus').click(function() {
  addChar(this.form.display, '-')
});

$('#button-multiply').click(function() {
  addChar(this.form.display, '*')
});

$('#button-square').click(function() {
  if (checkNum(this.form.display.value)) {
    square(this.form)
  }
});

$('#button-dot').click(function() {
  addChar(this.form.display, '.')
});

$('#button-plus').click(function() {
   addChar(this.form.display, '+')
});

$('#button-pos').click(function() {
  changeSign(this.form.display)
});

$('#button-cos').click(function() {
  if (checkNum(this.form.display.value)) {
    cos(this.form)
  }
});

$('#button-sin').click(function() {
  if (checkNum(this.form.display.value)) {
    sin(this.form)
  }
});

$('#button-tan').click(function() {
  if (checkNum(this.form.display.value)) {
    tan(this.form)
  }
});

$('#button-cb').click(function() {
   addChar(this.form.display, ')')
});


$('#button-clear').click(function() {
  this.form.display.value = 0
});


$('#button-bsp').click(function() {
  deleteChar(this.form.display)
});

$('#button-enter').click(function() {
  if (checkNum(this.form.display.value)) {
    compute(this.form)
  }
});

$.each([1, 2, 3, 4, 5, 6, 7, 8, 9, 0], function(i, e) {
  $('#button-' + e).click(function() {
    addChar(this.form.display, e);
  });
});

使用HTML：

<FORM NAME="sci-calc">
  <TABLE CELLSPACING="0" CELLPADDING="1">
    <TR>
      <td COLSPAN="5" ALIGN="center">
        <INPUT NAME="display" VALUE="0" ID="disp" SIZE="28" MAXLENGTH="25"/>
      </td>
    </TR>
    <TR>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID='button-exp' VALUE=" e<sup>x</sup>"/>
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-log" VALUE="  log  "/>
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-7" VALUE="  7  "/>
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-8" VALUE="  8  "/>
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-9" VALUE="  9  "/>
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-divide" VALUE="   &#247;   "/>
      </TD>
    </TR>
    <TR>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-ln" VALUE="   ln   "/>
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-4" VALUE="  4  "/>
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-5" VALUE="  5  "/>
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-6" VALUE="  6  "/>
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-multiply" VALUE="   &#215;   "/>
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" id="button-percent" VALUE="&#37;" />
      </TD>
    </TR>
    <TR>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-sqrt" VALUE=" &radic; "/>
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-1" VALUE="  1  "/>
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-2" VALUE="  2  "/>
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-3" VALUE="  3  "/>
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-minus" VALUE="   &#8722;   "/>
      </TD>
    </TR>
    <TR>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-square" VALUE="  x&sup2;  "/>
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-cube" VALUE="  x&sup3;  "/>
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-0" VALUE="  0  "/>
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-dot" VALUE="   .  "/>
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-pos" VALUE=" +/&#8722; "/>
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-plus" VALUE="   +  "/>
      </TD>
    </TR>
    <TR>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-ob" VALUE="    (    "/>
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-cos" VALUE="cos"/>
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-sin" VALUE=" sin"/>
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-tan" VALUE=" tan"/>
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-cb" VALUE="   )   "/>
      </TD>
    </TR>
    <TR>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-clear" VALUE="C"/>
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-pi" VALUE="&#960;"/>
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID='button-factorial' VALUE=" x! "/>
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-bsp" VALUE="&#9003;"/>
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-enter" VALUE="="/>
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button"  ID="button-2nd" VALUE=" 2nd "/>
      </TD>
    </TR>
  </TABLE>
</FORM>

我想知道是否可以在不丢失功能的情况下将这些输入更改为div？如果是这样，javascript / jQuery看起来怎么样？

0 个答案:

没有答案
相关问题
最新问题