我为你提供一个简单的HTML计算器代码示例，你可以在自己的电脑上创建一个HTML文件，将代码复制到文件中，然后在浏览器中打开该文件，即可在浏览器中使用计算器功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算器</title>
<style>
/* 样式表 */
.calculator {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.calculator button {
font-size: 24px;
padding: 10px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}
.calculator button:hover {
background-color: #eee;
}
.calculator button:active {
background-color: #ccc;
}
.calculator button.clear {
background-color: #f44336;
color: #fff;
border-color: #f44336;
}
.calculator button.clear:hover {
background-color: #e53935;
border-color: #e53935;
}
.calculator button.clear:active {
background-color: #c62828;
border-color: #c62828;
}
.calculator button.equal {
background-color: #4caf50;
color: #fff;
border-color: #4caf50;
grid-row: 5 / 6;
grid-column: 3 / 5;
}
.calculator button.equal:hover {
background-color: #388e3c;
border-color: #388e3c;
}
.calculator button.equal:active {
background-color: #1b5e20;
border-color: #1b5e20;
}
.calculator input {
font-size: 24px;
padding: 10px;
text-align: right;
border: none;
border-radius: 5px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="result" readonly>
<button onclick="appendValue('7')">7</button>
<button onclick="appendValue('8')">8</button>
<button onclick="appendValue('9')">9</button>
<button onclick="appendValue('/')">/</button>
<button onclick="appendValue('4')">4</button>
<button onclick="appendValue('5')">5</button>
<button onclick="appendValue('6')">6</button>
<button onclick="appendValue('*')">*</button>
<button onclick="appendValue('1')">1</button>
<button onclick="appendValue('2')">2</button>
<button onclick="appendValue('3')">3</button>
<button onclick="appendValue('-')">-</button>
<button onclick="appendValue('0')">0</button>
<button onclick="appendValue('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="appendValue('+')">+</button>
<button onclick="clearResult()" class="clear">C</button>
</div>
<script>
function appendValue(value) {
document.getElementById('result').value += value;
}
function calculate() {
var result = eval(document.getElementById('result').value);
document.getElementById('result').value = result;
}
function clearResult() {
document.getElementById('result').value = '';
}
这个html实现计算器功能代码示例中包含了一个简单的HTML计算器，它由一个包含数字、操作符和清空按钮的网格布局组成。按下数字或操作符的按钮时，将向输入框中附加该值，按下等于号按钮时，将执行计算，并将结果显示在输入框中。按下清空按钮时，将清空输入框的值。
请注意，这只是一个基本的html实现计算器功能示例代码，不包含错误处理或防范攻击的安全性能。在实际应用程序中，应考虑到这些问题并采取适当的预防措施。
评论