前端學習隨筆14 利用js實現十進位與二進位相互轉換

2021-01-08 前端嘮嘮嗑

前沿:次隨筆對應的是第十七天到第十八天的學習任務

任務需求:

<!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包裹參數再轉換,否則會得不到想要的結果。

相關焦點

  • JS十進位轉換二進位
    最近因為需求,要接觸到前端JS的一些東西,遇到需要把十進位數字轉換為二進位,並且補全對應位數,覺得蠻有趣的,所以把它記錄下來。十進位轉二進位方法其實很簡單,一個函數搞定了:var value = parseInt(12).toString(2);//parsetInt裡面是要轉換的數字,toString裡面是要轉換的進位,//如果要轉換為其他進位,替換掉就好了,so easy。
  • 二進位、十進位、八進位、十六進位間的相互轉換函數
    二進位、十進位、八進位、十六進位間的相互轉換函數1、輸入任意一個十進位的整數,將其分別轉換為二進位、八進位、十六進位。{int num;char a[39];//定義一個字符數組,用於存儲字符串cout<<"Entre num:"<<endl;cin>>num;cout<<"二進位
  • 進位轉換 二進位轉十進位
    上節課我們學習了十進位轉換成二進位的方法,那二進位轉換十進位是怎麼轉換的呢?
  • 二進位-八進位-十進位-十六進位之間的相互轉換
    ,課本中講到了進位之間的相互轉換,最近用到數字晶片74HC125,涉及到TTL-CMOLS-進位轉換,三個方面的知識,重新拿起書本,再查找資料,匯總信息如下:01:二進位-轉為-八進位//方法://每3位為一組,因為8進位數,需要3bit數據表示0~7,逢八進一;案例1:(1100 1110)2=(11 001
  • 二進位、八進位、十進位、十六進位數的轉換方法
    一 、數制 計算機中採用的是二進位,因為二進位具有運算簡單,易實現且可靠,為邏輯設計提供了有利的途徑、節省設備等優點,為了便於描述,又常用八、十六進位作為二進位的縮寫。有四進位十進位:有10個基數:0 ~~ 9 ,逢十進一二進位:有2 個基數:0 ~~ 1 ,逢二進一八進位:有8個基數:0 ~~ 7 ,逢八進一十六進位:有16個基數:0 ~~ 9,A,B,C,D,E,F (A=10,B=11,C=12,D=13,E=14,F=15) ,逢十六進一1、數的進位記數法N=a n-1*p n-1+a n-2*p n
  • 二進位、八進位、十進位和十六進位數之間的轉換方法
    當然,人們輸入計算機的十進位被轉換成二進位進行計算,計算後的結果又由二進位轉換成十進位,這都由作業系統自動完成,並不需要人們手工去做,學習彙編語言,就必須了解二進位(還有八進位/十六進位)。 數制也稱計數制,是用一組固定的符號和統一的規則來表示數值的方法。人們通常採用的數制有十進位、二進位、八進位和十六進位。
  • 10、進位轉換:二進位、八進位、十六進位、十進位之間的轉換
    將二進位、八進位、十六進位轉換為十進位二進位、八進位和十六進位向十進位轉換都非常容易,就是「按權相加」。所謂「權」,也即「位權」。假設當前數字是 N 進位,那麼:更加通俗的理解是,假設一個多位數(由多個數字組成的數)某位上的數字是 1,那麼它所表示的數值大小就是該位的位權。
  • python進位轉換:十進位轉二進位的用法
    我們在學習python時候肯定會碰到關於進位轉換,其實這是非常簡單的,這個就像小學學習數學乘法口訣意義,只要記住轉換口訣即可輕鬆應用,一起來看下具體的操作內容吧~一、python進位轉換dec(十進位)—> bin(二進位)dec(十進位)—>
  • 二進位,八進位,十進位,十六進位之間的轉換
    說起二進位,十進位等大家都很熟悉,但是如果讓你相互轉換,你還會麼?
  • 二進位,八進位,十進位,十六進位轉換詳解~
    規則逢二進一逢八進一逢十進一逢十六進一權2^i-18^i-110^i-116^i-12.進位轉換十進位01234567          小數:0.11= 1×2^-1 + 1×2^-2 (以小數點為界逐步向右排序)        2.八進位···>十進位        轉換原則:讓八進位各位上的係數乘以對應的權,然後求其和。
  • FPGA學習系列:32. 如何實現二進位轉十進位的設計
    設計背景: 二進位轉十進位在設計應用中十分的廣泛。尤其在AD轉化中是必須所用到的一個小知識點,學習二進位轉十進位的方法顯的非常的重要。今天就和筆者來學習二進位轉十進位的方法,通過簡單的學習來掌握這麼一門知識。
  • 二進位轉換十進位,十進位轉換二進位
    如果把一個十進位的數轉換成二進位的數 , 直接把數除 以二 , 餘數為一就寫1 , 整除 , 就寫0 , 一直除完為止
  • 計算機的語言——二進位,十進位、八進位、十六進位與二進位之間的轉換
    而C程序代碼中的整數常量,為了書寫方便,用十進位、八進位、十六進位表示,比如:十進位整數123、-23、+99等。而無論十進位、八進位還是十六進位數據在計算機中表示是轉換成二進位編碼表示,計算機中只存在二進位。
  • scratch+程小奔機器人實現「進位轉換」(十進位轉二進位)
    進位轉換圖【原創】文章全部內容皆為作者原創,如有轉載請註明出處我們人類有十根手指,通常情況下我們在生活中的計數方式為「十進位」(即0-9),也就說滿十進一;而在計算機的世界裡,基礎電路只有「開/關(通/斷)」(即0/1)兩種情況,這與誕生幾千年的二進位不謀而合;例如:二進位數字110,表達的就是十進位中的6;二進位數字1111,表達的就是十進位中的15。
  • 計算機基礎進位轉換(二進位、八進位、十進位、十六進位)
    1.十進位轉R進位1.1 十進位轉二進位十進位整數轉二進位十進位整數轉換成二進位採用「除2倒取餘」,十進位小數轉換成二進位小數採用
  • 介紹一種二進位轉換成十進位的方法
    二進位如何轉換成十進位二進位轉換為十進位的簡便方法。
  • php學習之函數的封裝及二進位和十進位相互轉換案例
    案例:創建一個表單,輸入任意數字,讓其在二進位、十進位、十六進位之間互相轉換1.沒有封裝前的代碼實現封裝的意義在於一次寫成多次調用各進位和其他進位的相互轉換函數decbin():十進位轉二進位函數`dechex():十進位轉八進位
  • 十進位數與二進位數的相互轉化
    最近,高二年級中有n多個同學問我:「老師,怎樣將十進位數轉化為二進位數呢?如果轉化為八進位數呢?」
  • 二進位轉換為十進位和十進位轉換為二進位的方法
    各位小夥伴們大家好,在之前的文章中小編也介紹了關於二進位轉十進位的方法,這次小編知道了一個更簡單的方法,具體如下:比如我們要把28轉為二進位:28轉換為2進位先用2的n次方來表示28這個數,然後用2的n次方乘以1或者乘以0,相加來湊成與之相等的數,得到的1或者是0,根據這個表格,從左往右把二進位數字湊在一起,11100就是28的二進位了。
  • 二進位、八進位、十進位、十六進位之間的轉換
    反過來,當我們看到 FD時,如何迅速將它轉換為二進位數呢?先轉換F:        看到F,我們需知道它是15(可能你還不熟悉A~F這六個數),然後15如何用8421湊呢?應該是8 + 4 + 2 + 1,所以四位全為1 :1111。接著轉換 D:        看到D,知道它是13,13如何用8421湊呢?