前沿:次隨筆對應的是第十七天到第十八天的學習任務
任務需求:
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>IFE ECMAScript</title></head><body> <input id="dec-number" type="number" placeholder="輸入一個十進位非負整數"> <input id="bin-bit" type="number" placeholder="輸入轉化後二進位數字位數"> <button id="trans-btn">轉化為二進位</button> <p id="result">運算結果</p> <script>function dec2bin(decNumber) { // 在這裡實現你的轉化方法,注意需要判斷輸入必須為一個非負整數 // 這裡是上一個任務的實現}// 實現黨點擊轉化按鈕時,將輸入的十進位數字轉化為二進位,並顯示在result的p標籤內// 新的需求是,轉化顯示後的二進位數為bin-bit中輸入的數字寬度,例如// dec-number為5,bin-bit為5,則轉化後數字為00101// 如果bin-bit小於轉化後的二進位本身位數,則使用原本的位數,如dec-number為5,bin-bit為2,依然輸出101,但同時在console中報個錯// Some coding </script></body></html>實現當點擊轉化按鈕時,將輸入的十進位數字轉化為二進位,並顯示在result的p標籤內轉化顯示後的二進位數為bin-bit中輸入的數字寬度,例如dec-number為5,bin-bit為5,則轉化後數字為00101如果bin-bit小於轉化後的二進位本身位數,則使用原本的位數,如dec-number為5,bin-bit為2,依然輸出101,但同時在console中報個錯首先我們要了解二進位、八進位、十進位、十六進位之間的關聯與差異,這些知識是之前學習的,在這裡就不做過多解釋了。
然後我們看一下相互轉換需要用到的方法,以下面代碼為例
// 十進位轉換成二進位(八進位或十六進位)var num = 111;num.toString(2); //轉換成二進位num.toString(8); //轉換成八進位num.toString(16); //轉換成十六進位//二進位(八進位或十六進位)轉換成十進位var num1 = "111";parseInt(num1,2); //二進位轉換成十進位parseInt(num1,8); //八進位轉換成十進位parseInt(num1,16); //十六進位轉換成十進位最後我們來通過代碼實現需求。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>IFE ECMAScript</title></head><body> <p>通過除2取餘的方法來把十進位整數轉化為二進位</p> <input id="dec-number" type="number" placeholder="輸入一個十進位非負整數"> <input id="bin-bit" type="number" placeholder="輸入轉化後二進位數字位數"> <button id="trans-btn">轉化為二進位</button> <p id="result">運算結果</p> <script> var transBtn = document.getElementById("trans-btn"), result = document.getElementById("result"); function dec2bin(decNumber) { // 在這裡實現你的轉化方法,注意需要判斷輸入必須為一個非負整數 if(decNumber%1===0 && decNumber>=0){ var dec2 = parseInt(decNumber).toString(2), binBit = document.getElementById("bin-bit").value; // 判斷轉換後的位數與設定位數之間的關係 if(dec2.length<=binBit) { var complete=""; for (let i=0;i<(binBit-dec2.length);i++){ complete+="0"; } dec2 = complete + dec2; }else { console.log("二進位位數大於設定的位數") } result.innerHTML = "運算結果:" + dec2; }else { alert("請輸入非負整數!"); } } // 實現黨點擊轉化按鈕時,將輸入的十進位數字轉化為二進位,並顯示在result的p標籤內 // Some coding transBtn.onclick = function(){ var decNum = document.getElementById("dec-number").value; dec2bin(decNum); } </script></body></html>有幾點我們需要注意:
十進位數字類型為number,而二進位、八進位、十六進位字符類型為string;能通過上述方式進行進位轉換的十進位數字一定是非負整數;對十進位數字直接轉換時需要用「()」將其包裹起來,比如(111).toString(2);對數字參數進行進位轉換時一定要用parseInt包裹參數再轉換,否則會得不到想要的結果。