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

首先，由于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)

}

canvas能做什么?

canvas是HTML5中的新元素，你可以使用javascript用它来绘制图形、图标、以及其它任何视觉性图像。它也可用于创建图片特效和动画。如果你掌握了完整的命令，你可以用canvas创建丰富的web应用程序。如果你想很好的使用canvas，你首先应该很好的掌握javascript。

这篇文章是一篇基础教程，你能了解一些设计方法。比如用HTML5 canvas 进行图形设计。

用HTML5 canvas设计

设计和开发一个web页面会包含很多的内容，用户首先需要有一个支持HTML canvas的浏览器。

首先创建一个HTML5文档页面，设置document type是HTMl5的；

其次在页面body区域添加一个canvas标签：

第三、给这个canvas定义一个id属性，这样方便我们在js中调用它。添加一个宽和高属性，在canvas标签中添加一个当浏览器不支持的时候显示给用户的内容。下面是列子代码：

<p>你的浏览器不支持HTML5 canvas,请更新您的浏览器！</p>

</canvas>

现在我们创建了一个包含HTML5 canvas 元素的空白画布，我们将使用js和canvas元素的方法来创建我们的图像。

添加一个javascript用HTMl5 canvas的方法：

var canvasTest=document.getElementById('canvastest')//获取canvas元素；

var testcontext=canvasTest.getContext('2d')

使用javascript来创建你的画布，你可以使用矩形、圆圈和三角形,并使用线、幻灯片和渐变来创建你的设计。

下面是完成的代码：

var canvasTest=document.getElementById('canvastest')

var testcontext=canvasTest.getContext('2d')

// create rectangle

testcontext.fillStyle='rgb(0,125,125)'

testcontext.fillRect(10,10,250,180)

// create circle

testcontext.beginPath()

testcontext.arc(300, 340, 100, 0, Math.PI * 2, true)

testcontext.closePath()

testcontext.fillStyle='rgb(75,10,125)'

testcontext.fill()

testcontext.stroke()

我们可以将上面的代码加入window.onload，或者jQuery的ready方法里，当文档加载完，将会创建文明的图形。

一些HTML5 canvas 图像解决方案

用与HTML5 Canvas元素你可以开发动态绘图对象比如如可视化信息或数据图。HTML5 canvas 可以在javascript的帮助下很容易的绘制二维图形。让我们来看一下HTML5 canvas元素的一些数据图应用。

1. HumbleFinance

HumbleFinance是用js开发的一个开源的数据可视化图表，它用HTML5 canvas生成可视化图表数据，它可以用一个轴来展示任何两个二维的数据集。

地址： http://www.humblesoftware.com/finance/index

2.Graphr

Graphr是一个用HTML5 canvas写的一个计算器应用，有每个图像计算器应有的基本功能。

地址：http://www.graphr.org/

3.用HTML5和jQuery创建的华丽的动画饼图

你可以用javascript和HTML5来创建一个交互式饼图，有华丽的动画效果。这在之前只能用flash来完成，现在也可以使用最新的HTML5技术了。

地址：http://cyberpython.github.com/AwesomeChartJS/

4. AwesomeJS

AwesomeJS 能够让你创建简单有用的图表，而仅需几行代码即可。这是一个基于HTML5和canvas的javascript库。

地址：http://cyberpython.github.com/AwesomeChartJS/

5.Ticker Plot（股票图）

Ticker Plot（股票图）是每一个在工作是使用图标的web开发人员都必备的一个图表工具。这是一个开源的项目，它使用HTML5 canvas在画布上绘制图形符号和鼠标事件。Ticker Plot（股票图）是专门为股票行情和技术分析设计的。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6141421.html

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

发表评论

评论列表（0条）