用JavaScript和HTML实现一个精美的计算器网页

云计算

用JavaScript和HTML实现一个精美的计算器网页

2025-04-24 00:05

精美计算器网页实现指南（JavaScript+HTML）本文将详细介绍如何使用HTML、CSS和JavaScript创建一个功能完善且美观的计算器网页。这个计算器将具备基本运算功能，同时拥有精美的界面设计和流畅的用户体验。

                                            




精美计算器网页实现指南（JavaScript+HTML）
本文将详细介绍如何使用HTML、CSS和JavaScript创建一个功能完善且美观的计算器网页。这个计算器将具备基本运算功能，同时拥有精美的界面设计和流畅的用户体验。
一、HTML结构搭建
首先创建计算器的基本HTML框架：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精美计算器</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <div class="display">
            <div class="previous-operand"></div>
            <div class="current-operand">0</div>
        </div>
        <button class="span-two">AC</button>
        <button>DEL</button>
        <button>÷</button>
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>×</button>
        <button>4</button>
        <button>5</button>
        <button>6</button>
        <button>+</button>
        <button>7</button>
        <button>8</button>
        <button>9</button>
        <button>-</button>
        <button>.</button>
        <button>0</button>
        <button class="span-two">=</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

二、CSS样式设计
接下来添加CSS样式，使计算器外观精美：
* {
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background: linear-gradient(to right, #3a7bd5, #00d2ff);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
}

.calculator {
    width: 400px;
    background-color: #1e1e1e;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.display {
    background-color: #2d2d2d;
    color: white;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    text-align: right;
    word-wrap: break-word;
    min-height: 100px;
}

.previous-operand {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.2rem;
    height: 25px;
}

.current-operand {
    color: white;
    font-size: 2.5rem;
    margin-top: 10px;
}

button {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: none;
    background-color: #333;
    color: white;
    font-size: 1.5rem;
    margin: 5px;
    cursor: pointer;
    transition: all 0.2s;
}

button:hover {
    background-color: #555;
}

button:active {
    transform: scale(0.95);
}

.span-two {
    width: 150px;
    border-radius: 35px;
}

button[data-operation] {
    background-color: #ff9500;
}

button[data-operation]:hover {
    background-color: #ffaa33;
}

button[data-equals] {
    background-color: #ff9500;
}

三、JavaScript功能实现
最后添加JavaScript代码实现计算器功能：
class Calculator {
    constructor(previousOperandTextElement, currentOperandTextElement) {
        this.previousOperandTextElement = previousOperandTextElement
        this.currentOperandTextElement = currentOperandTextElement
        this.clear()
    }

    clear() {
        this.currentOperand = '0'
        this.previousOperand = ''
        this.operation = undefined
    }

    delete() {
        this.currentOperand = this.currentOperand.toString().slice(0, -1)
        if (this.currentOperand === '') {
            this.currentOperand = '0'
        }
    }

    appendNumber(number) {
        if (number === '.' && this.currentOperand.includes('.')) return
        if (this.currentOperand === '0' && number !== '.') {
            this.currentOperand = number.toString()
        } else {
            this.currentOperand = this.currentOperand.toString() + number.toString()
        }
    }

    chooseOperation(operation) {
        if (this.currentOperand === '') return
        if (this.previousOperand !== '') {
            this.compute()
        }
        this.operation = operation
        this.previousOperand = this.currentOperand
        this.currentOperand = ''
    }

    compute() {
        let computation
        const prev = parseFloat(this.previousOperand)
        const current = parseFloat(this.currentOperand)
        if (isNaN(prev) || isNaN(current)) return
      
        switch (this.operation) {
            case '+':
                computation = prev + current
                break
            case '-':
                computation = prev - current
                break
            case '×':
                computation = prev * current
                break
            case '÷':
                computation = prev / current
                break
            default:
                return
        }
      
        this.currentOperand = computation.toString()
        this.operation = undefined
        this.previousOperand = ''
    }

    updateDisplay() {
        this.currentOperandTextElement.innerText = this.currentOperand
        if (this.operation != null) {
            this.previousOperandTextElement.innerText = 
                `${this.previousOperand} ${this.operation}`
        } else {
            this.previousOperandTextElement.innerText = ''
        }
    }
}

const numberButtons = document.querySelectorAll('[data-number]')
const operationButtons = document.querySelectorAll('[data-operation]')
const equalsButton = document.querySelector('[data-equals]')
const deleteButton = document.querySelector('[data-delete]')
const allClearButton = document.querySelector('[data-all-clear]')
const previousOperandTextElement = document.querySelector('[data-previous-operand]')
const currentOperandTextElement = document.querySelector('[data-current-operand]')

const calculator = new Calculator(previousOperandTextElement, currentOperandTextElement)

numberButtons.forEach(button => {
    button.addEventListener('click', () => {
        calculator.appendNumber(button.innerText)
        calculator.updateDisplay()
    })
})

operationButtons.forEach(button => {
    button.addEventListener('click', () => {
        ca



                                                                
                                    標簽: 

                                    
                                        
                                            
                                                                                                JavaScript
                                                                                                HTML
                                                                                            
                                        
                                    
                                
                                
                                
                                                                         Centos：[Errno 12] Cannot怎么解决？
                                                                         php适合做erp吗？