在javascript中从十进制到八进制,二进制和十六进制的转换

Conversion from Decimal to octal, binary and hexadecimal in javascript

本文关键字:二进制 十六进制 转换 八进制 javascript 十进制      更新时间:2023-09-26

我有一个表单,用户在其中输入一个十进制数,然后从下拉菜单中选择是否要通过单击转换按钮将其转换为二进制、八进制或十六进制。新答案应以新形式显示,例如:"二进制中的数字是......"。但是,我所做的代码似乎不起作用。任何帮助将不胜感激。这是我到目前为止的代码:

   <html>
    <head>
        <title> Convertor </title>

<style>
  .panel {
    width:400px;
    height:160px;
    background-color: #E6E6FA;
    border:2px solid blue;  
    font-weight: bold;
    font-size: 110%;   
    margin-left:30px;
    margin-top:15px; 
   }    
   p {
    margin-left: 30px;
    margin-top: 15px;
   }
   form {
    margin-left: 30px;
    margin-top: 15px;
   }
   button {
    margin-left:40px;
    margin-top:10px;
   }

   .answer {
    width:400px;
    height:90px;
    background-color: #E6E6FA;
    border:2px solid blue;  
    font-weight: bold;
    font-size: 110%;   
    margin-left:30px;
    margin-top:15px; 
   }    
   form {
    margin-left: 70px;
    margin-top: 65px;
   }

</style>

</head>
<body>
    <div class="panel">
        <p>
            Enter decimal number to convert, select Base and click CONVERT.
        </p>
        <form>
            <input type="text">

        <select id="selectid" name="selectname">
            <option value="binary">Binary</option>
            <option value="octal">Octal</option>
            <option value="hexadecimal">Hexadecimal</option>
        </select>   
        <button id="button1" name="Button1" onclick="Answer()"> Convert 
            </button>   
            </form>

    </div>
    <div class="answerswer">
        <form>

        </form>
    </div>
    <script>

    function Answer() {
        if (document.getElementbyId ('selectid').value=="binary") {
            this.value=this.value.toString(2);
        }
        else if  (document.getElementbyId ('selectid').value=="octal") {
            this.value=this.value.toString(8);
        }
        else if  (document.getElementbyId ('selectid').value=="hexadecimal") {
            this.value=this.value.ToString(16);
        }
    }
    </script>
</body>

十进制到 hex/oct/bin

const hex = (100).toString(16);     // "64"
const oct = (100).toString(8);      // "144"
const bin = (100).toString(2);      // "1100100"

和相同的反向:

const dec0 = parseInt("64", 16);     // 100
const dec1 = parseInt("144", 8);     // 100
const dec2 = parseInt("1100100", 2); // 100

这是我刚刚制作的一些很棒的代码,用于在二进制、八进制、十进制和十六进制之间进行转换:

function id(id) {
  return document.getElementById(id);
}
function Convert(s, n) {
  if(parseInt(id(s).value, n)) {
    if("bin" != s) { id("bin").value = parseInt(id(s).value, n).toString(2) }
    if("oct" != s) { id("oct").value = parseInt(id(s).value, n).toString(8) }
    if("dec" != s) { id("dec").value = parseInt(id(s).value, n).toString(10) }
    if("hex" != s) { id("hex").value = parseInt(id(s).value, n).toString(16) }
  } else {
    if("bin" != s) { id("bin").value = "" }
    if("oct" != s) { id("oct").value = "" }
    if("dec" != s) { id("dec").value = "" }
    if("hex" != s) { id("hex").value = "" }
  }
}
<input id="bin" oninput="Convert('bin', 2)" placeholder="bin" spellcheck="false">
<input id="oct" oninput="Convert('oct', 8)" placeholder="oct" spellcheck="false">
<input id="dec" oninput="Convert('dec', 10)" placeholder="dec" spellcheck="false">
<input id="hex" oninput="Convert('hex', 16)" placeholder="hex" spellcheck="false">

小巧而简单,非常适合任何试图找到这种东西的人。

如果要将数字转换为十六进制表示形式,可以使用toString方法。toString 的第一个参数可以是数字的基数。例:

var n = 12;
n.toString(); // "c"

如果你想转换回来,你可以使用parseInt...

var hexnum = "c";
parseInt(hexnum,16); // 12

这些函数适用于任何基数。

以下是完整的源代码:

<html>
   <head>
      <title> Convertor </title>
      <style>
         .panel {
           width:400px;
           height:160px;
           background-color: #E6E6FA;
           border:2px solid blue;  
           font-weight: bold;
           font-size: 110%;   
           margin-left:30px;
           margin-top:15px; 
         }    
         p {
           margin-left: 30px;
           margin-top: 15px;
         }
         form {
           margin-left: 30px;
           margin-top: 15px;
         }
         button {
           margin-left:40px;
           margin-top:10px;
         }
         .answer {
           width:400px;
           height:90px;
           background-color: #E6E6FA;
           border:2px solid blue;  
           font-weight: bold;
           font-size: 110%;   
           margin-left:30px;
           margin-top:15px; 
         }    
         form {
           margin-left: 70px;
           margin-top: 65px;
         }
      </style>
   </head>
   <body>
      <div class="panel">
         <p>
            Enter decimal number to convert, select Base and click   CONVERT.
         </p>
         <input type="text">
         <select id="selectid" name="selectname">
            <option value="binary">Binary</option>
            <option value="octal">Octal</option>
            <option value="hexadecimal">Hexadecimal</option>
         </select>
         <button id="button1" name="Button1">Convert</button>   
      </div>
      <div class="answerswer" id="answerswer">
      </div>
      <script>
         var Answer = function(e) {
             var radix;
             var radixStr = document.getElementById('selectid').value;
             var val = parseInt(document.getElementsByTagName("input")[0].value);
             switch(radixStr) {
               case "binary":
                 radix = 2;
                 break;
               case "octal":
                 radix = 8;
                 break;
               case "hexadecimal":
                 radix = 16;
                 break;
             } 
             document.getElementById("answerswer").innerHTML = val.toString(radix);
             e.preventDefault();
             return false;
          }
         document.getElementById("button1").addEventListener("click",Answer);
         </script>
      </body>
   </html>

你可以像这样直接将你的值转换为二进制、八进制和十六进制

function Answer() {
    if (document.getElementbyId ('selectid').value=="binary") {
        this.value = this.value.toString(2);
    }
    else if  (document.getElementbyId ('selectid').value=="octal") {
        this.value = this.value.toString(8);
    }
    else if  (document.getElementbyId ('selectid').value=="hexadecimal") {
        this.value = this.value.toString(16);
    }
}

我看到一些错误

它不是getElementbyId ==> is getElementById,上下文使用不当(这)...在您的函数中答案(此)指向按钮..我认为您需要更改输入上的值,对

试试这个:

function Answer(e) {
    e.preventDefault();
    var input = document.getElementById('input');
    if (document.getElementById('selectid').value ==="binary") {
        input.value = Number(input.value).toString(2);
    }
    else if  (document.getElementById('selectid').value ==="octal") {
        input.value = Number(input.value).toString(8);
    }
    else if  (document.getElementById('selectid').value ==="hexadecimal") {
        input.value = Number(input.value).toString(16);
    }
}   

注意:将 id='input' 添加到 HTML 部分的输入中