【每日一练】201—一款现代费用计算器的实现

每日一练1年前 (2023)发布 admin
1,393 0

这个是第一期专题练习的内容,第201练内容的最终效果:

【每日一练】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);

 

 

© 版权声明

相关文章

暂无评论

暂无评论...