Question

我有一个表单，用户输入一个十进制数字，然后从他选择的下拉菜单中选择是否要通过单击转换按钮将其转换为二进制，八进制或十六进制。新答案应以新形式显示，例如：＆＃34;二进制数字是......＆＃34;。但是，我所做的代码似乎并不起作用。任何帮助将受到高度赞赏。这是我到目前为止的代码：

   <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="answer">
        <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>

Answer 1

十进制到hex / oct / bin：

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

同样倒退：

var dec = parseInt("64",16);      // 100
var dec = parseInt("144",8);      // 100
var dec = parseInt("1100100",2);  // 100

Answer 2

这里有一些很棒的代码我刚刚在二进制，八进制，十进制和十六进制之间进行转换：

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">

小而简单，适合任何想要找到这种类型的人。

Answer 3

您可以直接将您的值转换为二进制，八进制和十六进制，如此

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);
    }
}

Answer 4

如果要将数字转换为十六进制表示，可以使用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="answer" id="answer">
      </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("answer").innerHTML = val.toString(radix);
             e.preventDefault();
             return false;
          }
         document.getElementById("button1").addEventListener("click",Answer);
         </script>
      </body>
   </html>

Answer 5

我看到了一些错误

它不是getElementbyId ==＆gt;是getElementById，糟糕的使用上下文（this）...在你的函数中答案（this）指向按钮..我认为你需要改变输入上的值，对吧

试试这个：

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 =＆＃39;输入＆＃39;到HTML部分的输入

在javascript中从十进制转换为八进制，二进制和十六进制

5 个答案: