首页用HTML写一个计算器功能的网页代码要求布局好看

用HTML写一个计算器功能的网页代码要求布局好看

时间: 2023-04-01 15:02:21 浏览: 113

以下是一个简单的HTML计算器网页代码，布局比较简单，但是功能齐全： ```html <!DOCTYPE html> <html> <head> <title>计算器</title> <style> body { font-family: Arial, sans-serif; background-color: #f2f2f2; } h1 { text-align: center; margin-top: 50px; } form { margin: 50px auto; width: 300px; background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 10px rgba(,,,.2); } input[type="text"] { width: 100%; padding: 10px; margin-bottom: 20px; border-radius: 5px; border: none; box-shadow: 5px rgba(,,,.2); } input[type="submit"] { background-color: #4CAF50; color: #fff; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; box-shadow: 5px rgba(,,,.2); } input[type="submit"]:hover { background-color: #3e8e41; } </style> </head> <body> <h1>计算器</h1> <form> <input type="text" name="num1" placeholder="请输入第一个数字"> <input type="text" name="num2" placeholder="请输入第二个数字"> <select name="operator"> <option value="add">+</option> <option value="subtract">-</option> <option value="multiply">*</option> <option value="divide">/</option> </select> <input type="submit" value="计算"> <input type="text" name="result" placeholder="计算结果" disabled> </form> <script> var form = document.querySelector('form'); form.addEventListener('submit', function(event) { event.preventDefault(); var num1 = parseFloat(form.num1.value); var num2 = parseFloat(form.num2.value); var operator = form.operator.value; var result = form.result; if (operator === 'add') { result.value = num1 + num2; } else if (operator === 'subtract') { result.value = num1 - num2; } else if (operator === 'multiply') { result.value = num1 * num2; } else if (operator === 'divide') { result.value = num1 / num2; } }); </script> </body> </html> ```

阅读全文