基于原生JavaScript的一个计算器

昨天鼓捣着写了个简单的计算器~实现了加、减、乘、除以及进制转换和开根号的功能。使用parseFloat来解决小数乘法结果不准确的问题。使用栈的方法计算进制的转换。

html部分的代码如下：

<div class="outside">
<div class="outside-top">
<input type="text" id="displ" value="">
</div>
<div class="topbut">
<ul>
<!--这里我用个圆圈代表进制转换-->
<li><input type="button" value="○"></li>
<li><input type="button" value="%"></li>
<li><input type="button" value="×"></li>
<li><input type="button" value="√"></li>
<li><input type="button" value="C"></li>
</ul>
</div>
<div class="container">
<ul>
<li><input type="button" value="1"></li>
<li><input type="button" value="2"></li>
<li><input type="button" value="3">&l
11308
t;/li>
<li><input type="button" value="+"></li>
<li><input type="button" value="4"></li>
<li><input type="button" value="5"></li>
<li><input type="button" value="6"></li>
<li><input type="button" value="-"></li>
<li><input type="button" value="7"></li>
<li><input type="button" value="8"></li>
<li><input type="button" value="9"></li>
<li><input type="button" value="÷"></li>
<li><input type="button" value="0"></li>
<li><input type="button" value="."></li>
<li><input type="button" value="=" id="result"></li>
</ul>
</div>
<div class="footer">
<div class="footer-cen">
<p>二进制转换：5○2=101<br/>
开平方：9√=3
</p>
</div>
</div>
</div>

css的代码如下：

*{margin: 0;padding: 0;list-style-type: none;}
.outside{width: 350px;height: 500px;margin:80px auto auto auto;overflow:hidden;position:relative;background-color: #84bdca;}
.outside .outside-top{width: 336px;height: 70px;background-color: white;margin:20px auto auto 5px;position: relative;}
#displ{width:100%;height:100%;font-size: 25px;}
.outside .topbut{width: 340px;height: 60px;margin: 5px auto auto auto;background-color: #d0eed5;}
li{display: inline-block}
.topbut li input{width: 64px;height:55px;margin:2px auto;cursor:pointer;line-height: 60px;}
.outside .container{width: 340px;height: 280px;margin:2px auto auto auto;background-color: #b6b6bd;}
.outside .container li input{width: 81px;height: 70px;cursor: pointer; box-shadow: 2px 20px 10px #cbcbcb inset}
#result{width: 165px;}
.outside .footer{width: 340px;height: 60px;margin: 5px auto;}
.outside .footer .footer-cen{width: 100%;height: 55px;margin: 5px;}

JavaScript代码如下：

(function clicktouch(){
var putkey=document.getElementsByTagName("input");
var displnum=document.getElementById("displ");
var result=document.getElementById("result");
for(var i=0;i<putkey.length;i++){
putkey[i].onclick=function(i){
displnum.value+=this.value;
if(this.value=="+"){
result.onclick=function (i) {
var numnum=displnum.value.split("+");
var num1=parseFloat(numnum[0]);
var num2=parseFloat(numnum[1]);
if(numnum.length==2){
displnum.value=add(num1,num2);
}else {
displnum.value="仅支持两个数的计算"
}
}
}else if(this.value=="-") {
result.onclick = function () {
var numnum = displnum.value.split("-");
var num1 = parseFloat(numnum[0]);
var num2 = parseFloat(numnum[1]);
if (numnum.length == 2) {
displnum.value = subtract(num1, num2)
} else {
displnum.value = "仅支持两个数的计算"
}
}
}else if(this.value=="÷"){
result.onclick = function () {
var numnum = displnum.value.split("÷");
var num1 = parseFloat(numnum[0]);
var num2 = parseFloat(numnum[1]);
if (numnum.length == 2) {
displnum.value = divide(num1, num2)
} else {
displnum.value = "仅支持两个数的计算"
}
}
}else if(this.value=="C"){
displnum.value ="";
}else if(this.value=="×"){
result.onclick = function () {
var numnum = displnum.value.split("×");
var num1 = parseFloat(numnum[0]);
var num2 = parseFloat(numnum[1]);
if (numnum.length == 2) {
displnum.value = multiply(num1, num2).toFixed(4);
} else {
displnum.value = "仅支持两个数的计算"
}
}
} else if(this.value=="×"){
result.onclick = function () {
var numnum = displnum.value.split("×");
var num1 = parseFloat(numnum[0]);
var num2 = parseFloat(numnum[1]);
if (numnum.length == 2) {
displnum.value = multiply(num1, num2)
} else {
displnum.value = "仅支持两个数的计算"
}
}
}else if(this.value=="%"){
result.onclick = function () {
var numnum = displnum.value.split("%");
var num1 = parseFloat(numnum[0]);
var num2 = parseFloat(numnum[1]);
if (numnum.length == 2) {
displnum.value = quyu(num1, num2)
} else {
displnum.value = "仅支持两个数的计算"
}
}
}else if(this.value=="√"){
result.onclick = function () {
var numnum = displnum.value.split("√");
var num1 = parseFloat(numnum[0]);
if (numnum.length == 2) {
displnum.value = Math.sqrt(num1)
} else {
displnum.value = "仅支持两个数的计算"
}
}
}
else if(this.value=="○"){
result.onclick = function () {
var numnum = displnum.value.split("○");
var num = parseFloat(numnum[0]);
var base = parseFloat(numnum[1]);
if (numnum.length == 2) {
displnum.value = mulBase(num,base);
} else {
displnum.value = "仅支持两个数的计算"
}
}
}
}
}
})();

function add(num1,num2) {
if(add.arguments.length==2){
return  num1+num2;
}
}
function subtract(num1,num2){
if(subtract.arguments.length==2){
return num1-num2;
}
}
function divide(num1,num2) {
if(divide.arguments.length==2){
return num1/num2;
}
}
function multiply(num1,num2){
if(multiply.arguments.length==2){
return num1*num2;
}
}
function quyu(num1,num2){
return num1%num2;
}
function tacks(){
this.top=0;
this.dataStore=[];
this.push=push;
this.pop=pop;
this.length=length;
}
function push(element){
this.dataStore[this.top++]=element;
}
function pop(){
return this.dataStore[--this.top];
}
function length() {
return this.top;
}
function mulBase(num,base){
var tack=new tacks();
do{
tack.push(num%base);
num=Math.floor(num/=base);

}while(num>0){
var result="";
while (tack.length()>0){
result+=tack.pop();
}
}
return result;
}

效果如图：

仅支持两个数进行计算，，所以仍有许多需要改进的地方。

如果尝试操作 请温柔地点击这里

我的个人博客地址个人博客