HTML CSS, JavaScript 简单计算器

这个项目是一个简单的计算器应用程序，使用HTML、CSS和JavaScript开发。它提供了基本的算术运算功能，包括加法、减法、乘法和除法。用户可以通过点击数字按钮来输入数字，点击运算符按钮进行运算，同时还提供了清除按钮用于清空显示文本框的内容。

该计算器应用程序具有简洁的界面设计，计算结果会即时显示在显示文本框中，方便用户进行快速的计算操作。通过使用JavaScript的eval函数进行表达式求值，可以处理复杂的数学计算，并将结果准确地显示给用户。

simplealculator.html

html 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML CSS, JavaScript 计算器</title>

<!-- 引入css和JavaScript -->
<link href="css/sc.css" rel="stylesheet"></link>
<script type="text/javascript" src="js/sc.js"></script>

</head>
<body>

<div class="center">
		<h1>HTML CSS, JavaScript 计算器</h1>
		<form name="calculator">
			<input type="text" id="display">
			<input type="button" id="clear" class="btn other" value="C">
				<br>
			<input type="button" class="btn number" value="7" onclick="get(this.value);">
			<input type="button" class="btn number" value="8" onclick="get(this.value);">
			<input type="button" class="btn number" value="9" onclick="get(this.value);">
			<input type="button" class="btn operator" value="+" onclick="get(this.value);">
				<br>
			<input type="button" class="btn number" value="4" onclick="get(this.value);">
			<input type="button" class="btn number" value="5" onclick="get(this.value);">
			<input type="button" class="btn number" value="6" onclick="get(this.value);">
			<input type="button" class="btn operator" value="*" onclick="get(this.value);">
				<br>
			<input type="button" class="btn number" value="1" onclick="get(this.value);">
			<input type="button" class="btn number" value="2" onclick="get(this.value);">
			<input type="button" class="btn number" value="3" onclick="get(this.value);">
			<input type="button" class="btn operator" value="-" onclick="get(this.value);">
				<br>
			<input type="button" class="btn number" value="0" onclick="get(this.value);">
			<input type="button" class="btn operator" value="." onclick="get(this.value);">
			<input type="button" class="btn operator" value="/" onclick="get(this.value);">			
			
			<input type="button" class="btn other" value="=" onclick="calculates();">
		</form>
	</div>

</body>
</html>

sc.css

css 复制代码

@charset "UTF-8";

* {
	border: none;
	font-family: 'Open Sans', sans-serif;
	margin: 0;
	padding: 0;
}
.center {
	background-color: #fff;
	border-radius: 50%;
	height: 600px;
	margin: auto;
	width: 600px;
}
h1 {
	color: #495678;
	font-size: 30px;	
	margin-top: 20px;
	padding-top: 50px;
	display: block;
	text-align: center;
	text-decoration: none;
}
form {
	background-color: #495678;
	box-shadow: 4px 4px #3d4a65;
	margin: 40px auto;
	padding: 40px 0 30px 40px;	
	width: 280px;
}
.btn {
	outline: none;
	cursor: pointer;
	font-size: 20px;
	height: 45px;
	margin: 5px 0 5px 10px;
	width: 45px;
}
.btn:first-child {
	margin: 5px 0 5px 10px;
}
.btn, #display, form {
	border-radius: 25px;
}
#display {
	outline: none;
	background-color: #98d1dc;
	box-shadow: inset 6px 6px 0px #3facc0;
	color: #dededc;
	font-size: 20px;
	height: 47px;
	text-align: right;
	width: 165px;
	padding-right: 10px;
	margin-left: 10px;
}
.number {
	background-color: #72778b;
	box-shadow: 0 5px #5f6680;
	color: #dededc;
}
.number:active {
	box-shadow: 0 2px #5f6680;
  	-webkit-transform: translateY(2px);
  	-ms-transform: translateY(2px);
  	-moz-tranform: translateY(2px);
  	transform: translateY(2px);
}
.operator {
	background-color: #dededc;
	box-shadow: 0 5px #bebebe;
	color: #72778b;
}
.operator:active {
	box-shadow: 0 2px #bebebe;
  	-webkit-transform: translateY(2px);
  	-ms-transform: translateY(2px);
  	-moz-tranform: translateY(2px);
  	transform: translateY(2px);
}
.other {
	background-color: #e3844c;
	box-shadow: 0 5px #e76a3d;
	color: #dededc;
}
.other:active {
	box-shadow: 0 2px #e76a3d;
  	-webkit-transform: translateY(2px);
  	-ms-transform: translateY(2px);
  	-moz-tranform: translateY(2px);
  	transform: translateY(2px);
}

sc.jc

javascript 复制代码

// 清除按钮点击事件，清空显示文本框的内容
document.getElementById("clear").addEventListener("click", function() {
	document.getElementById("display").value = "";
});
// 点击数字按钮事件，将按钮的值添加到显示文本框中
function get(value) {
	document.getElementById("display").value += value; 
} 
// 计算结果函数
function calculates() {
	var result = 0;
	// 获取显示文本框的值
	result = document.getElementById("display").value;
	// 清空显示文本框
	document.getElementById("display").value = "";
	// 计算结果并显示在文本框中
	document.getElementById("display").value = eval(result);
};

运行效果：