js计算器

最新推荐文章于 2025-09-05 11:22:47 发布

转载最新推荐文章于 2025-09-05 11:22:47 发布 · 54 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zzgyq/p/6513237.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用HTML、CSS和JavaScript实现的简易网页版计算器。该计算器具备基本的数学运算功能，包括加减乘除等，并提供了清除和计算结果显示功能。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body,html{
width: 100%;
height: 100%;
font-size: 14px;
font-family: "微软雅黑";
}
#box{
width: 260px;
margin: 100px auto;
}
#box #top{
height: 50px;
border: 1px solid #666666;
}
ul{
float: left;
}
ul li{
float: left;
list-style: none;
width: 50px;
height: 50px;
background: #CCCCCC;
color: #fff;
text-align: center;
line-height: 50px;
border: 1px solid #008000;
}
ul #li1{
width: 50px;
height: 102px;
}
ul #li2{
width: 102px;
height: 50px;
}
#list{
margin-top: -52px;
}
</style>
</head>
<body>
<div id="jisuanji">
<div id="box">
<div id="top">

</div>
<ul>
<li>7</li>
<li>8</li>
<li>9</li>
<li>/</li>
<li>%</li>
</ul>
<ul>
<li>4</li>
<li>5</li>
<li>6</li>
<li>*</li>
<li id="li3">C</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>-</li>
<li id="li1">=</li>
</ul>
<div style="clear: both;"></div>
<ul id="list">
<li id="li2">0</li>
<li>.</li>
<li>+</li>
</ul>
</div>
<script type="text/javascript">
var otext = document.getElementById("top");
var oLi = document.getElementsByTagName('li');
var li1 = document.getElementById("li1");
var li3 = document.getElementById("li3");
for (var i=0;i<oLi.length;i++) {
oLi[i].onclick = function(){
otext.innerHTML += this.innerHTML;
}
}
li1.onclick = function(){
otext.innerHTML = eval(otext.innerHTML )
}
li3.onclick = function(){
otext.innerHTML ='';
}
</script>
</div>
</body>
</html>