JavaScript里面的居民们1
程序员文章站
2022-03-30 10:06:47
编码 首先练习数字相关的一些操作： 基于如上HTML，实现需求 按照HTML中按钮的描述以此实现功能 计算结果显示在 id 为 result 的 P 标签中 除了第一个按钮，其它按钮操作时，都需要判断输入是否为数字，否则在 console 中输出错误信息 注意点：Math.round（）判断有小数点 ......
编码
首先练习数字相关的一些操作：
<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
上一篇： 利用Monkey命令操作屏幕快速滑动
下一篇： 怎样解决使用Git Bash出现乱码问题