說明：
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" onclick="clear1()">
<input type="button" value="<-" class="big" onclick="clear2()">
<input type="button" value="背景色" class="big" onclick="colour()">
<input type="button" value="1" onclick="count(1)">
<input type="button" value="2" onclick="count(2)">
<input type="button" value="3" onclick="count(3)">
<input type="button" value="4" onclick="count(4)">
<input type="button" value="5" onclick="count(5)">
<input type="button" value="6" onclick="count(6)">
<input type="button" value="7" onclick="count(7)">
<input type="button" value="8" onclick="count(8)">
<input type="button" value="9" onclick="count(9)">
<input type="button" value="0" onclick="count(0)">
<input type="button" value="." onclick="count('.')">
<input type="button" value="=" onclick="count('=')">
<input type="button" value="+" onclick="count('+')">
<input type="button"value="-" onclick="count('-')">
<input type="button" value="*" onclick="count('*')">
<input type="button" value="/" onclick="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>