JavaScript 系列五：第3課

── 變數作用域、箭頭函式、ES6 語法

by applelily

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 系列五：第3課 ── 變數作用域、箭頭函式、ES6 語法</title>
    <link rel="stylesheet" href="./03-js_arrow-function.css">
</head>
<body>
    <div class="header header_counter">
        simple counter:
    </div>
    <div class="counter-container">

        <div class="flip-container">
            <div class="flipper">
                <div id="topDigit" class="digit top">0</div>
                <div id="bottomDigit" class="digit bottom">1</div>
            </div>
        </div>
        <button id="plus_btn">+</button>
        <button id="minus_btn">-</button>
    </div>
    <hr>
    <div class="header header_calculato">
        simple calculator:
    </div>
    <div class="calculator_container">

            <input id="num_1" type="text" placeholder="輸入數字..." />
            <input id="num_2" type="text" placeholder="輸入數字..."/>
            <button id = "calculator_btn" class="calculator_btn">加/減/乘/除</button>

    </div>
    

    <script src="./03-js_arrow-function.js"></script>
</body>
</html>

CSS

body {

    background-color: #333;

}
.header{
    font-size: 40px;
}
.counter-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40vh;
    text-align: center;

}

.flip-container {
    perspective: 1000px;
    display: inline-block;
    margin: 20px;
    font-family: 'Courier New', Courier, monospace;
}

.flipper {
    position: relative;
    width: 180px;
    height: 100px;
    overflow: hidden;
}

.digit {
    position: absolute;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 80px;
    line-height: 100px;
    text-align: center;
    background-color: #222;
    border-radius: 10px;
    transition: transform 1s, opacity 1s;
}

.flipper.up .digit.top {
    animation: flip-up 1s forwards;
}

.flipper.up .digit.bottom {
    animation: fade-in-up 1s forwards;
}

.flipper.down .digit.top {
    animation: flip-down 1s forwards;
}

.flipper.down .digit.bottom {
    animation: fade-in-down 1s forwards;
}

@keyframes flip-up {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-100%);
        opacity: 0;
    }
}

@keyframes fade-in-up {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes flip-down {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

@keyframes fade-in-down {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

button {
    font-size: 24px;
    padding: 10px 20px;
    margin: 10px;
    cursor: pointer;
}


.calculator_container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40vh;
    text-align: center;
    font-size: 2rem;
}


input{
    
    max-width: 200px;
    height: 50px;
    font-size: inherit;
 ...

JavaScript

const counter = (() => {
    let count_1 = 0;

   
    const updateDisplay = (direction) => {
        const topDigit = document.getElementById('topDigit');
        const bottomDigit = document.getElementById('bottomDigit');
        const flipper = document.querySelector('.flipper');

        topDigit.textContent = count_1;
        bottomDigit.textContent = count_1;

        flipper.classList.remove('up', 'down');
        flipper.classList.add(direction);

        setTimeout(() => {
            topDigit.textContent = count_1;
            flipper.classList.remove('up', 'down');
        }, 2000); 
        // 这应与动画持续时间一致
    };

    const plus = () => {
        count_1++;
        updateDisplay('up');
    };

    const minus = () => {
        count_1--;
        updateDisplay( 'down');
    };

    return { plus, minus };
})();


const do_calculator = () =>{
    let input_1 = document.querySelector('#num_1').value;
    let input_2 = document.querySelector('#num_2').value;
    let num_1 = parseFloat(input_1);
    let num_2 = parseFloat(input_2);
    let result_plus = num_1 + num_2;
    alert(num_1 + '+' +num_2 + ' = ' + result_plus);
    let result_minus = num_1 - num_2;
    alert(num_1 + '-' +num_2 + ' = ' + result_minus);
    let result_multiply = num_1 * num_2 ;
    alert(num_1 + '×' +num_2 + ' = ' + result_multiply) ;
    let result_div = num_1 / num_2 ;
    alert(num_1 + '÷' +num_2 + ' = ' + result_div) ;
}

const minus_btn = document.querySelector('#minus_btn');
const plus_btn = document.querySelector('#plus_btn');
const calculator_btn = document.querySelector('#calculator_btn');

minus_btn.onclick = counter.minus;
plus_btn.onclick = counter.plus;
calculator_btn.onclick = do_calculator;