以下是一个完整的卡通风格计算器网页代码，采用明亮活泼的配色、圆润可爱的元素设计，同时具备完整的四则运算功能：

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 href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF9A9E',
                        secondary: '#A8E6CF',
                        accent: '#FFD3B6',
                        dark: '#6C5B7B',
                        light: '#FCFCFC'
                    },
                    fontFamily: {
                        cartoon: ['Comic Sans MS', 'cursive', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .btn-cartoon {
                @apply rounded-2xl shadow-lg transform transition-all duration-200 hover:scale-105 active:scale-95 font-cartoon font-bold text-xl;
            }
            .calculator-shadow {
                box-shadow: 0 15px 0 #6C5B7B, 0 20px 25px rgba(0,0,0,0.1);
            }
            .display-shadow {
                box-shadow: inset 0 4px 8px rgba(0,0,0,0.1);
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-primary/30 via-accent/30 to-secondary/30 min-h-screen flex items-center justify-center p-5 font-cartoon">
    <!-- 装饰元素 -->
    <div class="fixed top-10 left-10 text-6xl text-primary/40 animate-bounce">
        <i class="fa fa-star"></i>
    </div>
    <div class="fixed bottom-10 right-10 text-6xl text-secondary/40 animate-bounce" style="animation-delay: 0.5s;">
        <i class="fa fa-heart"></i>
    </div>
    <div class="fixed top-20 right-20 text-5xl text-accent/40 animate-bounce" style="animation-delay: 1s;">
        <i class="fa fa-cloud"></i>
    </div>

    <!-- 计算器主体 -->
    <div class="bg-light rounded-3xl p-6 calculator-shadow w-full max-w-sm">
        <!-- 卡通表情头部 -->
        <div class="flex justify-center mb-4">
            <div class="w-20 h-8 bg-dark rounded-t-full relative">
                <div class="absolute top-2 left-4 w-3 h-3 bg-white rounded-full"></div>
                <div class="absolute top-2 right-4 w-3 h-3 bg-white rounded-full"></div>
                <div class="absolute top-4 left-1/2 transform -translate-x-1/2 w-6 h-2 bg-white rounded-full"></div>
            </div>
        </div>

        <!-- 显示区域 -->
        <div class="bg-white rounded-2xl p-4 mb-5 display-shadow text-right">
            <div id="previous-operand" class="text-dark/60 text-lg h-7 overflow-hidden"></div>
            <div id="current-operand" class="text-dark text-3xl font-bold overflow-x-auto whitespace-nowrap">0</div>
        </div>

        <!-- 按钮区域 -->
        <div class="grid grid-cols-4 gap-3">
            <button class="btn-cartoon bg-accent text-dark p-4" data-action="clear">AC</button>
            <button class="btn-cartoon bg-accent text-dark p-4" data-action="delete">DEL</button>
            <button class="btn-cartoon bg-accent text-dark p-4" data-value="%">%</button>
            <button class="btn-cartoon bg-primary text-white p-4" data-value="/">÷</button>
            
            <button class="btn-cartoon bg-light text-dark p-4 border border-gray-200" data-value="7">7</button>
            <button class="btn-cartoon bg-light text-dark p-4 border border-gray-200" data-value="8">8</button>
            <button class="btn-cartoon bg-light text-dark p-4 border border-gray-200" data-value="9">9</button>
            <button class="btn-cartoon bg-primary text-white p-4" data-value="*">×</button>
            
            <button class="btn-cartoon bg-light text-dark p-4 border border-gray-200" data-value="4">4</button>
            <button class="btn-cartoon bg-light text-dark p-4 border border-gray-200" data-value="5">5</button>
            <button class="btn-cartoon bg-light text-dark p-4 border border-gray-200" data-value="6">6</button>
            <button class="btn-cartoon bg-primary text-white p-4" data-value="-">-</button>
            
            <button class="btn-cartoon bg-light text-dark p-4 border border-gray-200" data-value="1">1</button>
            <button class="btn-cartoon bg-light text-dark p-4 border border-gray-200" data-value="2">2</button>
            <button class="btn-cartoon bg-light text-dark p-4 border border-gray-200" data-value="3">3</button>
            <button class="btn-cartoon bg-primary text-white p-4" data-value="+">+</button>
            
            <button class="btn-cartoon bg-light text-dark p-4 border border-gray-200" data-value=".">.</button>
            <button class="btn-cartoon bg-light text-dark p-4 border border-gray-200 col-span-2" data-value="0">0</button>
            <button class="btn-cartoon bg-secondary text-dark p-4" data-action="calculate">=</button>
        </div>
    </div>

    <script>
        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
                } 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 = '0'
            }

            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 '/':
                        if (current === 0) {
                            this.currentOperand = '错误'
                            this.previousOperand = ''
                            this.operation = undefined
                            return
                        }
                        computation = prev / current
                        break
                    case '%':
                        computation = prev % current
                        break
                    default:
                        return
                }
                this.currentOperand = computation
                this.operation = undefined
                this.previousOperand = ''
            }

            getDisplayNumber(number) {
                const stringNumber = number.toString()
                const integerDigits = parseFloat(stringNumber.split('.')[0])
                const decimalDigits = stringNumber.split('.')[1]
                let integerDisplay
                if (isNaN(integerDigits)) {
                    integerDisplay = ''
                } else {
                    integerDisplay = integerDigits.toLocaleString('zh', { maximumFractionDigits: 0 })
                }
                if (decimalDigits != null) {
                    return `${integerDisplay}.${decimalDigits}`
                } else {
                    return integerDisplay
                }
            }

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

        const numberButtons = document.querySelectorAll('[data-value]')
        const operationButtons = document.querySelectorAll('[data-value]:not([data-value="%"])')
        const equalsButton = document.querySelector('[data-action="calculate"]')
        const deleteButton = document.querySelector('[data-action="delete"]')
        const allClearButton = document.querySelector('[data-action="clear"]')
        const previousOperandTextElement = document.querySelector('#previous-operand')
        const currentOperandTextElement = document.querySelector('#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', () => {
                calculator.chooseOperation(button.innerText)
                calculator.updateDisplay()
            })
        })

        equalsButton.addEventListener('click', button => {
            calculator.compute()
            calculator.updateDisplay()
        })

        allClearButton.addEventListener('click', button => {
            calculator.clear()
            calculator.updateDisplay()
        })

        deleteButton.addEventListener('click', button => {
            calculator.delete()
            calculator.updateDisplay()
        })
    </script>
</body>
</html>


这个卡通风格计算器具备以下特点：

采用马卡龙色系的渐变背景，搭配可爱的浮动装饰元素
计算器顶部设计了卡通表情头部，增添趣味