纯JS完成简易计算器，完整详解

        从今天开始为大家更新一些简单的JS应用实例，以下内容会尽可能的展现出全部代码和完成效果，请大家品鉴。

效果图如下：

 

HTML代码：

<div class="wrapper">
			<p><i class="iconfont icon-jisuanqi1"></i>阿拉浩版计算器
			<span>
				<i class="iconfont icon-suoxiao"></i>
				<i class="iconfont icon-fangda"></i>
				<i class="iconfont icon-guanbi"></i>
			</span>
			</p>
			<input type="text" id="text" placeholder="0"/>
			<div class="row">
				<div id="btn" onclick="gl()">C</div>
				<div id="btn" onclick="num('/')">/</div>
				<div id="btn" onclick="num('*')">*</div>
				<div id="btn" onclick="num('-')">-</div>
			</div>
			<div class="row">
				<div id="btn" onclick="num('7')">7</div>
				<div id="btn" onclick="num('8')">8</div>
				<div id="btn" onclick="num('9')">9</div>
				<div id="btn" onclick="num('+')" style="background-color:#F0F0F0 ;">+</div>
			</div>
			<div class="row">
				<div id="btn" onclick="num('4')">4</div>
				<div id="btn" onclick="num('5')">5</div>
				<div id="btn" onclick="num('6')">6</div>
				<div id="btn" onclick="num('%')" style="background-color:#F0F0F0 ;">%</div>
			</div>
			<div class="row">
				<div id="btn" onclick="num('1')">1</div>
				<div id="btn" onclick="num('2')">2</div>
				<div id="btn" onclick="num('3')">3</div>
				<div id="btn" onclick="pingfang()" style="background-color:#F0F0F0 ;">x<sup>2</sup></div>
			</div>
			<div class="row">
				<div id="btn" onclick="num('0')">0</div>
				<div id="btn" onclick="num('.')">.</div>
				<div id="btn" onclick="num('+/-')">+/-</div>
				<div id="btn" onclick="cal()" style="background-color: #8ABAE0;">=</div>
			</div>
		</div>

CSS代码：

*{
				margin: 0;
				padding: 0;
			}
			.wrapper{
				width: 400px;
				margin: 0 auto;
				border: 2px solid lightgray;
				background-color: #E6E6E6;
			}
			p{
				/* text-indent: 15px; */
				font-size: 13px;
			}
			p>i{
				display: inline-block;
				margin-right: 5px;
				margin-left: 3px;
			}
			p span {
				float: right;
			}
			p span i{
				margin-left: 10px;
				margin-right: 3px;
			}
			.wrapper input{
				width: 100%;
				height: 170px;
				border: none;
				outline: none;
				text-indent: 20px;
				box-sizing: border-box;
				font-size: 3em;
				background-color: #E6E6E6;
			}
			input::-webkit-input-placeholder{
				color: black;
			}
			.wrapper .row{
				display: flex;
				justify-content: space-around;
				align-content: center;
			}
			.wrapper .row div{
				width: 100px;
				height: 65px;
				line-height:65px ;
				border: 1px solid lightgray;
				margin: 3px;
				font-size: 18px;
				text-align: center;
				background-color: #FAFAFA;
			}
			.wrapper .row:nth-of-type(1) div{
				background-color:#F0F0F0 ;
			}

JS代码：

<script type="text/javascript">
			var number=document.querySelector("#btn");
			var _input = document.querySelector("#text");
			function num(a){
				_input.value += a;
			}
			function gl(){
				_input.value=" ";
			}
			function cal(){
				var sum = eval(_input.value);
				_input.value = sum;
			}
			function pingfang(){
				_input.value=_input.value*_input.value;
			}
</script>

以后就是本次案例的内容了，希望私底下可以好好练习！