本文目录一览：
如何使用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
html lang="en"
head
meta charset="UTF-8"
title简单计算器/title
link href="main.css" rel="stylesheet"
/head
body
div id="calculator"
div id="calculator_container"
h3计算器/h3
table id="calculator_table"
tbody
tr
td colspan="5"
input type="text" id="resultIpt" readonly="readonly" value="" size="17" maxlength="17" style="width:294px;color: black"
/td
/tr
tr
tdinput type="button" value="←" class="btn_color1 btn_operation"/td
tdinput type="button" value="全清" class="btn_color1 btn_operation"/td
tdinput type="button" value="清屏" class="btn_color1"/td
tdinput type="button" value="﹢/﹣" class="btn_color2 btn_operation"/td
tdinput type="button" value="1/×" class="btn_color2 btn_operation"/td
/tr
tr
tdinput type="button" value="7" class="btn_color3 btn_number"/td
tdinput type="button" value="8" class="btn_color3 btn_number"/td
tdinput type="button" value="9" class="btn_color3 btn_number"/td
tdinput type="button" value="÷" class="btn_color4 btn_operation"/td
tdinput type="button" value="％" class="btn_color2 btn_operation"/td
/tr
tr
tdinput type="button" value="4" class="btn_color3 btn_number"/td
tdinput type="button" value="5" class="btn_color3 btn_number"/td
tdinput type="button" value="6" class="btn_color3 btn_number"/td
tdinput type="button" value="×" class="btn_color4 btn_operation"/td
tdinput type="button" value="√" class="btn_color2 btn_operation"/td
/tr
tr
tdinput type="button" value="1" class="btn_color3 btn_number"/td
tdinput type="button" value="2" class="btn_color3 btn_number"/td
tdinput type="button" value="3" class="btn_color3 btn_number"/td
tdinput type="button" value="－" class="btn_color4 btn_operation"/td
td rowspan="2"
input type="button" value="＝" class="btn_color2" style="height: 82px" id="simpleEqu"
/td
/tr
tr
td colspan="2"
input type="button" value="0" class="btn_color3 btn_number" style="width:112px"
/td
tdinput type="button" value="." class="btn_color3 btn_number" /td
tdinput type="button" value="＋" class="btn_color4 btn_operation"/td
/tr
/tbody
/table
/div
/div
script type="text/javascript" src="calculator.js"/script
/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-*/
}
JS
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=0;ibtns_number.length;i++){
btns_number[i].onclick=function (){
temp += this.value;
resultIpt.value = temp;
};
}
//对获取到的数进行操作
for(var j=0;jbtns_operation.length;j++) {
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);
}
}
如何用js做一个简易计算器？
js做一个简易计算器具体如下：
html
head
titlejs运算/title
boby
table
tr
td第一个数/td
tdinput type="text" id="onesum"/td
/tr
tr
td运算符号/td
tdinput type="text" id="fh"/td
/tr
tr
td第二个数/td
tdinput type="text" id="twosum"/td
/tr
tr
td计算结果/td
tdinput type="text" id="sum"/td
/tr
tr
td colspan="2"input type="button" value=" 计算 " onclick="js()"/td
/tr
table
script
function js(){
var num1=document.getElementById("onesum").value;
var num2=document.getElementById("twosum").value;
var fh=document.getElementById("fh").value;
var sum=0;
nu
m1=Number(num1);
num2=Number(num2);
if(fh=='+')
{
sum=num1+num2;
}
else if(fh=='-')
{
sum=num1-num2;
}else if(fh=='*')
{
sum=num1*num2;
}else if(fh=='/')
{
sum=num1/num2;
}
//alert(sum);
document.getElementById("sum").value=sum;
}
/script
/boby
/html
JavaScript 教程 JavaScript 是属于网络的脚本语言！ JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。
如何用css js制作计算器？
源代码如下：
!doctype html
html
head
meta charset="utf-8"
titlejs加减乘除计算器代码/title
style
body,ul{ margin:0px; padding:0px;}
body{ background:#AF6332}
li{ list-style:none;}
.fl{ float:left;}
.fr{ float:right;}
.clearfix:after{ content:""; display:block;clear:both}
.clearfix{zoom:1;}
/*是用inset可以将外部阴影改成内部阴影;若要实现内外阴影同时存在，将其并在一行用逗号隔开*/
.calBox{ width:460px; padding-bottom:10px;background:#FDFDFD; border-radius:5px; position:absolute; left:50%; top:50%; margin-left:-230px; margin-top:-225px; box-shadow:0px 0px 10px rgba(0,0,0,0.8),0px 0px 10px rgba(0,0,0,0.5) inset; -webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.8),0px 0px 10px rgba(0,0,0,0.5) inset; background:#F9F9F9; overflow:hidden}
input{ width:406px; height:82px; margin:10px 7px 0px; border-radius:5px; border:1px solid #64655F; box-shadow:0px 5px 2px rgba(157,157,145,0.8) inset; -webkit-box-shadow:0px 5px 2px rgba(157,157,145,0.8) inset; outline:none; background:#FCFDEB; text-align:right; font-family:"微软雅黑"; font-size:40px; padding:0px 10px;}
ul{}
li{ list-style:none; width:74px; height:34px; line-height:34px; text-align:center; font-family:"微软雅黑"; border:1px solid #8B8B8B; border-radius:5px; background:url(/jscss/demoimg/201402/calBg) repeat-x; float:left; margin:12px 6px 0px;}
.one li{ height:44px; background:url(/jscss/demoimg/201402/calBg1.jpg) repeat-x; line-height:44px;cursor:pointer;}
.one .orange{ background:url(/jscss/demoimg/201402/calBg2.jpg) repeat-x; border:1px solid #875733;}
.one .black{ background:url(/jscss/demoimg/201402/calBg3.jpg) repeat-x; border:1px solid #363636; color:#fff;}
.one .gray{ background:url(/jscss/demoimg/201402/calBg4.jpg) repeat-x; border:1px solid #5F6366;}
.zero{ width:160px;}
.one .deng{ background:url(/jscss/demoimg/201402/calBg5.jpg); height:100px;}
.twoBox{ width:353px; overflow:hidden; }
.two{ width:358px;}
.calBox .three { margin:0px}
.calu{ padding:0px 10px; width:470px;}
/style
script type="text/javascript"
function findArr(a,c){for(var b=0;ba.length;b++){if(a[b]==c){return true}}return false}function getClass(d,f){if(document.getElementsByClassName){return d.getElementsByClassName(f)}else{var a=[];var e=document.getElementsByTagName("*");for(var c=0;ce.length;c++){var b=e[c].className.split(" ");if(findArr(b,f)){a.push(e[c])}}return a}};
window.onload=function()
{
var aNum=getClass(document,'num');
var oText=document.getElementById('text');
var aPer=getClass(document,'oper');
var oPer=document.getElementById('per');
var oText1=document.getElementById('text1');
var oDeng=getClass(document,'deng')[0];
var oSq=getClass(document,'sq')[0];
var oRec=getClass(document,'rec')[0];
var oZheng=getClass(document,'zheng')[0];
var oOn=getClass(document,'on')[0];
var oOff=getClass(document,'off')[0];
var oClea=getClass(document,'clea')[0];
var bOnOrOffClick=false;
function fnNum(a)
{
var bClear=false;
oText.value='0'
for(var i=0;iaNum.length;i++)
{
aNum[i].onclick=function()
{
if(!bOnOrOffClick)return;
if(bClear)
{
bClear=false;
}
if(oText.value.indexOf('.')!=-1)
{
if(this.innerHTML=='.')
{
return;
}
}
if(oPer.valueoText.valueoText1.value=='')
{
oText1.value=oText.value;
oText.value='';
}
var re=/^0.{1}d+$/;
var re1=/^([0]d+)$/;
oText.value+=this.innerHTML;
if(re.test(oText.value))
{
return;
}
if(re1.test(oText.value))
{
oText.value=this.innerHTML;
}
}
//符号部分的添加
for(var j=0;jaPer.length;j++)
{
aPer[j].onclick=function()
{
if(oText.valueoPer.valueoText1.value)
{
var n=eval(oText1.value+oPer.value+oText.value);
oText.value=n;
oText1.value='';
}
oPer.value=this.innerHTML;
}
}
//点击等号的时候
oDeng.onclick=function()
{
//+-*/%的情况
if(oText1.value==''oPer.value==''oText.value=='')
{
return;
}
var n=eval(oText1.value+oPer.value+oText.value);
oText.value=n;
oText1.value='';
oPer.value='';
bClear=true;
}
//点击开根号的时候
oSq.onclick=function()
{
var m=Math.sqrt(oText.value);
oText.value=m;
}
//点击倒数的时候
oRec.onclick=function()
{
var a=1/oText.value;
if(oText.value=='0')
{
a='正无穷'
}
oText.value=a;
}
//正负号的时候
oZheng.onclick=function()
{
if(oText.value0)
{
oText.value=-oText.value;
}
else
{
oText.value =-oText.value;
}
}
//清屏的时候
oClea.onclick=function()
{
oText.value='0';
oText1.value='';
oPer.value='';
}
}
}
//on时
oOn.onclick=function()
{
bOnOrOffClick=true;
fnNum(bOnOrOffClick);
}
//off时
oOff.onclick=function()
{
bOnOrOffClick=false;
fnNum(bOnOrOffClick);
oText.value='';
}
}
/script
/head
body
div class="calBox"
div class="calu"
input type="text" id="text"
ul class="one clearfix"
li class="orange on"开机/li
li class="orange off"关机/li
li class="orange clea"清屏/li
li class="black zheng"+/-/li
li class="black rec"1/x/li
li class="num"7/li
li class="num"8/li
li class="num"9/li
li class="gray oper"//li
li class="black oper"%/li
li class="num"4/li
li class="num"5/li
li class="num"6/li
li class="gray oper"*/li
li class="black sq"√/li
!-- --
/ul
div class="clearfix"
div class="twoBox fl"
ul class="one fl two"
li class="num"1/li
li class="num"2/li
li class="num"3/li
li class="gray oper"-/li
li class="zero num"0/li
li class="num"./li
li class="gray oper"+/li
/ul
/div
ul class="one three clearfix fl"
li class="black deng fl"=/li
/ul
/div
/div
/div
input type="text" id="per" style="display:none"
input type="text" id="text1" style="display:none"
div style="text-align:center;clear:both"
/div
/body
/html