JavaScript开发简易的计算器，实现加减乘除功能，首先我们先来看效果：
main.png
页面采用CSS3弹性盒子布局，JS采用eval()函数，只需几行代码就已完成计算器功能。
以下是源码：
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="author" content="LYQ">
<title>计算器</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<header>
<h2>我的计算器</h2>
</header>
<div class="container">
<div class="search">
<input type="text" placeholder="" class="search-input" id="input"/>
</div>
<div class="main">
<div class="main_box">
<button class="btn_sm" onclick="change(this)" value="1">1</button>
<button class="btn_sm" onclick="change(this)" value="4">4</button>
<button class="btn_sm" onclick="change(this)" value="7">7</button>
<button class="btn_sm" onclick="clear_input()">C</button>
</div>
<div class="main_box">
<button class="btn_sm" onclick="change(this)" value="2">2</button>
<button class="btn_sm" onclick="change(this)" value="5">5</button>
<button class="btn_sm" onclick="change(this)" value="8">8</button>
<button class="btn_sm" onclick="change(this)" value="0">0</button>
</div>
<div class="main_box">
<button class="btn_sm" onclick="change(this)" value="3">3</button>
<button class="btn_sm" onclick="change(this)" value="6">6</button>
<button class="btn_sm" onclick="change(this)" value="9">9</button>
<button class="btn_sm" onclick="change(this)" value=".">.</button>
</div>
<div class="main_box">
<button class="btn_sm" onclick="change(this)" value="+">+</button>
<button class="btn_sm" onclick="change(this)" value="-">-</button>
<button class="btn_sm" onclick="change(this)" value="*">*</button>
<button class="btn_sm" onclick="change(this)" value="/">/</button>
</div>
<div class="main_box">
<button class="btn_sm" onclick="del()">←</button>
<button class="btn_sm" style="height: 16rem" onclick="output()">=</button>
</div>
</div>
</div>
<footer>
<h3 class="footer_text">广告栏招商</h3>
</footer>
<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
JavaScript部分：
var input = document.getElementById('input');
function change(arg) {
//输入框为空，第一个不允许输入乘除符号。
if(input.value == "" && (arg.value == "*" || arg.value == "/")){
return false;
}
//判断后面一个是不是符号，然后不允许输入符号
if(arg.value == "%" ||arg.value == "*" || arg.value =="-" || arg.value =="/" || arg.value =="+"||arg.value ==".") {
switch(input.value.substr(input.value.length - 1, 1)) {
case '%':
return false;
break;
case '*':
return false;
break;
case '-':
return false;
break;
case '+':
return false;
break;
case '/':
return false;
break;
case '.':
return false;
break;
default:
input.value += arg.value;
}
}else{
input.value += arg.value;
}
}
function output() {
input.value = eval(input.value);
}
function clear_input() {
input.value = "";
}
function del() {
input.value = input.value.substring(0, input.value.length - 1);
}
CSS部分：
html,
body {
width: 100%;
height: 100%;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
margin: 0;
padding: 0;
font-family: "微软雅黑";
z-index: 1;
}
/*标题*/
header {
background-color: #18B4ED;
position: relative;
height: 4rem;
}
header h2 {
color: #fff;
text-align: center;
height: 4rem;
line-height: 3rem;
margin-top: 5px;
margin-bottom: 5px;
}
/*主体*/
.container {
background-color: #F2F2F2;
flex: 1;
}
/*输入框*/
.search {
background-color: #F7F7F8;
display: flex;
display: -webkit-flex;
align-items: center;
height: 4.5rem;
padding: 0.5rem;
}
.search-input {
width: 100%;
border: 0;
height: 4rem;
padding-left: 1rem;
font-size: 22px;
}
/*主体部分*/
.main {
flex-grow: 1;
display: flex;
display: -webkit-flex;
flex-direction: row;
-webkit-flex-direction:row;
align-items:center;
-webkit-align-items:center;
justify-content:center ;
padding-top: 0.5rem;
}
.main_box{
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction:column;
flex-grow: 1;
}
.btn_sm{
background-color: #0AB4F0;
color: #fff;
border: 0;
height: 5rem;
margin: 0.25rem;
}
footer{
background-color: #fff;
height: 6rem;
}
.footer_text{
text-align: center;
line-height: 6rem;
margin: 0;
}
网友评论