HTML5是一种用于构建和呈现网页内容的标记语言,它为开发人员提供了强大的功能和灵活性,在HTML5中,您可以创建各种交互式元素,包括一个简单的计算器,在本教程中,我们将学习如何使用HTML5、CSS和JavaScript创建一个基本的计算器。
1. HTML结构
我们需要创建HTML结构,这将包括一个div元素,它将包含计算器的所有按钮和输入字段。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="calculator">
        <input type="text" id="display" readonly>
        <button onclick="clearDisplay()">C</button>
        <button onclick="deleteLast()">DEL</button>
        <!-- Add more buttons for numbers and operations -->
    </div>
    <script src="script.js"></script>
</body>
</html>
2. CSS样式
接下来,我们将为计算器添加一些基本的样式,创建一个名为styles.css的文件,并添加以下内容:
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
}
#calculator {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(4, 50px);
    grid-gap: 5px;
}
#calculator input {
    grid-column: 1 / span 4;
    text-align: right;
    font-size: 24px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
#calculator button {
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 18px;
    padding: 5px;
    cursor: pointer;
}
#calculator button:hover {
    background-color: #e2e2e2;
}
3. JavaScript逻辑
我们需要添加JavaScript代码来处理按钮点击事件并执行计算,创建一个名为script.js的文件,并添加以下内容:
function addNumber(number) {
    const display = document.getElementById('display');
    display.value += number;
}
function calculate(operation) {
    try {
        const display = document.getElementById('display');
        const result = eval(display.value);
        display.value = result;
    } catch (error) {
        alert('Invalid calculation');
    }
}
function clearDisplay() {
    document.getElementById('display').value = '';
}
function deleteLast() {
    const display = document.getElementById('display');
    display.value = display.value.slice(0, -1);
}
// Add event listeners for buttons
document.addEventListener('DOMContentLoaded', () => {
    const buttons = document.querySelectorAll('#calculator button');
    buttons.forEach(button => {
        if (!button.onclick) {
            button.addEventListener('click', () => addNumber(button.innerText));
        }
    });
});
在这个示例中,我们定义了几个函数来处理不同的操作,如添加数字、计算结果、清除显示和删除最后一个字符,我们还为数字按钮添加了事件监听器,以便在点击时调用addNumber函数。
结论
现在,您已经学会了如何使用HTML5、CSS和JavaScript创建一个简单的计算器,这个计算器可以处理基本的数学运算,如加、减、乘和除,您可以根据自己的需求进一步扩展这个计算器的功能,例如添加记忆功能、百分比计算或更复杂的数学运算。




 
		 
		 
		 
		
还没有评论,来说两句吧...