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

2023-04-16 04:13:02JavaScript017

如何使用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编写计算器:

<!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>

function test(){

var txt1 = document.getElementById("txt1"),

txt2 = document.getElementById("txt2"),

txt3 = document.getElementById("txt3"),

opt = document.getElementById("sel")

txt3.value = eval(txt1.value + opt.value + txt2.value)//eval函数可计算某个字符串，并执行其中的的js代码

} <input type="text" id="txt1" />

</select>

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

# 上一篇：c语言为什么rand()(float)RAND_MAX;能产生随机数

# 下一篇：css中，关于滚动条滑块的问题

推荐阅读

热门文章

最新发布

标签列表

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

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