建立一個簡單的計算器網站-css教學-PHP中文網

建立一個簡單的計算器網站

王林

發布： 2024-08-23 14:33:27

原創

263 人瀏覽過

Build a Simple Calculator Website

介紹

各位開發者大家好！我很高興分享我的最新項目：簡單計算器。該專案是探索 JavaScript 基礎知識的完美方式，特別是在處理數學運算、動態更新 DOM 和建立互動式使用者介面方面。無論您是 Web 開發新手還是希望提升 JavaScript 技能，這個簡單計算器專案都是一個很好的起點。

項目概況

簡單計算器是一個基於網路的應用程序，允許使用者執行基本算術運算，如加法、減法、乘法和除法。此專案重點介紹如何創建響應靈敏且用戶友好的介面，同時有效處理用戶輸入以執行計算。

特徵

直覺的介面：簡潔明了的設計，方便互動。
基本算術運算：支援加減乘除。
清除和刪除功能：使用者只需點擊一下即可清除輸入或刪除最後一個條目。
響應式設計：確保不同裝置和螢幕尺寸之間的一致性可用性。

使用的技術

HTML：建立網頁和輸入元素。
CSS：設定計算器介面的樣式，確保簡潔且回應靈敏的設計。
JavaScript：管理計算邏輯和使用者互動。

專案結構

以下是專案結構的快速瀏覽：

Simple-Calculator/
├── index.html
├── styles.css
└── script.js

登入後複製

index.html：包含簡單計算器的 HTML 結構。
styles.css：包含 CSS 樣式以增強計算器的外觀和反應能力。
script.js：管理計算邏輯和使用者互動。

安裝

要開始該項目，請按照以下步驟操作：

複製儲存庫：

git clone https://github.com/abhishekgurjar-in/Simple-Calculator.git

登入後複製

開啟專案目錄:
```
cd Simple-Calculator
```
登入後複製
運行項目:
- 在網頁瀏覽器中開啟index.html 檔案以開始使用簡單計算器。

用法

在網頁瀏覽器中開啟網站。
輸入數字並使用計算機按鈕執行算術運算。
使用「AC」按鈕清除所有輸入，或「DEL」按鈕刪除最後一筆。
點選「=」按鈕查看計算結果。

程式碼說明

超文本標記語言

index.html 檔案提供了簡單計算器的基本結構，包括顯示區域和算術運算的按鈕。這是一個片段：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple Calculator</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="header">
      <h1>Simple Calculator</h1>
    </div>
    <div class="container">
      <div class="calculator">
        <input type="text" id="inputBox" placeholder="0" />
        <div>
          <button class="button operator">AC</button>
          <button class="button operator">DEL</button>
          <button class="button operator">%</button>
          <button class="button operator">/</button>
        </div>
        <div>
          <button class="button">7</button>
          <button class="button">8</button>
          <button class="button">9</button>
          <button class="button operator">*</button>
        </div>
        <div>
          <button class="button">4</button>
          <button class="button">5</button>
          <button class="button">6</button>
          <button class="button operator">-</button>
        </div>
        <div>
          <button class="button">1</button>
          <button class="button">2</button>
          <button class="button">3</button>
          <button class="button operator">+</button>
        </div>
        <div>
          <button class="button">00</button>
          <button class="button">0</button>
          <button class="button">.</button>
          <button class="button equalBtn">=</button>
        </div>
      </div>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </body>
</html>

登入後複製

CSS

styles.css 檔案設定簡單計算器的樣式，提供現代且使用者友好的佈局。以下是一些關鍵樣式：

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(45deg, #0a0a0a, #3a4452);
}

.header {
    color: white;
    margin: 30px;
    text-align: center;
}

.calculator {
    border: 1px solid #717377;
    padding: 20px;
    border-radius: 16px;
    background: transparent;
    box-shadow: 0px 3px 15px rgba(113, 115, 119, 0.5);
}

input {
    width: 320px;
    border: none;
    padding: 24px;
    margin: 10px;
    background: transparent;
    box-shadow: 0px 3px 15px rgba(84, 84, 84, 0.1);
    font-size: 40px;
    text-align: right;
    cursor: pointer;
    color: #ffffff;
}

input::placeholder {
    color: #ffffff;
}

button {
    border: none;
    width: 60px;
    height: 60px;
    margin: 10px;
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    font-size: 20px;
    box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1);
    cursor: pointer;
}

.equalBtn {
    background-color: #fb7c14;
}

.operator {
    color: #6dee0a;
}

.footer {
    color: white;
    margin: 50px;
    text-align: center;
}

登入後複製

JavaScript

script.js 檔案管理執行計算和處理使用者互動的邏輯。這是一個片段：

let input = document.getElementById("inputBox");
let buttons = document.querySelectorAll("button");

let string = "";
let arr = Array.from(buttons);

arr.forEach((button) => {
  button.addEventListener("click", (e) => {
    if (e.target.innerHTML === "=") {
      string = eval(string);
      input.value = string;
    } else if (e.target.innerHTML === "AC") {
      string = "";
      input.value = string;
    } else if (e.target.innerHTML === "DEL") {
      string = string.substring(0, string.length - 1);
      input.value = string;
    } else {
      string += e.target.innerHTML;
      input.value = string;
    }
  });
});

登入後複製