简单网页计算器
CSS文件
.content{
position: relative;
margin: 100px auto;
padding: 0px;
border:1px solid rgb(221, 220, 220);
width:500px;
border-radius: 3px;
top:-50px;
}
.display{
position: relative;
height:40px;
margin-left: 10px;
font-size: 25px;
}
#content{
overflow: hidden;
}
.ul_style{
position: relative;
list-style-type: none;
}
.button{
position: absolute;
margin: 0px auto;
width:480px;
}
.color_1{
color:orangered;
background-color: rgba(238, 237, 237, 0.377) ;
}
table{
width:500px;
border:1px solid rgb(219, 219, 219);
}
td{
width:120px;
height:40px;
border:1px solid rgb(219, 219, 219);
text-align: center;
font-size: 25px;
font-family: "宋体";
}
td:hover{
border: 1px solid rgb(175, 175, 175);
}
#content1{
word-wrap: break-word;
word-break: break-all;
overflow: hidden;
}
#content1{
word-wrap: break-word;
word-break: break-all;
overflow: hidden;
}html文档
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<div class="content">
<div class="display">
<p id = "content1" style="border-bottom:1px solid rgb(219, 219, 219);">0</p>
</div>
<div class="display">
<p id = "content">0</p>
</div>
<div class="button">
<table>
<tr>
<td class="color_1" onclick="caculates('^')">^</td>
<td class="color_1" onclick="math('√')">√</td>
<td class="color_1" onclick="back()">del</td>
<td class="color_1" onclick="zero()">C</td>
</tr>
<tr>
<td class="color_1" onclick="math('sin')">sin</td>
<td class="color_1" onclick="math('cos')">cos</td>
<td class="color_1" onclick="math('tan')">tan</td>
<td class="color_1" onclick="Mzero()">+/-</td>
</tr>
<tr>
<td onclick="command('7')">7</td>
<td onclick="command('8')">8</td>
<td onclick="command('9')">9</td>
<td class="color_1" onclick="caculates('÷')">÷</td>
</tr>
<tr>
<td onclick="command('4')">4</td>
<td onclick="command('5')">5</td>
<td onclick="command('6')">6</td>
<td class="color_1" onclick="caculates('x')">x</td>
</tr>
<tr>
<td onclick="command('1')">1</td>
<td onclick="command('2')">2</td>
<td onclick="command('3')">3</td>
<td class="color_1" onclick="caculates('-')">-</td>
</tr>
<tr>
<td onclick="command('0')">0</td>
<td onclick="dot()">.</td>
<td onclick="equal()">=</td>
<td class="color_1" onclick="caculates('+')">+</td>
</tr>
</table>
</div>
</div>
</body>js文件
var num1 = 0,result = 0;
var show = "";
var caculate = "";//储存运算符号
var operate = 1;//控制运算符号
var operate_t = 0;//防止在未输入数字出现运算符号
var caculate_t = 0;//判断运算状态
var quit = 1;//防止重复
var caculate_time = 0;//运算此时
var equals = -1;//判断是否进行运算获得答案
var scan = 0;//输入判断
function command(num){//输入函数
if(scan==0)
{
equals = 0;
var str = document.getElementById('content').innerHTML;
str = (str!="0")?((operate==0)? str : ""):"";
str = str + num;
document.getElementById('content').innerHTML=str;
show = show=='0'? "" : show;
show+=num;
document.getElementById('content1').innerHTML = show;
operate = 0;
operate_t = 1;
if(quit==2)
{
quit = 3;
}
}
}
function dot(){
if(operate_t==1)
{
var str = document.getElementById('content').innerHTML;
if(str.indexOf(".")==-1)
{
str +=".";
}
show = show.substr(0,show.length-str.length) + str;
document.getElementById('content').innerHTML = str;
document.getElementById('content1').innerHTML = show;
}
}
function caculates(cacu){
if((quit==1||quit==2)&&operate_t==1)//已输入两个数字后禁用运算符
{
scan = 0;
caculate = cacu;
if(caculate_time==0)//单次计算
{
if(caculate_t==0)
{
var str = document.getElementById('content').innerHTML;
num1 = parseFloat(str);
}
}
else if(caculate_time>0)//多次运算
{
var str = document.getElementById('content').innerHTML;
num1 = (str==0)? result :(parseFloat(result.toString()+str));//
}
document.getElementById('content').innerHTML = "0";
if(operate==0)//将运算符号显示在第一个显示面板中
{
show += cacu;
}
else if(operate==1)
{
show = show.substr(0,show.length-1) + cacu;
}
document.getElementById('content1').innerHTML = show;
operate = 1;
quit = 2;//表明运算式中已存在运算符
caculate_t=1;
}
}
function zero(){//置零
num1 = 0;
result = 0;
numshow = "0";
show = "";
caculate_time = 0;
operate_t = 0;
operate = 0;
caculate_t = 0;
equals = -1;
document.getElementById("content").innerHTML = "0";
document.getElementById('content1').innerHTML ="0";
}
function back(){//退格
var str = document.getElementById('content').innerHTML;
str = (str!="0")? str : "";
show = show.substr(0,(show.length-str.length));
str = str.substr(0,str.length-1);
show = (str=="0")? show :(show+str);
str = (str!="")? str : "0";
show = (show!="")? show : "0";
document.getElementById('content').innerHTML =str;
document.getElementById('content1').innerHTML = show;
}
function equal()
{
if(caculate_t == 1&&quit==3)//如果处于运算状态,且输入了两个运算数字
{
var num2 = parseFloat(document.getElementById('content').innerHTML);
console.log(num1);
console.log(num2);
switch (caculate){
case "+":result = num1 + num2; break;
case '-':result = num1 - num2; break;
case 'x':result = num1 * num2; break;
case '÷':
if(num2==0)//判断除数是否为0
{
document.getElementById('content1').innerHTML ="除数不能为0";
setTimeout(function(){zero()},1000);
return 0;
}
result = num1/num2;
break;
case '^':result = Math.pow(num1,num2); break;
}
show +="=" + result.toString();
document.getElementById('content1').innerHTML =show;
document.getElementById("content").innerHTML = "0";
quit = 1;
caculate_time+=1;
caculate_t = 0;
operate_t = 0;
equals = 1;
scan = 0;
}
}
function math(cacu)//只需一个数字的运算
{
if(operate_t==1)
{
var num = 0;
var result_1 = "";
if(caculate_time==0)
{
var str = document.getElementById('content').innerHTML;
num = parseFloat(str);
}
else
{
num = result;
result_1 = result.toString();
}
result_1 = (result_1=="")? show : result_1;
switch(cacu){
case"√":
if(num<0)
{
document.getElementById('content1').innerHTML ="被开方数不能小于0";
setTimeout(function(){zero()},1000);
return 0;
}
result = Math.sqrt(num);
document.getElementById('content1').innerHTML =result_1 + "√=" + result.toString();
break;
case"sin":result = Math.sin(num);
document.getElementById('content1').innerHTML ="sin" + result_1 + "=" + result.toString();
break;
case"cos":result = Math.cos(num);
document.getElementById('content1').innerHTML ="cos" + result_1 + "=" + result.toString();
break;
case"tan":
if(Math.cos(num)==0)//判断输入数是否有定义
{
document.getElementById('content1').innerHTML ="错误！tan在此数无定义！";
setTimeout(function(){zero()},1000);
return 0;
}
result = Math.tan(num);
document.getElementById('content1').innerHTML ="tan" + result_1 + "=" + result.toString();
break;
}
document.getElementById("content").innerHTML = "0";
caculate_time+=1;
caculate_t = 0;
quit = 1;
scan = 0;
}
}
function Mzero()//取相反数
{
if(equals==0)//判断是否有运算结果
{
var str = document.getElementById('content').innerHTML;
if(str.indexOf('-')==-1)
{
str = "-" + str;
}
else
{
str = str.substr(1,str.length);
}
document.getElementById('content').innerHTML = str;
if(caculate_t==0)
{
show = (str.indexOf('-')==-1)?str :("("+str+")");
document.getElementById('content1').innerHTML = show;
}
else
{
if(caculate_time==0)//是否进行多次运算
{
show = (str.indexOf('-')==-1)? str:(show.substr(0,show.length-str.length+1)+"("+str+")");
document.getElementById('content1').innerHTML = show;
}
}
scan = 1;
}
else if(equals==1)
{
scan = 1;
var result_s = "";
if(result.toString().indexOf('-')==-1)
{
result = parseFloat("-"+result.toString());
result_s = "-" + result.toString();
}
else
{
result_s = result.toString().substr(1,result.toString().length);
result = parseFloat(result_s);
}
document.getElementById('content1').innerHTML = result_s;
show = result_s;
caculate_t = 0;
quit = 1;
operate_t = 1;
}
}