最近在准备专升本, 抽一点时间敷衍一下大家!!! 嘿嘿嘿!!!
话不多说, 上代码:
- lang="zh-CN">
- charset="utf-8">
求和练习
- 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; }
- type="text/javascript">
- Windows.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;
- });
- }
- class="cal-sum">
- type="text" value="1,2,3,4,5,6" id="sum_input">
求数字之和, 数字之间用半角','分隔
id="sum_btn">
求和
id="sum_value">
[注] 在正则表达式中,^ 在 [] 中代表否定, 在这个练习中意思就是: 只要不是 ^ 和 数字, 当键盘输入抬起后, 会自动替换为没有, 现象即自动会退回
放假了, 也要抽点时间学习呀~~~~
来源: http://www.bubuko.com/infodetail-3123582.html