效果图
css部分
.jsq{
width: 298px;
padding: 5px 5px;
background-color:#F3F0E5;
border: 2px #D1D1D1 solid;
margin: 0px auto;
}
#header{
font-size: 14px;
margin-left: 10px;
}
.js{
padding: 0px 10px;
}
.js div{
text-align: right;
background-color:#F3F0E5 ;
border: 0px;
width: 100%;
}
#txt1{
height: 28px;
line-height: 28px;
color: #666;
font-size: 16px;
}
#txt2{
padding-bottom: 10px;
color: #000000;
font-size: 45px;
font-weight: bold;
height: 65px;
}
.but{
}
.but td{
display: inline-block;
width: 72px;
height: 51px;
line-height: 51px;
text-align: center;
padding: 0px;
margin: 1px;
background-color:white;
font-weight: bold;
box-sizing: border-box;
}
.but td:hover{
border:rgb(168,165,159) solid 2px;
background-color: #E1DFD8;
}
tr:nth-child(1) td{
background-color: #F8F7F0;
}
tr td:nth-child(4){
background-color: #F8F7F0;
}
tr:nth-last-child(1) td:nth-last-child(1){
background-color:#ADABA5 ;
}
tr:nth-last-child(1) td:nth-last-child(1):hover{
background-color:#767572 ;
}
JS部分
var flag = true;
function num(txt){
var a = parseFloat(txt.innerText);
var t2 =document.getElementById("txt2");
var b = t2.innerText;
if(b.substr(0,1)==0||flag){
t2.innerHTML=a;
}else{
b = b.concat(a);
t2.innerText=b;
}
flag=false;
}
function js(txt){
var a = txt.innerText;
var t1 =document.getElementById("txt1");
var t2 =document.getElementById("txt2").innerText;
var b = t2+a;
t1.innerText=b
flag=true;
}
function jg(){
var t1 =document.getElementById("txt1");
var t2 =document.getElementById("txt2");
var t11 = t1.innerText;
var t22 = t2.innerText;
var a = parseFloat(t11.substr(0,t11.length));
var b = parseFloat(t22);
var c = t11.substr(t11.length-1,t11.length);
t1.innerText = (t11.concat(t22)).concat("=");
switch(c){
case '+':
t2.innerText=a+b
break;
case '-':
t2.innerText=a-b
break;
case '✖':
t2.innerText=a*b
break;
case '/':
t2.innerText=a/b
break;
case '%':
t2.innerText=a%b
break;
}
}
function ce(){
var t2 =document.getElementById("txt2");
t2.innerText=0;
}
function c(){
var t1 =document.getElementById("txt1");
t1.innerText=null;
ce();
}
function rmove(){
var t2 =document.getElementById("txt2");
t2.innerText = (t2.innerText).substr(0,(t2.innerText).length-1);
}
HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>计算器</title>
</head>
<body>
<div class="jsq">
<div id="header">
计算器
</div>
<div class="js">
<div id="txt1">
</div>
<div id="txt2">
0
</div>
</div>
<div class="but">
<table cellspacing="0" cellpadding="0">
<tr id="#top">
<td onclick="js(this)">%</td>
<td onclick="ce()">CE</td>
<td onclick="c()">C</td>
<td onclick="rmove()">⇦</td>
</tr>
<tr>
<td onmouseover="f(this)" onclick="num(this)">7</td>
<td onclick="num(this)">8</td>
<td onclick="num(this)">9</td>
<td onclick="js(this)">✖</td>
</tr>
<tr >
<td onclick="num(this)">4</td>
<td onclick="num(this)">5</td>
<td onclick="num(this)">6</td>
<td onclick="js(this)">-</td>
</tr>
<tr >
<td onclick="num(this)">1</td>
<td onclick="num(this)">2</td>
<td onclick="num(this)"onclick="js()">3</td>
<td onclick="js(this)">+</td>
</tr>
<tr >
<td onclick="js()">±</td>
<td onclick="num(this)">0</td>
<td onclick="num(this)">.</td>
<td onclick="jg()">=</td>
</tr>
</table>
</div>
</div>
</body>
</html>
</body>
</html>
未完善