最近在準備專升本，抽一點時間敷衍一下大家！！！嘿嘿嘿！！！ 話不多說，上代碼： [註]在正則表達式中，^ 在 [] 中代表否定，在這個練習中意思就是：只要不是 ^ 和 數字，當鍵盤輸入抬起後，會自動替換為沒有，現象即自動會退回 放假了，也要抽點時間學習呀~~~~ ...
最近在準備專升本，抽一點時間敷衍一下大家！！！嘿嘿嘿！！！
話不多說，上代碼：
<!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>
[註]在正則表達式中，^ 在 [] 中代表否定，在這個練習中意思就是：只要不是 ^ 和 數字，當鍵盤輸入抬起後，會自動替換為沒有，現象即自動會退回
放假了，也要抽點時間學習呀~~~~
