【html】【js】一个简单的计算器_html document.getelementbyld.value-优快云博客

本文介绍了一个简单的网页计算器实现方法，使用HTML、CSS和JavaScript构建。该计算器支持基本的数学运算，如加、减、乘、除，并能处理包含括号的复杂表达式。

写一个简单的网页计算器

很粗略，也没有精简，大部分代码都是重复的，功能只有加减乘除，以输入表达式的方式计算

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>普通计算器pro</title>
		<script type="text/javascript">
			function func0(){
				strNum = ""
				document.getElementById("输入").value = strNum
				result = ""
				document.getElementById("输出").value = result
			}
			
			function func1(){
				strNum = strNum + "1"
				document.getElementById("输入").value = strNum
			}
			
			function func2(){
				strNum = strNum + "2"
				document.getElementById("输入").value = strNum
			}
			
			function func3(){
				strNum = strNum + "3"
				document.getElementById("输入").value = strNum
			}
			
			function func4(){
				strNum = strNum + "4"
				document.getElementById("输入").value = strNum
			}
			
			function func5(){
				strNum = strNum + "5"
				document.getElementById("输入").value = strNum
			}
			
			function func6(){
				strNum = strNum + "6"
				document.getElementById("输入").value = strNum
			}
			
			function func7(){
				strNum = strNum + "7"
				document.getElementById("输入").value = strNum
			}
			
			function func8(){
				strNum = strNum + "8"
				document.getElementById("输入").value = strNum
			}
			
			function func9(){
				strNum = strNum + "9"
				document.getElementById("输入").value = strNum
			}
			
			function func10(){
				strNum = strNum + "10"
				document.getElementById("输入").value = strNum
			}
			
			function func11(){
				strNum = strNum + "."
				document.getElementById("输入").value = strNum
			}
			
			function func12(){
				strNum = strNum + "+"
				document.getElementById("输入").value = strNum
			}
			
			function func13(){
				strNum = strNum + "-"
				document.getElementById("输入").value = strNum
			}
			
			function func14(){
				strNum = strNum + "*"
				document.getElementById("输入").value = strNum
			}
			
			function func15(){
				strNum = strNum + "/"
				document.getElementById("输入").value = strNum
			}
			
			function func16(){
				strNum = strNum + "("
				document.getElementById("输入").value = strNum
			}
			
			function func17(){
				strNum = strNum + ")"
				document.getElementById("输入").value = strNum
			}
			
			function func18(){
				strNum = strNum.substring(0, strNum.length - 1)
				document.getElementById("输入").value = strNum
			}
			
			function func19(){
				document.getElementById("输入").value = strNum
				try{
					result = eval(strNum)
				}
				catch(err){
					alert("表达式有误")
					strNum = ""
					document.getElementById("输入").value = strNum
					result = ""
					document.getElementById("输出").value = result
				}
				document.getElementById("输出").value = result
				strNum = ""
				document.getElementById("输入").value = strNum
			}
		</script>
		<style type="text/css">
			body{
				margin: 0px;
				padding: 0px;
				border: 0px;
			}
			
			div{
				width: 600px;
				height: 490px;
				margin: 6% auto;
				border: 0px;


			}
			
			input{
				width: 150px;
				height: 70px;
				border: 0px;
				outline: none;
				font-size: x-large;
			}
			
			input:hover{
				background-color: deepskyblue;
				transition-delay: 0.2s;
			}
			
			#输入{
				width: 600px;
				height: 70px;
				background-color: aqua;
				text-align: right;
				font-size: xx-large;
			}
			
			#输出{
				width: 600px;
				height: 70px;
				background-color: aqua;
				text-align: right;
				font-size: xx-large;
			}


		</style>
	</head>
	<body onload="func0()">
		<div>
			<input type="text" id="输入" />
			<input type="text" id="输出" />
			<input type="button" value="1" onclick="func1()"/><input type="button" value="2" onclick="func2()"/><input type="button" value="3" onclick="func3()"/><input type="button" value="cls" onclick="func0()"/>
			<input type="button" value="4" onclick="func4()"/><input type="button" value="5" onclick="func5()"/><input type="button" value="6" onclick="func6()"/><input type="button" value="+" onclick="func12()"/>
			<input type="button" value="7" onclick="func7()"/><input type="button" value="8" onclick="func8()"/><input type="button" value="9" onclick="func9()"/><input type="button" value="-" onclick="func13()"/>
			<input type="button" value="." onclick="func11()"/><input type="button" value="0" onclick="func10()"/><input type="button" value="*" onclick="func14()"/><input type="button" value="/" onclick="func15()"/>
			<input type="button" value="(" onclick="func16()"/><input type="button" value=")" onclick="func17()"/><input type="button" value="del" onclick="func18()"/><input type="button" value="=" onclick="func19()"/>
		</div>
	</body>
</html>