生活随笔
收集整理的這篇文章主要介紹了
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
轉載于:https://www.cnblogs.com/Joe-and-Joan/p/10065492.html
總結
以上是生活随笔為你收集整理的JavaScript里面的居民们1-数据的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
