我的第一个好看点的网页

登录
注册

手机
以下是一个简单的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> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值