JSを使って簡単な計算機を書く方法
41768 ワード
まず、JSには数値の精度誤差の問題があります.
したがって、計算機の作成では、まず計算精度の問題を解決すべきであり、以下の4つのコードセグメントはjsにおける正確な加減乗除演算関数である.
以下は詳細な計算機コードです:HTML 5
CSS3
JS
0.1+0.2 //0.30000000000000004
0.3-0.1 //0.19999999999999998したがって、計算機の作成では、まず計算精度の問題を解決すべきであり、以下の4つのコードセグメントは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);
}
}以下は詳細な計算機コードです:HTML 5
<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>
<td><input type="button" value="←" class="btn_color1 btn_operation">td>
<td><input type="button" value=" " class="btn_color1 btn_operation">td>
<td><input type="button" value=" " class="btn_color1">td>
<td><input type="button" value="﹢/﹣" class="btn_color2 btn_operation">td>
<td><input type="button" value="1/×" class="btn_color2 btn_operation">td>
tr>
<tr>
<td><input type="button" value="7" class="btn_color3 btn_number">td>
<td><input type="button" value="8" class="btn_color3 btn_number">td>
<td><input type="button" value="9" class="btn_color3 btn_number">td>
<td><input type="button" value="÷" class="btn_color4 btn_operation">td>
<td><input type="button" value="％" class="btn_color2 btn_operation">td>
tr>
<tr>
<td><input type="button" value="4" class="btn_color3 btn_number">td>
<td><input type="button" value="5" class="btn_color3 btn_number">td>
<td><input type="button" value="6" class="btn_color3 btn_number">td>
<td><input type="button" value="×" class="btn_color4 btn_operation">td>
<td><input type="button" value="√" class="btn_color2 btn_operation">td>
tr>
<tr>
<td><input type="button" value="1" class="btn_color3 btn_number">td>
<td><input type="button" value="2" class="btn_color3 btn_number">td>
<td><input type="button" value="3" class="btn_color3 btn_number">td>
<td><input 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>
<td><input type="button" value="." class="btn_color3 btn_number" >td>
<td><input 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;ifunction (){
temp += this.value;
resultIpt.value = temp;
};
}
//
for(var j=0;jfunction () {
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);
}
}