如何使用javascript编写一个计算器

2023-03-14 23:38:01JavaScript028

如何使用javascript编写一个计算器,第1张

首先，由于JS的存在数值的精度误差问题：

0.1+0.2 //0.30000000000000004

0.3-0.1 //0.19999999999999998

所以在编写计算器是应首先解决计算精度问题，以下四个代码段分别是js中精确的加减乘除运算函数

//浮点数加法运算

function floatAdd(arg1,arg2){

var r1,r2,m

try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}

try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}

m=Math.pow(10,Math.max(r1,r2))

return (arg1*m+arg2*m)/m

}

//浮点数减法运算

function floatSub(arg1,arg2){

var r1,r2,m,n

try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}

try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}

m=Math.pow(10,Math.max(r1,r2))

//动态控制精度长度

n=(r1>=r2)?r1:r2

return ((arg1*m-arg2*m)/m).toFixed(n)

}

//浮点数乘法运算

function floatMul(arg1,arg2){

var m=0,s1=arg1.toString(),s2=arg2.toString()

try{m+=s1.split(".")[1].length}catch(e){}

try{m+=s2.split(".")[1].length}catch(e){}

return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)

}

//浮点数除法运算

function floatDiv(arg1,arg2) {

var t1 = 0, t2 = 0, r1, r2

try {t1 = arg1.toString().split(".")[1].length} catch (e) {}

try {t2 = arg2.toString().split(".")[1].length} catch (e) {}

with (Math) {

r1 = Number(arg1.toString().replace(".", ""))

r2 = Number(arg2.toString().replace(".", ""))

return (r1 / r2) * pow(10, t2 - t1)

}

以下是详细的计算器代码：

HTML5

<!DOCTYPE html>

<head>

<title>简单计算器</title>

</head>

<body>

<tbody>

<tr>

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

CSS3

* {

margin: 0

padding: 0

}

#calculator{

position: relative

margin: 50px auto

width: 350px

height: 400px

border: 1px solid gray

-webkit-border-radius: 10px

-moz-border-radius: 10px

border-radius: 10px

-webkit-box-shadow: 2px 2px 4px gray

-moz-box-shadow: 2px 2px 4px gray

box-shadow: 2px 2px 4px gray

behavior:url("ie-css3.htc") /*IE8-*/

}

#calculator_table{

position: relative

margin: 10px auto

border-collapse:separate

border-spacing:10px 20px

}

h3{

position: relative

width: 60px

height: 30px

margin: 0 auto

}

#calculator_table td{

width: 50px

height: 30px

border: 1px solid gray

-webkit-border-radius: 2px

-moz-border-radius: 2px

border-radius: 2px

behavior:url("ie-css3.htc") /*IE8-*/

}

#calculator_table td input{

font-size: 16px

border: none

width: 50px

height: 30px

color: white

}

input.btn_color1{

background-color: orange

}

input.btn_color2{

background-color: #133645

}

input.btn_color3{

background-color: #59807d

}

input.btn_color4{

background-color: seagreen

}

input:active{

-webkit-box-shadow: 3px 3px 3px gray

-moz-box-shadow: 3px 3px 3px gray

box-shadow: 3px 3px 3px gray

behavior:url("ie-css3.htc") /*IE8-*/

}

window.onload=function() {

var resultIpt = document.getElementById("resultIpt")//获取输出文本框

var btns_number = document.getElementsByClassName("btn_number")//获取数字输入按钮

var btns_operation = document.getElementsByClassName("btn_operation")//获取操作按钮

var simpleEqu = document.getElementById("simpleEqu")//获取"="按钮

var temp = ""

var num1= 0,num2=0

//获取第一个数

for(var i=0i<btns_number.lengthi++){

btns_number[i].onclick=function (){

temp += this.value

resultIpt.value = temp

}

//对获取到的数进行操作

for(var j=0j<btns_operation.lengthj++) {

btns_operation[j].onclick = function () {

num1=parseFloat(resultIpt.value)

oper = this.value

if(oper=="1/×"){

num1 = Math.pow(num1,-1)//取倒数

resultIpt.value = num1.toString()

}else if(oper=="﹢/﹣"){ //取相反数

num1 = -num1

resultIpt.value = num1.toString()

}else if(oper=="√"){ //取平方根

num1 =Math.sqrt(num1)

resultIpt.value = num1.toString()

}else if(oper=="←"){ //删除个位

resultIpt.value = resultIpt.value.substring(0, resultIpt.value.length - 1)

}else if(oper=="全清"){ //清除数字

resultIpt.value = ""

}

else{ //oper=="＋" "－" "×" "÷" "％"时，继续输入第二数字

temp = ""

resultIpt.value = temp

}

//输出结果

simpleEqu.onclick=function(){

num2=parseFloat(temp) //取得第二个数字

calculate(num1, num2, oper)

resultIpt.value = result.toString()

}

//定义一个计算函数

function calculate(num1, num2, oper) {

switch (oper) {

case "＋":

result=floatAdd(num1, num2)//求和

break

case "－":

result=floatSub(num1, num2)//求差

break

case "×":

result=floatMul(num1, num2) //求积

break

case "÷":

result=floatDiv(num1, num2) //求商

break

case "％":

result=num1%num2 //求余数

break

}

//精确计算

//浮点数加法运算

function floatAdd(arg1,arg2){

var r1,r2,m

try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}

try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}

m=Math.pow(10,Math.max(r1,r2))

return (arg1*m+arg2*m)/m

}

//浮点数减法运算

function floatSub(arg1,arg2){

var r1,r2,m,n

try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}

try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}

m=Math.pow(10,Math.max(r1,r2))

//动态控制精度长度

n=(r1>=r2)?r1:r2

return ((arg1*m-arg2*m)/m).toFixed(n)

}

//浮点数乘法运算

function floatMul(arg1,arg2){

var m=0,s1=arg1.toString(),s2=arg2.toString()

try{m+=s1.split(".")[1].length}catch(e){}

try{m+=s2.split(".")[1].length}catch(e){}

return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)

}

//浮点数除法运算

function floatDiv(arg1,arg2) {

var t1 = 0, t2 = 0, r1, r2

try {t1 = arg1.toString().split(".")[1].length} catch (e) {}

try {t2 = arg2.toString().split(".")[1].length} catch (e) {}

with (Math) {

r1 = Number(arg1.toString().replace(".", ""))

r2 = Number(arg2.toString().replace(".", ""))

return (r1 / r2) * pow(10, t2 - t1)

}

以下简单说下用 JavaScript 编写简单计算器的思路。

一、运算核心

对于 JavaScript 来说，编写一个简单的计算器的核心，是借用 js 提供的 eval 函数，eval 函数可以对给定的字符串表达式执行运算，并返回结果。

举例来说：

s = eval("50+20-30*40/20")

其结果是 10。可以看出，先乘除后加减等运算规则都能正确处理。

二、输入（组合）运算式

核心运算解决后，下一步就是解决如何输入（组合）运算式。

其实也并不复杂，计算器上的符号可以分为4类：

1、0-9 数值

2、% .

3、+ - * /

4、= 退格

除了第 2 类和第 4 类，需要专门处理外，基本上都可以当做字符串处理。即，设置一个全局变量，用于保存用户的输入，当点击时，将值添加进变量字符串的末尾。

当用户点击 “=” 时，调用 eval 函数，计算表达式，并输出结果。

当用户点击“退格”时，删除表达式的最后一个字符。

三、进行界面设计

对于 JS 来说，大多还是要借用 HTML 元素，如 Button 等，样式用 CSS 进行控制。

以下提供相关代码供参考：

var num = 0 // 定义第一个输入的数据

function jsq(num) {

//获取当前输入

if(num=="%"){

document.getElementById('screenName').value=Math.round(document.getElementById('screenName').value)/100

}else{

document.getElementById('screenName').value += document.getElementById(num).value

}

function eva() {

//计算输入结果

document.getElementById("screenName").value = eval(document.getElementById("screenName").value)

}

function clearNum() {

//清0

document.getElementById("screenName").value = null

document.getElementById("screenName").focus()

}

function tuiGe() {

//退格

var arr = document.getElementById("screenName")

arr.value = arr.value.substring(0, arr.value.length - 1)

}

</script>

用javascript编写计算器:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Javascript实现计算器</title>

input{

width:30px

height:20px

text-align:center

}

#tbCalculator td

{

text-align:center

vertical-align:middle

}

</style>

var result //保存点击运算符之前输入框中的数值

var operator //保存运算符

var isPressEqualsKey = false //记录是否按下”=“键

//数字键事件

function connectionDigital(control)

{

var txt = document.getElementById('txtScream')

if(isPressEqualsKey)

{

txt.value = "" //已进行过计算，则清空数值输入框重新开始

isPressEqualsKey = false

}

//数值输入已经存在小数点,则不允许再输入小数点

if(txt.value.indexOf('.') > -1 && control.value == '.')

return false

txt.value += control.value //将控件值赋给数值输入框中

}

//退格键事件

function backspace()

{

var txt = document.getElementById('txtScream')

txt.value = txt.value.substring(0,txt.value.length - 1)

}

//ce键事件：清空数字输入框

function clearAll()

{

document.getElementById('txtScream').value = ""

result = ""

operator = ""

}

// +、-、*、/ 事件

function calculation(control)

{

//将运算符保存入全局变量中

operator = control.value

var txt = document.getElementById('txtScream')

if(txt.value == "")return false //数值输入框中没有数字，则不能输入运算符

//将数值输入框中的值保存到计算表达式中

result = txt.value

//清空输入框，以待输入操作值

txt.value = ""

}

//计算结果

function getResult()

{

var opValue

//计算表达式中存在运算符

var sourseValue = parseFloat(result)

var txt = document.getElementById('txtScream')

if(operator == '*')

opValue = sourseValue * parseFloat(txt.value)

else if(operator == '/')

opValue = sourseValue / parseFloat(txt.value)

else if(operator == '+')

opValue = sourseValue + parseFloat(txt.value)

else if(operator == '-')

opValue = sourseValue - parseFloat(txt.value)

txt.value = opValue

isPressEqualsKey = true

result = ""

opValue = ""

}

</script>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：电脑怎么全屏

# 下一篇：在C语言中，如何把一个char类型的二维数组作为方法的返回值？

推荐阅读

热门文章

最新发布

标签列表

如何使用javascript编写一个计算器

给您推荐相同类型的内容：