您的位置：首页 > Web前端 > HTML

html简单计算器

2016-12-17 20:41 267 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/main.css"/><!--链接css-->
<script type="text/javascript">
var numresult;
var str;
//用于输入的方法
function shuru(nums){
str = document.getElementById("disPlay");
str.value = str.value + nums;
}
//清空界面
function qingKong(){
document.getElementById("disPlay").value="";
}
//计算表达式的值
function jiSuan(){
str = document.getElementById("disPlay");
numresult = eval(str.value);
//				console.log(str.value);
str.value =str.value+" = "+ numresult;
}
</script>
</head>
<body>
<!--主框-->
<div id="main">
<!--名字-->
<div class="top">
简单计算器
</div>
<!--名字结束-->
<!--输入框-->
<input type="text" id="disPlay" value=""/>
<!--输入框结束-->
<!--按键-->
<div id="bot">
<div><input type="button" id="7" value="7" onclick="shuru(7)"/></div>
<div><input type="button" id="8" value="8" onclick="shuru(8)"/></div>
<div><input type="button" id="9" value="9" onclick="shuru(9)"/></div>
<div><input type="button" id="bot-00" value="←" onclick=""/></div>
<div><input type="button" id="clr" value="C" onclick="qingKong()"/></div>
<div><input type="button" id="4" value="4" onclick="shuru(4)"/></div>
<div><input type="button" id="5" value="5" onclick="shuru(5)"/></div>
<div><input type="button" id="6" value="6" onclick="shuru(6)"/></div>
<div><input type="button" id="mul" value="*" onclick="shuru('*')"/></div>
<div><input type="button" id="division" value="/" onclick="shuru('/')"/></div>
<div><input type="button" id="1" value="1" onclick="shuru(1)"/></div>
<div><input type="button" id="2" value="2" onclick="shuru(2)"/></div>
<div><input type="button" id="3" value="3" onclick="shuru(3)"/></div>
<div><input type="button" id="add" value="+" onclick="shuru('+')"/></div>
<div><input type="button" id="sub" value="-" onclick="shuru('-')"/></div>
<div><input type="button" id="0" value="0" onclick="shuru(0)"/></div>
<div><input type="button" id="00" value="00" onclick="shuru('00')"/></div>
<div><input type="button" id="point" value="." onclick="shuru('.')"/></div>
<div><input type="button" id="baifen" value="%" onclick="shuru('%')"/></div>
<div><input type="button" id="result" value="=" onclick="jiSuan()"/></div>
</div>
<!--按键结束-->
</div>
<!--主框结束-->
</body>
</html>

/*
* 主框开始
*/
#main{
width: 250px;
height: 280px;
background: #F2F2F2;
margin: 0 auto;
border: 1px solid gainsboro;
}
/*主框结束*/
/*用来清除浏览器自带边距*/
*{
margin: 0;
padding: 0;
}
/*设置简单计算器的名字*/
#main .top{
width: 250px;
height: 40px;
line-height: 40px;
font-family: "微软雅黑";
padding-left: 16px;
font-size:15px;
}
/*设置显示区域样式*/
#main input{
margin-left: 16px;
width: 213px;
height: 30px;
border: 1px solid gainsboro;
}
/*包住所有按键的外层边框*/
#bot{
width: 213px;
height: 171px;
border: 1px solid white;
margin-left: 16px;
margin-top: 16px;
}
/*按键样式*/
#bot div{
width: 34px;
height: 34px;
float: left;
margin-left: 7px;
margin-top: 7px;
line-height: 34px;
}
#bot input{
width: 34px;
height: 34px;
background: darkgoldenrod;
margin: 0 auto;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html 简单计算器

相关文章推荐

新的分享

章节导航