运用html+css+JavaScript写一个简易的计算器;
<div class="outbox">
<input type="text" id="input" disabled="disabled">
</div>
<div class="name">
<div>
<button onclick="addStr('+')">+</button>
<button onclick="addStr('-')">-</button>
<button onclick="addStr('*')">*</button>
<button onclick="addStr('/')">/</button>
<button onclick="clac('=')">=</button>
</div>
<div>
<button onclick="addStr('1')">1</button>
<button onclick="addStr('2')">2</button>
<button onclick="addStr('3')">3</button>
<button onclick="addStr('4')">4</button>
<button onclick="addStr('.')">.</button>
</div>
<div>
<button onclick="addStr('4')">4</button>
<button onclick="addStr('5')">5</button>
<button onclick="addStr('6')">6</button>
<button onclick="addStr('7')">7</button>
<button onclick="addStr('🐔')">🐔</button>
</div>
<div>
<button onclick="addStr('8')">8</button>
<button onclick="addStr('9')">9</button>
<button onclick="addStr('0')">0</button>
<button onclick="Clear('CE')">CE</button>
<button onclick="back('C')">C</button>
</div>
</div>
<style>
body{
width: 450px;
height: 500px;
border: 1px solid black;
margin: auto;
}
input{
width: 430px;
height: 60px;
margin-top: 10px;
margin-left: 5px;
}
button{
width: 60px;
height: 60px;
margin-top: 20px;
margin-left: 20px;
}
.name{
width: 435px;
height: 400px;
border: 1px solid black;
margin-top: 10px;
margin-left: 5px;
}
</style>
<script>
// 获取字符串
function addStr(S){
var input=document.getElementById("input");
input.value=input.value+S;
}
// 计算结果
function clac(){
var input=document.getElementById("input");
var val=eval(input.value);
input.value=val;
}
// 全部清除
function Clear(){
var input=document.getElementById("input");
input.value="";
}
// 删除
function back(){
var input= document.getElementById("input");
var str=input.value.substr(0,input.value.length-1);
input.value=str;
}
</script>