📅 最后修改于: 2023-12-03 15:23:52.410000 🧑 作者: Mango
HTML5 已成为编写 Web 应用程序的标准之一，并且可以用于编写计算机程序。在本文中，我们将介绍如何使用 HTML5 编写计算机程序，并提供示例输出。
在开始编写 HTML5 程序之前，您应该掌握以下基本概念：
现在，我们将使用 HTML5、CSS 和 JavaScript 编写一个简单的计算器程序，该程序可以执行加、减、乘、除运算。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单计算器</title>
<style>
body {
font-family: Arial;
font-size: 14px;
}
.calculator {
width: 200px;
}
.calculator input[type=text] {
display: block;
margin-bottom: 10px;
width: 100%;
height: 40px;
font-size: 20px;
line-height: 40px;
padding: 0 10px;
text-align: right;
box-sizing: border-box;
border: none;
background-color: #eee;
}
.calculator button {
width: 50%;
height: 40px;
font-size: 18px;
line-height: 40px;
margin-right: 0;
margin-bottom: 5px;
text-align: center;
box-sizing: border-box;
border: none;
background-color: #99CCFF;
}
.calculator button:last-child {
margin-right: 0;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="result" disabled>
<button onclick="add()">+</button>
<button onclick="sub()">-</button>
<button onclick="mul()">*</button>
<button onclick="div()">/</button>
<button onclick="reset()">C</button>
<button onclick="calculate()">=</button>
<button onclick="num(1)">1</button>
<button onclick="num(2)">2</button>
<button onclick="num(3)">3</button>
<button onclick="num(4)">4</button>
<button onclick="num(5)">5</button>
<button onclick="num(6)">6</button>
<button onclick="num(7)">7</button>
<button onclick="num(8)">8</button>
<button onclick="num(9)">9</button>
<button onclick="num(0)">0</button>
</div>
<script>
var num1 = '',
num2 = '',
operator = '',
result = '',
input = document.getElementById('result');
function num(num) {
if (operator) {
num2 += num.toString();
input.value = num2;
} else {
num1 += num.toString();
input.value = num1;
}
}
function add() {
operator = '+';
}
function sub() {
operator = '-';
}
function mul() {
operator = '*';
}
function div() {
operator = '/';
}
function reset() {
num1 = '';
num2 = '';
operator = '';
result = '';
input.value = '0';
}
function calculate() {
if (!num1 || !num2 || !operator) {
return;
}
switch (operator) {
case '+':
result = parseInt(num1) + parseInt(num2);
break;
case '-':
result = parseInt(num1) - parseInt(num2);
break;
case '*':
result = parseInt(num1) * parseInt(num2);
break;
case '/':
result = parseInt(num1) / parseInt(num2);
break;
default:
return;
}
input.value = result.toString();
num1 = result.toString();
num2 = '';
operator = '';
result = '';
}
</script>
</body>
</html>
这是一个简单的计算器程序，它使用 HTML5 元素和 CSS 样式布局，使用 JavaScript 编写计算逻辑。您可以将此程序保存为 HTML 文件并在浏览器中运行它。
通过本文，您了解了如何使用 HTML5 编写计算机程序，并提供了一个简单的示例。但是，这只是 HTML5 在编写计算机程序方面的一个简单示例。HTML5 还可以用于编写游戏、图形等复杂的计算机程序。如果您想深入了解 HTML5 编程，请继续学习。