简单计算器

最新推荐文章于 2023-12-28 10:26:55 发布

MeiLi_chenai

最新推荐文章于 2023-12-28 10:26:55 发布

阅读量424

点赞数

本文链接：https://blog.csdn.net/MeiLi_chenai/article/details/53712139

版权

<!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" οnclick="shuru(7)"/></div>
				<div><input type="button" id="8" value="8" οnclick="shuru(8)"/></div>
				<div><input type="button" id="9" value="9" οnclick="shuru(9)"/></div>
				<div><input type="button" id="bot-00" value="←" οnclick=""/></div>
				<div><input type="button" id="clr" value="C" οnclick="qingKong()"/></div>
				<div><input type="button" id="4" value="4" οnclick="shuru(4)"/></div>
				<div><input type="button" id="5" value="5" οnclick="shuru(5)"/></div>
				<div><input type="button" id="6" value="6" οnclick="shuru(6)"/></div>
				<div><input type="button" id="mul" value="*" οnclick="shuru('*')"/></div>
				<div><input type="button" id="division" value="/" οnclick="shuru('/')"/></div>
				<div><input type="button" id="1" value="1" οnclick="shuru(1)"/></div>
				<div><input type="button" id="2" value="2" οnclick="shuru(2)"/></div>
				<div><input type="button" id="3" value="3" οnclick="shuru(3)"/></div>
				<div><input type="button" id="add" value="+" οnclick="shuru('+')"/></div>
				<div><input type="button" id="sub" value="-" οnclick="shuru('-')"/></div>
				<div><input type="button" id="0" value="0" οnclick="shuru(0)"/></div>
				<div><input type="button" id="00" value="00" οnclick="shuru('00')"/></div>
				<div><input type="button" id="point" value="." οnclick="shuru('.')"/></div>
				<div><input type="button" id="baifen" value="%" οnclick="shuru('%')"/></div>
				<div><input type="button" id="result" value="=" οnclick="jiSuan()"/></div>
			</div>
			<!--按键结束-->
		</div>
		<!--主框结束-->
	</body>
</html>

下面是css样式/*
 * 主框开始
 */
#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;
}

MeiLi_chenai

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单计算器

var numresult; var str; //用于输入的方法 function shuru(nums){ str = document.getElementById("disPlay"); str.value = str.value + nums; } //清空界面 function qingKong(){ do
复制链接

扫一扫