JavaScript里面的居民们1-数据

2018-12-06 07:32:56来源：博客园阅读 ()

编码

首先练习数字相关的一些操作：

<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>