簡易計數器

目標

點擊向上箭頭，中間的數字會增加
點擊向下箭頭，中間的數字會減少

進階

如果做完了~可以加個條件，如果不能讓中間的數字為0要怎麼做?(中間數字不能出現小於等於0的狀況)

看答案

普通題進階題

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>簡易計數器</title>
    <style>
        .counter-container {
            text-align: center;
            padding: 20px;
        }
        .counter {
            font-size: 24px;
            margin: 10px 0;
        }
        .button {
            border: none;
            text-decoration: none;
            display: inline-block;
            background: transparent;
            margin: 4px 2px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="counter-container">
        <button class="button" onclick="increment()">⬆️</button>
        <div class="counter" id="count">0</div>
        <button class="button" onclick="decrement()">⬇️</button>
    </div>

    <script>
        let count = 0;
        const countElement = document.getElementById('count');

        function increment() {
            count++;
            countElement.textContent = count;
        }

        function decrement() {
            count--;
            countElement.textContent = count;
        }
    </script>
</body>
</html>

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>簡易計數器</title>
    <style>
        .counter-container {
            text-align: center;
            padding: 20px;
        }
        .counter {
            font-size: 24px;
            margin: 10px 0;
        }
        .button {
            border: none;
            text-decoration: none;
            display: inline-block;
            background: transparent;
            margin: 4px 2px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="counter-container">
        <button class="button" onclick="increment()">⬆️</button>
        <div class="counter" id="count">0</div>
        <button class="button" onclick="decrement()">⬇️</button>
    </div>

    <script>
        let count = 0;
        const countElement = document.getElementById('count');

        function increment() {
            count++;
            countElement.textContent = count;
        }

        function decrement() {
            count = Math.max(0,count - 1)
            // if(count < 0){
            //     count++;
            // }
            countElement.textContent = count;
        }
    </script>
</body>
</html>

Contributors

lucashsu95

Changelog

Last edited 5 months ago

View full history

簡易計數器 ​

目標 ​

進階 ​

Contributors

Changelog

簡易計數器

目標

進階