制作一个计算器
功能:简单的运算
html构建
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算器制作</title>
<link rel="stylesheet" href="01.jisuanjicss.css"; />
<script src="03.jisuanji js.js"></script>
</head>
<body>
<center>
<table>
<tr>
<td colspan="4">
<img src="imgs/tubiao.PNG">
计算器
<span>
<input type="button" value="-" />
<input type="button" value="□" />
<input type="button" value="x" onclick="closeapp()"; />
</span>
</td>
</tr>
<tr>
<td colspan="4">
<a href="#">查看</a>
<a href="#">编辑</a>
<a href="#">帮助</a>
</td>
</tr>
<tr>
<td colspan="4"> <input id="inp" type="text" value="0" readonly="readonly"/> </td>
</tr>
<tr>
<td><input class="inp" type="button" value="1" onclick="Input('1')"; /></td>
<td><input class="inp" type="button" value="2" onclick="Input('2')"; /></td>
<td><input class="inp" type="button" value="3" onclick="Input('3')";/></td>
<td><input class="inp" type="button" id="op" value="+" onclick="getop('+')";/></td>
</tr>
<tr>
<td> <input class="inp" type="button" value="4" onclick="Input('4')";/> </td>
<td> <input class="inp" type="button" value="5" onclick="Input('5')";/> </td>
<td> <input class="inp" type="button" value="6" onclick="Input('6')";/> </td>
<td> <input class="inp" type="button" id="op" value="-" onclick="getop('-')";/> </td>
</tr>
<tr>
<td> <input class="inp" type="button" value="7" onclick="Input('7')";/> </td>
<td> <input class="inp" type="button" value="8" onclick="Input('8')";/> </td>
<td> <input class="inp" type="button" value="9" onclick="Input('9')";/> </td>
<td> <input class="inp" type="button" id="op" value="*" onclick="getop('*')";/> </td>
</tr>
<tr>
<td> <input class="inp" type="button" value="0" onclick="Input('0')";/> </td>
<td> <input class="inp" type="button" id="src" value="C" onclick="clearnum()"/> </td>
<td> <input class="inp" type="button" id="src" value="/" onclick="getop('/')";/> </td>
<td> <input class="inp" type="button" id="op" value="=" onclick="getres()";/> </td>
</tr>
</table>
</center>
</body>
</html>
css修饰
div{
width: 300px;
height: 300px;
text-align: center;
}
table{
width: 280px;
height: 320px;
background-color: pink;
border: 5px solid red
}
span{
float: right;
}
a{
font-size: 15px;
color: black;
text-decoration: none;
}
#inp{
width: 260px;
height: 40px;
font-size: 30px;
text-align: right;
}
.inp{
width: 60px;
height: 50px;
font-size:30px;
}
#op{
color: blue;
}
#src{
color: red;
java script 实现功能
var num1=0; //保存第一个运算数字的变量
var num2=0; //保存第二个运算数字的变量
var oper=null; //保存运算符号的变量
function closeapp(){
var flag=window.confirm("确定要关闭吗");
if(flag){
//关闭页面
}
window.close();
}
//输入数字
function Input(num){
//得到文本框对象
var insptextobj=document.getElementById("inp");
//得到文本框中的数据值
var textvalue=insptextobj.value;
//判断文本框中的数据值是否为0
if( textvalue=="0"){
//输入的数字传给了文本框
insptextobj.value=num;
}else{
//注意:从文本框中得到的是字符串
insptextobj.value=textvalue+num;
}
}
//得到运算符号
function getop(op){
//得到文本框中的运算数字,并转换成数字类型保存
var insptextobj=document.getElementById("inp");
var textvalue=insptextobj.value;
num1=textvalue*1
//将文本框中的数字值置为0,方便输入下一个运算数字
insptextobj.value="0";
//保存运算符号
oper=op;
}
//得到计算结果
function getres(){
//得到文本框中的运算数字,并转换成数字类型保存
var insptextobj=document.getElementById("inp");
var textvalue=insptextobj.value;
num2=textvalue*1
//判断运算符号,计算结果保存
var res=0; //保存计算结果的变量
//判断输入的运算符
switch(oper){
case"+":res=num1+num2;break;
case"-":res=num1-num2;break;
case"*":res=num1*num2;break;
case"/":if(num2==0){
alert("除数不能为0,请重新输入")
insptextobj.value="0";
}else{
res=num1/num2;
}
break;
}
//将计算结果设置到文本框中
insptextobj.value=res;
}
//清除
function clearnum(){
var insptextobj=document.getElementById("inp");
insptextobj.value="0";
num1=0;
oper=null;
num2=0;
}