这个是第一期专题练习的内容，第201练内容的最终效果：
以下是具体实现代码：
HTML:
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″><meta http-equiv=”X-UA-Compatible” content=”IE=edge”><meta name=”viewport” content=”width=device-width, initial-scale=1.0″><title>【每日一练】第201练</title><link rel=”stylesheet” href=”index.css”></head><body><div class=”container”><h1>现代费用计算器</h1><p>输入消费金额和打赏百分比，开始计算总额</p><label for=”bill”>消费金额：</label><input type=”number” id=”bill”><br/><label for=”tip”>打赏百分比（%）：</label><input type=”number” id=”tip”><br/><button id=”calculate”>开始计算</button><br/><label for=”total”>总共:</label><span id=”total”></span></div><script src=”index.js”></script></body></html>
CSS:
* {box-sizing: border-box;}body {background-color: #f2f2f2;font-family: “Helvetica”, sans-serif;}.container {background-color: white;max-width: 600px;margin: 100px auto;padding: 20px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);border-radius: 10px;}h1 {margin-top: 0;text-align: center;}input {padding: 10px;border: 1px solid #ccc;border-radius: 4px;margin: 10px 0;width: 100%;}button {background-color: #4caf50;color: white;padding: 10px;border: none;cursor: pointer;margin: 10px 0;width: 100%;font-size: 18px;text-transform: uppercase;transition: background-color 0.2s ease;}button:hover {background-color: #45a049;}#total {font-size: 24px;font-weight: bold;margin-top: 10px;}
JS:
const btnEl = document.getElementById(“calculate”);const billInput = document.getElementById(“bill”);const tipInput = document.getElementById(“tip”);const totalSpan = document.getElementById(“total”);function calculateTotal() {const billValue = billInput.value;const tipValue = tipInput.value;const totalValue = billValue * (1 + tipValue / 100);totalSpan.innerText = totalValue.toFixed(2);}btnEl.addEventListener(“click”, calculateTotal);
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
