本文运用前端代码实现一个简单的计算器界面，并通过JS实现了基本的运算功能。（加、减、乘、除、清屏/退格、取余、取倒）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的计算器</title>
<style>
.containor{
border:1px solid black;
background-color: #fafafa;
height: 380px;
width: 296px;
margin: auto;
margin-top: 40px;
}
.top{
background-color: lightgray;
height: 30px;
}
a{
display: block;
float: left;
font-size: 8px;
height: 26px;
padding: 0 6px;
margin-left: 6px;
line-height: 26px;
}
a:hover{
background-color: dimgray;
color: white;
cursor: default;
}
.input{
width: 86%;
height:60px;
padding: 4px;
margin: 0 auto;
margin-top: 12px;
}
.input:focus{
outline: none;
}
button{
width: 50px;
height: 30px;
margin: 2px;
text-align: center;
font-size: 10px;
border: 0.5px solid gray;
}
button:hover{
border: 1px solid gray;
background-color: #ffaa55;
outline: none;
}
.bottom{
width: 100%;
height: 30px;
background-color:lightgray;
color: white;
position: relative;
margin-top: 56px;
}
</style>
</head>
<body>
<div class="containor">
<div class="top">
<a>查看（V）</a>
<a style="margin-left: 40px;">编辑（E）</a>
<a style="margin-left: 40px;">帮助（H）</a>
</div>
<div style="text-align: center">
<input id="cin" class="input">
</div>
<div style="margin-left: 2px;">
<div style="margin:20px 10px;height:160px;">
<div style="float: left;">
<div>
<button>MC</button><button>MR</button><button>MS</button><button>M+</button><button>M-</button><br>
<button>BK</button><button>CE</button><button>C</button><button >(</button><button>)</button><br>
<button>7</button><button>8</button><button>9</button><button >*</button><button>/</button><br>
<button>4</button><button>5</button><button>6</button><button >%</button><button>1/x</button><br>
</div>
<div style="float: left;">
<button>1</button><button>2</button><button>3</button><button>-</button><br>
<button style="width: 104px">0</button><button>.</button><button>+</button>
</div>
<div style="float: left;">
<button style="height: 64px;margin-top: 2px">=</button>
</div>
</div>
</div>
</div>
<div class="bottom">
</div>
</div>
</body>
</html>界面如下：
<button onclick="back1()">BK</button><button onclick="clearerr()">CE</button><button onclick="clear1()">C</button><button onclick="inputStr('(')">(</button><button onclick="inputStr(')')">)</button><br>
<button onclick="inputStr(7)">7</button><button onclick="inputStr(8)" >8</button><button onclick="inputStr(9)">9</button><button onclick="inputStr('*')">*</button><button onclick="inputStr('/')">/</button><br>
<button onclick="inputStr(4)">4</button><button onclick="inputStr(5)">5</button><button onclick="inputStr(6)">6</button><button onclick=inputStr('%')>%</button><button onclick="reciprocal()">1/x</button><br>
<button onclick="inputStr(1)">1</button><button onclick="inputStr(2)">2</button><button onclick="inputStr(3)">3</button><button onclick="inputStr('-')">-</button>
<button onclick="inputStr(0)">0</button><button onclick="inputStr('.')">.</button><button onclick="inputStr('+')">+</button>
<button onclick="equal()">=</button><script>
window.onload=function(){
// 初始化内容
var res = eval("(1+4)*2");
console.log(res);
//打印进行测试
}
</script> <input id="cin" class="input">
<script>
function inputStr(c) {
var cin = document.getElementById("cin");
var val = cin.value + c;
cin.value = val;
}
</script>function equal() {
var cin = document.getElementById("cin");
var val = cin.value;
var res = eval(val);
cin.value = res;
} function clear1() {
var cin = document.getElementById("cin");
cin.value = "";
// if(cin.value.length>0){
// document.getElementById("cin").value = "";
// }
}
function back1() {
var cin = document.getElementById("cin");
cin.value = cin.value.substr(0,cin.value.length -1);
}
function clearerr() {
var cin = document.getElementById("cin");
var val = cin.value;
var index = val.lastIndexOf("-");
if(index===-1){
index = val.lastIndexOf("+");
}
if(index===-1){
index = val.lastIndexOf("*");
}
if(index===-1){
index = val.lastIndexOf("/");
}
if(index!==-1){
val = val.substring(0,index+1);
}
cin.value = val;
}function reciprocal() {
var cin = document.getElementById("cin");
var rst = 1/cin.value;
cin.value = rst;
}目前 查看、编辑、帮助以及按钮的首行功能还未实现，可自行添加。
点我进群 一起学习交流！
QQ群：741909960