JavaScript里面的居民们1
编码
首先练习数字相关的一些操作：
<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
版权声明：本文为Joe-and-Joan原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。