利用Javascript做一个简易计算器

近日在学习JavaScript，做了个简易的计算器。

可以实现基本的加减乘除功能，可以进行多元运算，有退格与清屏的按钮

计算器的主体：

其中为屏幕增加了只读功能，防止对运算的结果做其它处理。

<div class="nav">
			<div class="b1">
				<input type="text" id="sc" value="" readonly />
			</div>
			<input type="button" value="C" id="cl" onclick="cl()"/>
			<input type="button" value="BC" id="bc" onclick="backspace()" />
			<input type="button" value="+" onclick="change(this.value)" />
			<br />			
			<input type="button" value="7" onclick="change(this.value)"/>
			<input type="button" value="8" onclick="change(this.value)" />
			<input type="button" value="9" onclick="change(this.value)"/>
			<input type="button" value="-" onclick="change(this.value)"/>
			<br />
			<input type="button" value="4" onclick="change(this.value)"/>
			<input type="button" value="5" onclick="change(this.value)"/>
			<input type="button" value="6" onclick="change(this.value)"/>
			<input type="button" value="*" onclick="change(this.value)"/>
			<br />
			<input type="button" value="1" onclick="change(this.value)"/>
			<input type="button" value="2" onclick="change(this.value)"/>
			<input type="button" value="3" onclick="change(this.value)"/>
			<input type="button" value="/" onclick="change(this.value)"/>
			<br />
			<input type="button" value="." onclick="change(this.value)" />
			<input type="button" value="0" onclick="change(this.value)"/>
			<input type="button" value="=" id="eq" onclick="eq()"/>	
		</div>

格式：

        .nav{
			width: 240px;
			border: 2px solid black;
		}
		.nav .b1{
			width: 200px;
			height: 80px;
			margin: 10px auto;
		}
		.nav .b1 input{
			width: 200px;
			height: 80px;
			margin: 0px;
		}
		.nav>input{
			width: 40px;
			height: 40px;
			margin: 8px;
			background-color: #ccc;
		}

将数字与运算符放到屏幕上，需要通过id获取屏幕的value并将各个按钮的值写入到屏幕上：

//数字与运算符
			function change(op){
				 document.getElementById("sc").value=document.getElementById("sc").value+""+op;
			}

退格键：将从屏幕上获取到的字符串类型的value去掉最后一位。

//退格键
			function backspace(){
				var n = document.getElementById("sc").value;
			    document.getElementById("sc").value = n.slice(0, -1);
			}

清屏：直接将屏幕上的所有元素清除。

//一键清屏
			function cl(){
				document.getElementById("sc").value="";
			}

=：将得到的结果进行运算，其中eval是Javascript内置的一个函数，作用是计算字符串表达式。

//等于号
			function eq(){
				//eval是Javascript内置的一个函数，作用是计算字符串表达式
				var res=eval(document.getElementById("sc").value);
				document.getElementById("sc").value=res;
			}

结果：

最后，感谢您可以观看本篇文章，以后一起进步！