html+css+js实现简易计算器

最新推荐文章于 2023-04-14 19:55:48 发布

皮皮小谢

最新推荐文章于 2023-04-14 19:55:48 发布

阅读量234

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/m0_57114001/article/details/122022492

版权

效果：

虽然还有一点bug，但问题不大

代码分享：html部分

	<body>
		<div class="box">
			<div class="title">小谢计算器</div>
			<hr class="hr1">
			<div class="xsq">
				<input type="text" id="xsq" value="" disabled="disabled" />
			</div>
			<div class="nubList">
				<div class="nubBox" onclick="getnub('1')">1</div>
				<div class="nubBox" onclick="getnub('2')">2</div>
				<div class="nubBox" onclick="getnub('3')">3</div>
				<div class="nubBox C" onclick="qingchu()">清除</div>
				<div class="nubBox AC" onclick="tuige()">退格</div> 
			</div>
			<div class="nubList">
				<div class="nubBox" onclick="getnub('4')">4</div>
				<div class="nubBox" onclick="getnub('5')">5</div>
				<div class="nubBox" onclick="getnub('6')">6</div>
				<div class="nubBox suanfa" onclick="getyuns('+')">+</div>
				<div class="nubBox suanfa" onclick="getyuns('-')">-</div>
			</div>
			<div class="nubList">
				<div class="nubBox" onclick="getnub('7')">7</div>
				<div class="nubBox" onclick="getnub('8')">8</div>
				<div class="nubBox" onclick="getnub('9')">9</div>
				<div class="nubBox suanfa" onclick="getyuns('*')">*</div>
				<div class="nubBox suanfa" onclick="getyuns('/')">/</div>
			</div>
			<div class="nubList">
				<div class="nubBox" onclick="getnub('0')">0</div>
				<div class="nubBox" onclick="getnub('00')">00</div>
				<div class="nubBox suanfa" onclick="getnub('.')">.</div>
				<div class="nubBox suanfa" onclick="getyuns('%')">%</div>
				<div class="nubBox dengyu" onclick="yunsuan()">=</div>
			</div>
			<hr class="hr2">
		</div>
	</body>

代码分享：css部分

		<style type="text/css">
			*{
				margin: 0;				/* 内边距为0 */
				padding: 0;				/* 外边距为0 */
			}
			.box{
				width: 360px;
				height: 378px;
				margin: 40px auto;		/* 内边距上下为0，左右居中 */
				border-radius: 5px;		/* 圆角 5 像素 */
				background: #9ED2E7;	/* 背景颜色 */
				box-shadow: 3px 5px 0 #649CAE,3px 5px 20px #000000;		
                                        /* 投影：左右漂移3px,下5px，扩展为0 */
			}
			.title{
				text-align: center;		/* 字体居中 */
				color: #FFFFFF;			/* 颜色 白*/
				font-size: 25px;		/* 字体大小24px */
				font-weight: bold;		/* 字体加粗 */
			}
			.hr1{
				width: 320px;			/* 横线长度 */
				margin: 0 auto;			/* 居中 */
			}
			.xsq{
				width: 300px;			/* 显示器宽 */
				height: 45px;			/* 显示器高 */
				background: #7AA8B8;	/* 显示器背景颜色 */
				box-shadow: 0 -5px 0 #63869A;	/* 显示器投影颜色 */
				margin: 0 auto;			/* 居中 */
				margin-top: 10px;	
				border-radius: 5px;		/* 圆角 */
			}
			.xsq>input{
				width: 100%;
				height: 100%;
				background: none;
				border: none;
				font-size: 24px;
				color: #fff;
				padding-left: 5px;
				font-weight: bold;
				text-shadow: 3px 3px 0 #63869A;
			}
			.nubBox{
				width: 60px;
				height: 40px;
				background: #fff;
				border-radius: 5px;
				box-shadow: 0 5px 0 #63869A;
				font-size: 24px;
				text-align: center;
				line-height: 40px;			
				font-weight: bold;			/* 字体加粗 */
				cursor: pointer;			/* 显示小手 */
			}
			.nubList{
				display: flex;
				justify-content: space-between;
				width: 320px;
				margin: 0 auto;
				margin-top: 15px;
			}
			.hr2{
				width: 100px;
				height: 3px;
				margin: 0 auto;
				margin-top: 30px;
			}
			.suanfa{
				background: #82b1ca;
				box-shadow: 0 5px 0 #63869A;
			}
			.C{
				background:#ff5500 ;
				box-shadow: 0 5px 0 #d64700;
			}
			.AC{
				background: #00FFFF;
				box-shadow: 0 5px 0 #00b6b6;
			}
			.dengyu{
				background: #aa5500;
				box-shadow: 0 5px 0 #874300;
			}
		</style>

代码分享：js部分

<script type="text/javascript">
	var yunsuanf = ''	
	
	// 获取点击按钮的值
	function getnub(a){
		$("#xsq").val($("#xsq").val()+a);
		
		yunsuanf = '';
	
	}
	// 运算
	function yunsuan(){
		var str =eval($("#xsq").val());
		$("#xsq").val(str);
	}
	// 清除
	function qingchu(){
		$("#xsq").val(" ");
	}
	// 退格
	function tuige(){
		// substring(开始坐标，结束坐标)  截取字符串
		// 获取显示器内容
		// length 获取数据长度
		var a = $("#xsq").val();		
		var b = a.substring(0,a.length-1);
		$("#xsq").val(b);
	}
	//获取运算符
	function getyuns(a){
		if(yunsuanf == ''){
			$("#xsq").val($("#xsq").val()+a);
			yunsuanf = a;
		}
		else{
			tuige();
			$("#xsq").val($("#xsq").val()+a);
			yunsuanf = a;
		} 
		
	}
</script>

皮皮小谢

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
html+css+js实现简易计算器

效果：代码分享：html部分 <body> <div class="box"> <div class="title">小谢计算器</div> <hr class="hr1"> <div class="xsq"> <input type="text" id="xsq" value="" disabled="disabled" /> </div> <d..
复制链接

扫一扫