简易计算器实现,练手的代码
- html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="cal.js"></script>
<link type="text/css" rel="stylesheet" href="cal.css">
</head>
<body>
<div id="cal" onclick="f(event)" >
<span id="screen"></span>
<input type="button" value="C">
<input type="button" value="7">
<input type="button" value="8">
<input type="button" value="9">
<input type="button" value="+">
<input type="button" value="4">
<input type="button" value="5">
<input type="button" value="6">
<input type="button" value="-">
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="*">
<input type="button" value="0">
<input type="button" value=".">
<input type="button" value="=">
<input type="button" value="/">
</div>
</body>
</html>
- css部分:
@charset "UTF-8";
*{
font-family: 微软雅黑 Light;
margin:0;
padding:0;
}
#cal{
width:300px;
height:350px;
margin:100px auto;
border:4px solid #808080;
border-radius: 4px;
}
span{
display:block;
float:left;
border:2px solid #808080;
border-radius: 2px;
width:200px;
height:46px;
line-height:46px;
margin:10px 10px;
/* 若算式溢出屏幕,自动添加滚轮效果 */
overflow: auto;
}
input{
width:50px;
height:50px;
margin:10px 10px;
border:1px solid #808080;
border-radius: 2px;
background-color: #f0f0f0;
}
- JS部分:
function f(event){
var btn = event.target;
if($(btn).prop('nodeName') !='INPUT'){
return;
}
var num = $(btn).val();
var formula = $('#screen').html();
if(num == 'C'){
$('#screen').html('');
}else if(num == '='){
var result = eval(formula);
$('#screen').html(formula+'='+result);
}else{
formula += num;
$('#screen').html(formula);
}
}
- 效果图: