js写了一个计算器
Posted 你的指尖-有改变世界的力量
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js写了一个计算器相关的知识，希望对你有一定的参考价值。
说明：
1：这个计算器可以进行进行连加、连减、连乘、连除、并且支持小键盘输入
2：这个计算器有一个问题没有解决，混合运算代
效果图如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box
width: 300px;
height: 201px;
margin: 100px auto;
border: 1px solid black;
.top
width: 100%;
height: 26px;
background-color: #00bcd4;
text-align: center;
line-height: 22px;
.top input
width: 200px;
height: 22px;
border: none;
outline: none;
text-align: right;
.center
width: 100%;
height:174px;
background-color: #ccc;
border-bottom: 1px solid black;
.center input
width: 70px;
height: 30px;
margin-right: -2px;
margin-top: 5px;
.center .big
width: 91px;
height: 30px;
margin-left: 4px;
</style>
</head>
<body>
<div class="box">
<div class="top" id="text">
<input type="text" id="text_t" value="">
</div>
<div class="center" id="center">
<input type="button" value="CE" class="big" οnclick="clear1()">
<input type="button" value="<-" class="big" οnclick="clear2()">
<input type="button" value="背景色" class="big" οnclick="colour()">
<input type="button" value="1" οnclick="count(1)">
<input type="button" value="2" οnclick="count(2)">
<input type="button" value="3" οnclick="count(3)">
<input type="button" value="4" οnclick="count(4)">
<input type="button" value="5" οnclick="count(5)">
<input type="button" value="6" οnclick="count(6)">
<input type="button" value="7" οnclick="count(7)">
<input type="button" value="8" οnclick="count(8)">
<input type="button" value="9" οnclick="count(9)">
<input type="button" value="0" οnclick="count(0)">
<input type="button" value="." οnclick="count('.')">
<input type="button" value="=" οnclick="count('=')">
<input type="button" value="+" οnclick="count('+')">
<input type="button"value="-" οnclick="count('-')">
<input type="button" value="*" οnclick="count('*')">
<input type="button" value="/" οnclick="count('/')">
</div>
</div>
</body>
<script type="text/javascript">
function colour1()
var color1=parseInt(Math.random()*15);
switch (color1)
case 10:
return "a";
break;
case 11:
return "b";
break;
case 12:
return "c";
break;
case 13:
return "d";
break;
case 14:
return "e";
break;
case 15:
return "f";
break;
default:
return color1;
break;
function colour()
// var color=[0];
// for (var i=0;i<6;i++)
// color[i]=colour1();
//
document.getElementById("center").style.backgroundColor="#"+colour1()+""+colour1()+""+colour1()+""+colour1()+""+colour1()+""+colour1();
function counts(a)
if(a!="=")
document.getElementById("text_t").value=document.getElementById("text_t").value+a;
var mess= document.getElementById("text_t").value;
var res;
if(a=="=")
if(mess.split("+").length>1)
res=parseFloat(mess.split("+")[0])+parseFloat(mess.split("+")[1]);
alert(mess.split("+")[1]);
else if(mess.split("-").length>1)
res=parseFloat(mess.split("-")[0])- parseFloat(mess.split("-")[1]);
else if(mess.split("*").length>1)
res=parseFloat(mess.split("*")[0])* parseFloat(mess.split("*")[1]);
else if(mess.split("/").length>1)
// mess.replace("/",'/');
// res=parseFloat(parseFloat(mess.split("/")[0])/(parseFloat(mess.split("/")[0])));
res=parseFloat(mess.split("/")[0])/ parseFloat(mess.split("/")[1]);
// t=parseFloat(em.split("/")[0])/parseFloat(em.split("/")[1]);
else
res= "结果无法算出";
document.getElementById("text_t").value=res;
function count(test)
// var in=document.getElementsByName("input")[test]
// var q= document.getElementsByClassName("btn");
// alert(q);
// for(var w=0;w< q.length;q++)
//
//
if(test!="=")
document.getElementById("text_t").value=document.getElementById("text_t").value+test;
var em=document.getElementById("text_t").value;
var t;
if(test=="=")
if(em.split("*").length>1)
t=parseFloat(em.split("*")[0]);
for(var i=1;i< em.split("*").length;i++)
t=t*parseFloat(em.split("*")[i]);
if(em.split("/").length>1)
if(parseFloat(em.split("/")[1]==0))
t=parseFloat(em.split("*")[0]);
for(var i=1;i< em.split("*").length;i++)
t=t/parseFloat(em.split("*")[i]);
else
t=parseFloat(em.split("/")[0])/parseFloat(em.split("/")[1]);
if(em.split("+").length>1)
t=parseFloat(em.split("-")[0]);
for(var i=1;i< em.split("+").length;i++)
t=t+parseFloat(em.split("+")[i]);
if(em.split("-").length>1)
t=parseFloat(em.split("-")[0]);
for(var i=1;i< em.split("-").length;i++)
t=t-parseFloat(em.split("-")[i]);
document.getElementById("text_t").value=t;
document.onkeydown = function()
if(window.event.keyCode==46)
clear1();
if(window.event.keyCode==8)
clear2();
var s=window.event.keyCode-96;
if(window.event.keyCode>=96&&window.event.keyCode<=105)
document.getElementById("text_t").value=document.getElementById("text_t").value+s;
switch (window.event.keyCode)
case 107:
document.getElementById("text_t").value=document.getElementById("text_t").value+"+";
break;
case 109:
document.getElementById("text_t").value=document.getElementById("text_t").value+"-";
break;
case 106:
document.getElementById("text_t").value=document.getElementById("text_t").value+"*";
break;
case 111:
document.getElementById("text_t").value=document.getElementById("text_t").value+"/";
break;
case 110:
document.getElementById("text_t").value=document.getElementById("text_t").value+".";
break;
var em=document.getElementById("text_t").value;
var t=em;
if (window.event.keyCode==13)
if(em.split("*").length>1)
t=parseFloat(em.split("*")[0]);
for(var i=1;i< em.split("*").length;i++)
t=t*parseFloat(em.split("*")[i]);
if(em.split("/").length>1)
if(parseFloat(em.split("/")[1]==0))
t=parseFloat(em.split("*")[0]);
for(var i=1;i< em.split("*").length;i++)
t=t/parseFloat(em.split("*")[i]);
else
t=parseFloat(em.split("/")[0])/parseFloat(em.split("/")[1]);
if(em.split("+").length>1)
t=parseFloat(em.split("-")[0]);
for(var i=1;i< em.split("+").length;i++)
t=t+parseFloat(em.split("+")[i]);
if(em.split("-").length>1)
t=parseFloat(em.split("-")[0]);
for(var i=1;i< em.split("-").length;i++)
t=t-parseFloat(em.split("-")[i]);
document.getElementById("text_t").value=t;
function clear2()
document.getElementById("text_t").value=document.getElementById("text_t").value.substring(0,document.getElementById("text_t").value.length-1);
function clear1()
document.getElementById("text_t").value="";
</script>
</html>以上是关于js写了一个计算器的主要内容，如果未能解决你的问题，请参考以下文章