功能齐全的计算器网站程序开发与实现

以下是一个使用 HTML、CSS 和 JavaScript 实现的完整版计算器网站程序，满足你所提出的各项需求： ### 1. 项目结构 ```plaintext calculator/ ├── index.html ├── style.css ├── script.js ├── logo.png # 替换为实际的 logo 图片 └── sounds/ ├── click.mp3 # 按键声 ├── voice1.mp3 ├── voice2.mp3 # 可以添加更多语音提示文件 ``` ### 2. `index.html` 文件 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Calculator</title> <link rel="stylesheet" href="style.css"> <link rel="icon" href="logo.png"> </head> <body>  <div id="language-switch"> <button onclick="changeLanguage('en')">English</button> <button onclick="changeLanguage('zh')">中文</button> </div>  <div id="logo"> <img src="logo.png" alt="Calculator Logo"> </div>  <div id="calculator"> <div id="display"></div> <div class="buttons"> <button onclick="appendToDisplay('7')">7</button> <button onclick="appendToDisplay('8')">8</button> <button onclick="appendToDisplay('9')">9</button> <button onclick="appendToDisplay('/')">/</button> <button onclick="appendToDisplay('4')">4</button> <button onclick="appendToDisplay('5')">5</button> <button onclick="appendToDisplay('6')">6</button> <button onclick="appendToDisplay('*')">*</button> <button onclick="appendToDisplay('1')">1</button> <button onclick="appendToDisplay('2')">2</button> <button onclick="appendToDisplay('3')">3</button> <button onclick="appendToDisplay('-')">-</button> <button onclick="appendToDisplay('0')">0</button> <button onclick="appendToDisplay('.')">.</button> <button onclick="calculate()">=</button> <button onclick="appendToDisplay('+')">+</button> <button onclick="clearDisplay()">C</button> </div> </div>  <footer> <p>© 2024 Calculator. All rights reserved.</p> </footer> <script src="script.js"></script> </body> </html> ``` ### 3. `style.css` 文件 ```css body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; background-color: #f4f4f4; } #language-switch { position: absolute; top: 20px; right: 20px; } #logo { margin-bottom: 20px; } #logo img { width: 100px; height: auto; } #calculator { background-color: #fff; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 20px; } #display { font-size: 24px; text-align: right; padding: 10px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 10px; } .buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .buttons button { font-size: 18px; padding: 10px; border: none; border-radius: 5px; background-color: #e0e0e0; cursor: pointer; } .buttons button:hover { background-color: #d0d0d0; } footer { position: absolute; bottom: 0; width: 100%; background-color: blue; color: white; text-align: center; padding: 10px 0; } ``` ### 4. `script.js` 文件 ```javascript // 语言字典 const languages = { en: { display: "Display", clear: "C", equals: "=", plus: "+", minus: "-", multiply: "*", divide: "/", decimal: ".", copyright: "© 2024 Calculator. All rights reserved." }, zh: { display: "显示", clear: "清除", equals: "等于", plus: "加", minus: "减", multiply: "乘", divide: "除", decimal: "小数点", copyright: "© 2024 计算器. 保留所有权利." } }; let currentLanguage = 'en'; // 初始化显示 let display = document.getElementById('display'); let currentInput = ''; // 按键声 const clickSound = new Audio('sounds/click.mp3'); // 语音提示数组 const voiceFiles = ['sounds/voice1.mp3', 'sounds/voice2.mp3']; // 追加输入到显示区域 function appendToDisplay(value) { currentInput += value; display.textContent = currentInput; playClickSound(); } // 清除显示区域 function clearDisplay() { currentInput = ''; display.textContent = ''; playClickSound(); } // 计算结果 function calculate() { try { const result = eval(currentInput); display.textContent = result; currentInput = result.toString(); playRandomVoice(); } catch (error) { display.textContent = 'Error'; currentInput = ''; } playClickSound(); } // 播放按键声 function playClickSound() { clickSound.play(); } // 播放随机语音提示 function playRandomVoice() { const randomIndex = Math.floor(Math.random() * voiceFiles.length); const voice = new Audio(voiceFiles[randomIndex]); voice.play(); } // 语言切换函数 function changeLanguage(lang) { currentLanguage = lang; // 更新界面文本 // 这里可以根据需要更新更多元素的文本 const buttons = document.querySelectorAll('.buttons button'); const footer = document.querySelector('footer p'); const langData = languages[lang]; buttons.forEach(button => { const value = button.textContent; switch (value) { case 'C': button.textContent = langData.clear; break; case '=': button.textContent = langData.equals; break; case '+': button.textContent = langData.plus; break; case '-': button.textContent = langData.minus; break; case '*': button.textContent = langData.multiply; break; case '/': button.textContent = langData.divide; break; case '.': button.textContent = langData.decimal; break; } }); footer.innerHTML = langData.copyright; } // 监听键盘事件 document.addEventListener('keydown', function (event) { const key = event.key; if (/[0-9+\-*/.]/.test(key)) { appendToDisplay(key); } else if (key === 'Enter') { calculate(); } else if (key === 'Escape') { clearDisplay(); } }); ``` ### 开发建议 - **代码可维护性**：将不同功能的代码模块化，例如将语言切换逻辑、计算器计算逻辑等分别封装成独立的函数，方便后续的维护和扩展。 - **安全性**：使用 `eval()` 函数存在安全风险，在实际项目中可以考虑使用更安全的计算方法，如使用 `Function` 构造函数。 - **兼容性**：在不同浏览器和设备上进行测试，确保网站的兼容性。可以使用浏览器前缀来支持不同浏览器的特性。 - **用户体验**：可以添加更多的动画效果，如按键按下时的动画，提升用户体验。 ### 学习资源 - **MDN Web Docs**：提供了 HTML、CSS 和 JavaScript 的详细文档和教程，是学习前端开发的重要资源。 - **W3Schools**：提供了丰富的前端开发教程和示例代码，适合初学者。 ######[AI写代码神器 | 2172点数解答 | 2026-06-08 14:23:50]

服务商

更多选项

快捷项

自定义