编码
首先练习数字相关的一些操作：
<div>
<label>Number A:<input id="radio-a" type="radio" name="math-obj" value="a"></label><input id="num-a" type="text">
<label>Number B:<input id="radio-b" type="radio" name="math-obj" value="b"></label><input id="num-b" type="text">
</div>
<div>
<button>判断当前选中的输入框输入内容是否为数字</button>
<button>把 A 四舍五入为 B 个小数位数的数字</button>
<button>当前选中数字的绝对值</button>
<button>对当前选中的数字进行上舍入</button>
<button>对当前选中的数字进行下舍入</button>
<button>把当前选中的数字四舍五入为最接近的整数</button>
<button>返回 A 和 B 中的最高值</button>
<button>返回 A 和 B 中的最低值</button>
</div>
<p id="result"></p>
基于如上HTML，实现需求
- 按照HTML中按钮的描述以此实现功能
- 计算结果显示在 id 为 result 的 P 标签中
- 除了第一个按钮，其它按钮操作时，都需要判断输入是否为数字，否则在 console 中输出错误信息
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>JS里的居民们1</title> 7 8 </head> 9 10 <body> 11 <div> 12 <label>Number A:<input id="radio-a" type="radio" name="math-obj" value="a"></label><input id="num-a" type="text"> 13 <label>Number B:<input id="radio-b" type="radio" name="math-obj" value="b"></label><input id="num-b" type="text"> 14 </div> 15 <div> 16 <button>判断当前选中的输入框输入内容是否为数字</button> 17 <button>把 A 四舍五入为 B 个小数位数的数字</button> 18 <button>当前选中数字的绝对值</button> 19 <button>对当前选中的数字进行上舍入</button> 20 <button>对当前选中的数字进行下舍入</button> 21 <button>把当前选中的数字四舍五入为最接近的整数</button> 22 <button>返回 A 和 B 中的最高值</button> 23 <button>返回 A 和 B 中的最低值</button> 24 </div> 25 <p id="result"></p> 26 27 <script> 28 //定义常量 29 const numA = document.getElementById("num-a"); 30 numB = document.getElementById("num-b"); 31 radioA = document.getElementById("radio-a"); 32 radioB = document.getElementById("radio-b"); 33 buttons = document.getElementsByTagName("button"); //按钮数组 34 p = document.getElementById("result"); 35 //定义数字检查 36 function isNumber(num) { 37 if (!isNaN(num.value) && num.value != "") { 38 return true; 39 } else { 40 return false; 41 } 42 } 43 //定义勾选检查 44 function isCheck(check) { 45 if (check.checked) { 46 return true; 47 } else { 48 return false; 49 } 50 } 51 //按钮1监听点击，实现判断当前选中的输入框输入内容是否为数字 52 buttons[0].addEventListener("click", function () { 53 if (isCheck(radioA)) { 54 if (isNumber(numA)) { 55 p.innerHTML = "这是一个数字"; 56 } else { 57 p.innerHTML = "这不是一个数字"; 58 console.log("这不是一个数字哈！"); 59 } 60 } 61 if (isCheck(radioB)) { 62 if (isNumber(numB)) { 63 p.innerHTML = "这是一个数字"; 64 } else { 65 p.innerHTML = "这不是一个数字"; 66 console.log("这不是一个数字哈！"); 67 } 68 } 69 }) 70 //按钮2监听点击，实现把A四舍五入为B个小数位数的数字 71 buttons[1].addEventListener("click", function () { 72 if (isNumber(numA) && isNumber(numB)) { 73 var A = parseFloat(numA.value); 74 p.innerHTML = A.toFixed(parseInt(numB.value)); 75 } else { 76 console.log("必须均为数字哦！") 77 } 78 }) 79 //按钮3监听点击，实现当前选中数字的绝对值 80 buttons[2].addEventListener("click", function () { 81 if (isCheck(radioA)) { 82 if (isNumber(numA)) { 83 p.innerHTML = Math.abs(Number(numA.value)); 84 } else { 85 console.log("非数字！"); 86 } 87 } 88 if (isCheck(radioB)) { 89 if (isNumber(numB)) { 90 p.innerHTML = Math.abs(Number(numB.value)); 91 } else { 92 console.log("非数字！"); 93 } 94 } 95 }) 96 //按钮4监听点击，实现对当前选中的数字进行上舍入 97 buttons[3].addEventListener("click", function () { 98 if (isCheck(radioA)) { 99 p.innerHTML = Math.ceil(Number(numA.value)); 100 } 101 if (isCheck(radioB)) { 102 p.innerHTML = Math.ceil(Number(numB.value)); 103 } 104 }) 105 //按钮5监听点击，实现对当前选中的数字进行下舍入 106 buttons[4].addEventListener("click", function () { 107 if (isCheck(radioA)) { 108 p.innerHTML = Math.floor(Number(numA.value)); 109 } 110 if (isCheck(radioB)) { 111 p.innerHTML = Math.floor(Number(numB.value)); 112 } 113 }) 114 //按钮6监听点击，实现把当前选中的数字四舍五入为最接近的整数 115 buttons[5].addEventListener("click", function () { 116 if (isCheck(radioA)) { 117 p.innerHTML = Math.round(Number(numA.value)); 118 } 119 if (isCheck(radioB)) { 120 p.innerHTML = Math.round(Number(numB.value)); 121 } 122 }) 123 //按钮7监听点击，实现返回A和B中的最高值 124 buttons[6].addEventListener("click", function () { 125 p.innerHTML = Math.max(Number(numA.value), Number(numB.value)); 126 }) 127 //按钮8监听点击，实现返回A和B中的最小值 128 buttons[7].addEventListener("click", function () { 129 p.innerHTML = Math.min(Number(numA.value), Number(numB.value)); 130 }) 131 </script> 132 </body> 133 134 </html>
注意点：Math.round（）判断有小数点大于等于0.5的，向上取整数。比如Math.round（-1.5）=-1；Math.round（1.5）=2