计算器外形以苹果手机自带计算器(以下为参考标准)
以此做参照进行css 的编写,在完成之后为了添加功能,在按键与输出框之间加上了类似导航栏的三角函数计算、记忆功能、对数函数计算等。
以下为源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<style type="text/css">
.dropbtn {
background-color: #333333;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
}
/* 容器 <div> - 需要定位下拉内容 */
.dropdown {
position: relative;
display: inline-block;
float: bottom;
}
/* 下拉内容 (默认隐藏) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* 下拉菜单的链接 */
/* 鼠标移上去后修改下拉菜单链接颜色 */
.dropdown-content input:hover {background-color: #333333}
/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {
display: block;
}
/* 当下拉内容显示后修改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
background-color: black;
}
input{
float: left;
height: 70px;
width: 70px;
border-radius: 100px;
font-size: 25px;
margin: 15px;
}
input.num{
color:white;
background-color: #333333;
}
input.calculate{
color:white;
background-color: orange;
}
input.funcs{
background-color: #999999;
}
div.look{
position:absolute;top:20px;padding:20px;width: 400px; height: 800px;background-color: #222222;border-radius: 40px;
}
input.data1{
width: 400px;
height:200px;
background-color: #222222;
border:none;
float:left;
color:white;
float: bottom;
text-align: right;
font-size: 30px;
}
</style>
<script language="JavaScript">
var number = 0;
var remember = null;
function calc(number) {
if(number == "%"){
document.getElementById('data').value = Math.round(document.getElementById('data').value)/100;
}
else{
document.getElementById('data').value += document.getElementById(number).value;
}
}
function eva() {
document.getElementById('data').value = eval(document.getElementById('data').value);
}
function clearNum() {
document.getElementById('data').value = null;
document.getElementById('data').focus();
}
function tuiGe() {
var arr = document.getElementById("data");
arr.value = arr.value.substring(0,arr.value.length-1);
}
function ex() {
document.getElementById('data').value = -document.getElementById('data').value;
}
function log2x() {
document.getElementById('data').value = Math.log2(document.getElementById('data').value);
}
function log10x() {
document.getElementById('data').value = Math.log10(document.getElementById('data').value);
}
function tan() {
document.getElementById('data').value = Math.tan(document.getElementById('data').value);
}
function sin() {
document.getElementById('data').value = Math.sin(document.getElementById('data').value);
}
function cos() {
document.getElementById('data').value = Math.cos(document.getElementById('data').value);
}
function ln() {
document.getElementById('data').value = Math.log(document.getElementById('data').value);
}
function m1() {
remember = document.getElementById('data').value;
window.alert("记录成功!");
}
function m2() {
document.getElementById('data').value = remember;
}
function m3() {
remember = null;
}
function zhi2() {
document.getElementById('data').value = Math.pow(document.getElementById('data').value,2);
}
function zhi3() {
document.getElementById('data').value = Math.pow(document.getElementById('data').value,3);
}
function zhi05() {
document.getElementById('data').value = Math.pow(document.getElementById('data').value,0.5);
}
</script>
</head>
<body>
<div class="look">
<div class="shuru">
<input type="text" class="data1" id="data"></input>
</div>
<div class="dropdown">
<button class="dropbtn">△</button>
<div class="dropdown-content">
<input type="button" class="calculate" value="tan" onclick="tan()">
<input type="button" class="calculate" value="sin" onclick="sin()">
<input type="button" class="calculate" value="cos" onclick="cos()">
</div>
</div>
<div class="dropdown">
<button class="dropbtn">lg</button>
<div class="dropdown-content">
<input type="button" class="calculate" value="log2" onclick="log2x()">
<input type="button" class="calculate" value="log10" style="font-size: 15px" onclick="log10x()">
<input type="button" class="calculate" value="ln" onclick="ln()">
</div>
</div>
<div class="dropdown">
<button class="dropbtn">#</button>
<div class="dropdown-content">
<input type="button" class="calculate" value="(" id="(" onclick="calc(this.id)">
<input type="button" class="calculate" value=")" id=")" onclick="calc(this.id)">
<input type="button" class="calculate" value="+/-" onclick="ex()">
</div>
</div>
<div class="dropdown">
<button class="dropbtn">指数</button>
<div class="dropdown-content">
<input type="button" class="calculate" value="2次" onclick="zhi2()">
<input type="button" class="calculate" value="√" onclick="zhi05()">
<input type="button" class="calculate" value="3次" onclick="zhi3()">
</div>
</div>
<div class="dropdown">
<button class="dropbtn">M</button>
<div class="dropdown-content">
<input type="button" class="calculate" value="M+" onclick="m1()">
<input type="button" class="calculate" value="Mr" onclick="m2()">
<input type="button" class="calculate" value="MC" onclick="m3()">
</div>
</div>
<div id="keys" >
<input type="button" id="AC" class="funcs" value="AC" onclick="clearNum()"></input>
<input type="button" id="tui" class="funcs" value="←" onclick="tuiGe()"></input>
<input type="button" class="funcs" value="%" id="%" onclick="calc(this.id)"></input>
<input type="button" class="calculate" value="/" id="/" onclick="calc(this.id)" style="font-size: 30px"></input>
<input type="button" class="num" value="7" id="7" onclick="calc(this.id)"></input>
<input type="button" class="num" value="8" id="8" onclick="calc(this.id)"></input>
<input type="button" class="num" value="9" id="9" onclick="calc(this.id)"></input>
<input type="button" class="calculate" value="*" id="*" onclick="calc(this.id)" style="font-size: 30px"></input>
<input type="button" class="num" value="4" id="4" onclick="calc(this.id)"></input>
<input type="button" class="num" value="5" id="5" onclick="calc(this.id)"></input>
<input type="button" class="num" value="6" id="6" onclick="calc(this.id)"></input>
<input type="button" class="calculate" value="-" id="-" onclick="calc(this.id)" style="font-size: 30px"></input>
<input type="button" class="num" value="1" id="1" onclick="calc(this.id)"></input>
<input type="button" class="num" value="2" id="2" onclick="calc(this.id)"></input>
<input type="button" class="num" value="3" id="3" onclick="calc(this.id)"></input>
<input type="button" class="calculate" value="+" id="+" onclick="calc(this.id)" style="font-size: 30px"></input>
<input type="button" class="num" value="0" id="0" onclick="calc(this.id)" style="width: 170px"></input>
<input type="button" class="num" value="." id="." onclick="calc(this.id)"></input>
<input type="button" class="calculate" value="=" id="eva" onclick="eva()"></input>
</div>
</div>
</div>
</body>
</html>
实现效果: