calc onlnine (1) - 芒果文档

📌 相关文章

📜 calc onlnine (1)

📅 最后修改于: 2023-12-03 15:29:56.019000 🧑 作者: Mango

在线计算器 Calc Online

Calc Online 是一款基于 Web 的计算器，用户可以使用任何设备和操作系统访问它。它使用了最新的前端技术来提供用户友好的界面和准确的计算结果。

特点

即时计算：用户在输入数据后，Calc Online 将立即计算并输出结果。
历史记录：Calc Online 会保存用户的计算历史记录，用户可以在任何时间查看以前的计算结果。
常用计算器功能：Calc Online 支持常见的计算器操作，如加、减、乘、除、百分比、括号等。
可自定义设计：用户可以选择不同的主题，并且可以自定义颜色和其他样式。

代码片段

<!DOCTYPE html>
<html>
<head>
	<title>Calc Online</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div id="calc">
		<div id="display"></div>
		<div class="row">
			<button class="clear">C</button>
			<button class="backspace">←</button>
			<button class="percent">%</button>
			<button class="divide">÷</button>
		</div>
		<div class="row">
			<button class="number">7</button>
			<button class="number">8</button>
			<button class="number">9</button>
			<button class="multiply">×</button>
		</div>
		<div class="row">
			<button class="number">4</button>
			<button class="number">5</button>
			<button class="number">6</button>
			<button class="minus">−</button>
		</div>
		<div class="row">
			<button class="number">1</button>
			<button class="number">2</button>
			<button class="number">3</button>
			<button class="plus">+</button>
		</div>
		<div class="row">
			<button class="number zero">0</button>
			<button class="dot">.</button>
			<button class="equal">=</button>
		</div>
	</div>
	<script src="script.js"></script>
</body>
</html>

#calc {
	border-radius: 5px;
	padding: 10px;
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3);
	background-color: white;
}

#display {
	font-size: 24px;
	padding: 10px 15px;
	border: none;
	border-radius: 5px;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.row {
	display: flex;
}

button {
	font-size: 24px;
	width: 60px;
	height: 60px;
	border-radius: 5px;
	margin: 5px;
	background-color: #e0e0e0;
	border: none;
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	outline: none;
	color: black;
}

.clear {
	background-color: #ff8a80;
	color: white;
}

.plus,
.minus,
.multiply,
.divide,
.equal {
    background-color: #f5bb00;
    color: white;
}

.dot,
.percent {
    background-color: #bdbdbd;
}

const display = document.querySelector('#display');
const buttons = document.querySelectorAll('button');
let input = '';
let result = '';

buttons.forEach(button => {
	button.addEventListener('click', () => {
		if (button.className === 'clear') {
			input = '';
			result = '';
			updateDisplay();
		} else if (button.className === 'backspace') {
			backspace();
			updateDisplay();
		} else if (button.className === 'equal') {
			calculate();
			if (result !== '') {
				updateDisplay();
			}
		} else if (button.className === 'number') {
			input += button.textContent;
			updateDisplay();
		} else if (button.className === 'dot') {
			if (input.indexOf('.') === -1) {
				if (input === '') {
					input += '0.';
				} else {
					input += '.';
				}
				updateDisplay();
			}
		} else {
			if (button.className === 'percent') {
				input += '/100';
			} else if (button.className === 'plus') {
				input += '+';
			} else if (button.className === 'minus') {
				input += '-';
			} else if (button.className === 'multiply') {
				input += '*';
			} else if (button.className === 'divide') {
				input += '/';
			}
			updateDisplay();
		}
	});
});

function updateDisplay() {
	display.textContent = input + result;
}

function backspace() {
	if (result !== '') {
		result = '';
	} else {
		input = input.slice(0, -1);
	}
}

function calculate() {
	try {
		result = eval(input);
	} catch (err) {
		result = 'Error';
	}
	input = '';
}

视频演示

请点击这里查看 Calc Online 的视频演示。