码迷,mamicode.com
首页 > Web开发 > 详细

网页版计算器

时间:2016-05-05 09:36:55      阅读:367      评论:0      收藏:0      [点我收藏+]

标签:


<!DOCTYPE html> 
<html> 
<meta name="content-type" content="text/html; charset=UTF-8"> 
<head>
<title>计算器</title> 
<link rel="stylesheet" href="css/calculator.css">
<script src="js/calculator.js"></script>

</head> 
<body> 
<table width="200" border="1px" class="table" bgColor="#E0EBEB">
<tr>          
<td colspan="5">
<div class="poto"><img src="img/计算器.png">计算器</div>
<p>
<a href="http://www.cnblogs.com/deny-66/">查看(V)</a>
<a href="http://www.cnblogs.com/deny-66/">编辑(E)</a>
<a href="http://www.cnblogs.com/deny-66/">帮助(H)</a>
</p>
</td>
</tr>
<tr>
<td colspan="5"> 
<input type="text" id="nummessege"> 
</td> 
</tr> 
<tr> 
<td> 
<input type ="button" value="MC">
</td> 
<td> 
<input type ="button" value="MR">
</td> 
<td> 
<input type ="button" value="MS">
</td> 
<td>  
<input type ="button" value="M+">
</td> 
<td> 
<input type ="button" value="M-">
</td> 
</tr> 
<tr>
<td> 
<input type ="button" value="←" id="del" onclick="numDel()">
</td>  
<td> 
<input type ="button" value="CE">
</td> 
<td> 
<input type ="button" value="C" id="empty" onclick="numEmpty()">
</td> 
<td> 
<input type ="button" value="±">
</td> 
<td> 
<input type ="button" value="√">
</td> 
</tr> 
<tr> 
<td> 
<input type ="button" value="7" id="7" onclick="onclicknum(7)">
</td> 
<td> 
<input type ="button" value="8" id="8" onclick="onclicknum(8)">
</td> 
<td> 
<input type ="button" value="9" id="9" onclick="onclicknum(9)">
</td> 
<td> 
<input type ="button" value="/" id="chu" onclick="onclicknum(‘/‘)">
</td> 
<td> 
<input type ="button" value="%" id="mo" onclick="onclicknum(‘%‘)">
</td> 
</tr> 
<tr> 
<td> 
<input type ="button" value="4" id="4" onclick="onclicknum(4)">
</td> 
<td> 
<input type ="button" value="5" id="5" onclick="onclicknum(5)">
</td> 
<td> 
<input type ="button" value="6" id="6" onclick="onclicknum(6)">
</td>
<td> 
<input type ="button" value="*" id="cheng" onclick="onclicknum(‘*‘)">
</td> 
<td> 
<input  type ="button" value="1/x">
</td>  
</tr> 
<tr> 
<td> 
<input type ="button" value="1" id="1" onclick="onclicknum(1)">
</td> 
<td> 
<input type ="button" value="2" id="2" onclick="onclicknum(2)">
</td> 
<td> 
<input type ="button" value="3" id="3" onclick="onclicknum(3)">
</td>
<td> 
<input type ="button" value="-" id="point" onclick="onclicknum(‘-‘)" >
</td> 
<td rowspan="2"> 
<input type="button" value="=" id="dengyu" 
onclick="dengyu()" 
style="height: 92px; width: 65px; font-size: 27px"></td> 
</tr> 
<tr> 
<td height="45" colspan="2"> 
<input type ="button" value="0" id="0" onclick="onclicknum(0)"
style="height: 45px; width: 135px; font-size: 27px">
</td> 
<td> 
<input type ="button" value="." id="dian" onclick="onclicknum(‘.‘)" >
</td> 
<td> 
  <input type ="button" value="+" id="jia" onclick="onclicknum(‘+‘)">
</td> 
</tr> 
</table> 
</body> 
</html> 

 body{

    height: 450px;

    width: 300px;

    margin:auto;

    position:absolute;

    top:0; left: 0; right: 0; bottom: 0;

    background-color:#BFDCAC;

}

.table{

    width:100%;

    height:400px;

}

.poto{

    margin-top:0 auto;

    margin-bottom:0 auto;

}

#nummessege{

    width: 100%;

    height: 50px;

    border-radius:7px;

    border-color:#D282D2;

    text-align:right;

}

input{

    height: 43px;

    width: 65px;

    font-size: 18px;

}

p{

    text-align:left;

    font-size:14px;

}

p a:hover{

    color:#F00;

}

p a{  

    text-decoration: none;

}

var numresult;
var str;
function onclicknum(nums){
str = document.getElementById("nummessege");
str.value = str.value + nums;
}
function numEmpty(){
str = document.getElementById("nummessege");
str.value = "";
}
function numDel(){
str = document.getElementById("nummessege");
str.value = str.value.substring(0,str.value.length-1);
}
function dengyu(){
str = document.getElementById("nummessege");
numresult = eval(str.value);
str.value = numresult;
}

 

网页版计算器

标签:

原文地址:http://www.cnblogs.com/deny-66/p/5460566.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!