先来看一下效果图
样式随意，本人是新手，有些地方可能不太完善，写下这个随笔，方便自己以后参考
html代码：
<html>
<head lang="en">
<meta charset="UTF-8">
<title>在线计算器</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.whole{
width: 330px;
height: 390px;
background-color: paleturquoise;
margin: 0px auto;
padding-left: 20px;
}
h4{
padding: 20px 0px;
}
input{
width: 310px;
height: 40px;
}
#content{
border: 1px solid white;
width: 310px;
height: 250px;
margin-top: 20px;
background-color: paleturquoise ;
}
ul{
list-style-type: none;
width: auto;
height: 50px;
margin-top: 10px;
}
li{
float: left;
width: 50px;
height: 50px;
background-color: darkturquoise ;
margin-left: 10px;
text-align: center;
line-height: 50px;
cursor: pointer;
}
</style>
<script src="js.js"></script>
</head>
<body>
<div class="whole">
<h4>简单计算器</h4>
<input type="text" value="" id="text">
<div id="content">
<ul>
<li>7</li>
<li>8</li>
<li>9</li>
<li id="back">←</li>
<li id="clear">C</li>
</ul>
<ul>
<li>4</li>
<li>5</li>
<li>6</li>
<li>*</li>
<li>/</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>+</li>
<li>-</li>
</ul>
<ul>
<li>0</li>
<li>00</li>
<li>.</li>
<li>%</li>
<li id="btn">=</li>
</ul>
</div>
</div>
</body>
</html>
js代码：
window.onload = function () {
var li = document.getElementsByTagName("li");
var text = document.getElementById("text");
for(var i = 0;i < li.length;i++){
li[i].onclick = function(){
text.value =text.value + this.innerHTML;//获取li的值
}
}
var btn = document.getElementById("btn");
btn.onclick = function(){
text.value = eval(text.value);
}
var clear = document.getElementById("clear");
clear.onclick = function(){
text.value = null;
}
var back = document.getElementById("back");
back.onclick = function(){
text.value = text.value.substring(0, text.value.length - 1);
}
}
