JS項目練習之求和（包含正則表達式驗證）

時間 2019-11-12

原文原文鏈接

最近在準備專升本，抽一點時間敷衍一下你們！！！嘿嘿嘿！！！javascript

話很少說，上代碼：css

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>求和練習</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .cal-sum {
            width: 500px;
            margin: 100px auto;
        }
        .cal-sum input {
            width: 200px;
            height: 20px;
            padding: 0 5px;
            margin-right: 5px;
        }
        .cal-sum button {
            margin-top: 30px;
            width: 100px;
            height: 20px;
        }
        .cal-sum p {
            margin-top: 30px;
            font-size: 30px;
            color: red;
        }
    </style>
    <script type="text/javascript">
        window.onload = () => {
            const sumInput = document.getElementById('sum_input');
            const sumBtn = document.getElementById('sum_btn');
            const sumValue = document.getElementById('sum_value');

            // 確保輸入框只能輸入半角‘,’和數字
            // keyup事件，鍵盤擡起事件
            sumInput.addEventListener('keyup', () => {
                sumInput.value = sumInput.value.replace(/[^(\d)|(,)]/,"");
            });

            sumBtn.addEventListener('click', () => {
                let sum = 0;
                let inputNum = sumInput.value.split(',');
                for (let num in inputNum) {
                    sum += parseInt(inputNum[num]);
                }
                sumValue.innerHTML = sum;
            });
        }
    </script>
</head>
<body>
    <div class="cal-sum">
        <div><input type="text" value="1,2,3,4,5,6" id="sum_input"><span>求數字之和，數字之間用半角‘,’分隔</span></div>
        <button id="sum_btn">求和</button>
        <p><strong id="sum_value"></strong></p>    
    </div>
</body>
</html>