编码

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

<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     <  charset=\"utf-8\" />
  6     < >JS里的居民们1</ >
  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     < >
 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     </ >
132 </body>
133 
134 </html>

注意点：Math.round（）判断有小数点大于等于0.5的，向上取整数。比如Math.round（-1.5）=-1；Math.round（1.5）=2

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章