从十进制到十六进制,不带toString()

时间:2018-06-21 11:27:58

标签: javascript

有人可以帮我吗 有这个问题吗?从十进制到二进制已经可以工作,但是我无法从十进制到十六进制工作。我不允许使用toString,所以我不知道该怎么办,有人有什么建议吗?那将非常有帮助!我看过其他文章,但他们在谈论toString,但不允许使用它,因为使用它太容易了。

function omzetten() {
  var invoer = document.getElementById('omzettenInvoer').value;
  var talstelselVan = document.getElementById('omvettenVan').value;
  var gewenstgetal = document.getElementById('gewenstgetal').value;
  var waarde = 1;
  var positie = invoer.length - 1;
  var som = 0;
  while(positie >= 0) {
    var cijfer = invoer.charAt(positie);
	var poswaarde;
if(cijfer == "a") {
  poswaarde = 10 * waarde
} else if(cijfer == "b") {
  poswaarde = 11 * waarde
} else if(cijfer == "c"){
  poswaarde = 12 * waarde
} else if(cijfer == "d") {
  poswaarde = 13 * waarde
} else if(cijfer == "e") {
  poswaarde = 14 * waarde
} else if(cijfer == "f") {
  poswaarde = 15 * waarde
} else {
    poswaarde = cijfer * waarde;
}
	som = som + poswaarde;
    positie--;
    waarde = waarde * talstelselVan;
    var som2 = som * gewenstgetal;
	
	//code for output2 here
	

  document.getElementById('output1').value = som;
    //document.getElementById('output2').value = ant2;

}}
/*phone*/
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
.topnav {
    background-color: #10689A;
    overflow: hidden;
}
#calcie {
  margin-left: 19.5vw !important;
  text-align: center;
  background-color: grey;
  border: solid grey;
  width: 50vw;
  border-radius: 2em;
}
input[type="text"] {
  width: 40vw !important;
}
header {
  display: none;
}
#bobies {
  width: 20vw;
  position: absolute;
  margin-left: 40vw;

}
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    background-color: #10689A;
    color: black;
}


.active {
    background-color: #4CAF50;
    color: white;
}

.topnav .icon {
    display: none;
}
#desktop {
	display:none;
}
#home{
    margin-left: 2vw;
}
#logo {
margin-top: 20%;
position:absolute;
}

#welkomstekst{
    background-color: #10689A;
    width: 70vw;
    margin-left: 15vw;
    text-align: center;
    padding: 20px;
    margin-top: 10vh;
    line-height: 1.9;
    border-radius: 2em;
}

#welkomstekst p{
    color: white;
    font-size: 5vw;
}

#toekomstreferencie{
    width: 40vw;
    height: 10vh;
    margin-left: 28vw;
    margin-top: 3vh;
    background-color: #10689A;
    border-radius: 2em;
    margin-bottom: .9em;

}

#toekomstreferencie button{
    width: 32vw;
    height: 4vh;
    margin-left: 4vw;
    margin-top: 3vh;
    border-radius: 2em;
}
header {
  width: 86.5vw;
  margin-left: 30%;
}
footer{
    margin-top: 10vw;
}
#biggie {
  max-width: 2vw;}}

/*Tablet*/
@media screen and (min-width: 601px) {
	#phone {
		display:none;
	}
#Navbar {
    background-color: #10689A;
    width: 99vw;
    height: 120px;
    min-width:: 500px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#Navbar a{
    color: white;
    font-size: 15px;
    margin-top: 30px;
    margin-right:10%;}

#Navbar img{
    width:5vw;
    height: 5vw;
    Margin-top: -5px;
}
#calcie {
  margin-left: 37.5vw !important;
  text-align: center;
  background-color: grey;
  border: solid grey;
  width: 14vw;
  border-radius: 2em;
}
input[type="text"] {
  width: 10vw !important;
}
#desktop {
  display: flex;
  flex-wrap: nowrap;}

#home{
        margin-left: 2vw;}


#logo {
	margin-top: 20%;
	position:absolute;
}

    #welkomstekst{
        background-color: #10689A;
        width: 50vw;
        margin-left: 25vw;
        text-align: center;
        padding: 20px;
        margin-top: 4vh;
        line-height: 1.9;
        border-radius: 2em;
    }

    #welkomstekst p{
        color: white;
        font-size: 2vw;
    }

    #toekomstreferencie{
        width: 15vw;
        height: 10vh;
        margin-left: 42vw;
        margin-top: 3vh;
        background-color: #10689A;
        border-radius: 2em;
        margin-bottom: .9em;

    }

    #toekomstreferencie button{
        width: 11vw;
        height: 4vh;
        margin-left: 2.0vw;
        margin-top: 3vh;
        border-radius: 2em;

    }
    header {
      width: 86.5vw;
      margin-left: 30%;
    }
    footer{
        margin-top: 10vw;
    }
    #biggie {
      max-width: 2vw;
    }
}
/*Desktop*/
@media screen and (min-width: 1250px) {
	#phone {
		display:none;
	}
#Navbar {
    background-color: #10689A;
    width: 99vw;
    height: 120px;
    min-width:: 500px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#Navbar a{
    color: white;
    font-size: 15px;
    margin-top: 30px;
    margin-right:10%;

}
#calcie {
  margin-left: 37.5vw !important;
  text-align: center;
  background-color: grey;
  border: solid grey;
  width: 13vw;
  border-radius: 2em;
}
input[type="text"] {
  width: 10vw !important;
}

#Navbar img{
    width:5vw;
    height: 5vw;
    Margin-top: -5px;
}
#desktop {
  display: flex;
  flex-wrap: nowrap;
}

    #home{
        margin-left: 2vw;
    }


#logo {
	margin-top: 20%;
	position:absolute;
}

    #welkomstekst{
        background-color: #10689A;
        width: 50vw;
        margin-left: 25vw;
        text-align: center;
        padding: 20px;
        margin-top: 4vh;
        line-height: 1.9;
        border-radius: 2em;
    }

    #welkomstekst p{
        color: white;
    }

    #toekomstreferencie{
        width: 15vw;
        height: 10vh;
        background-color: #10689A;
        border-radius: 2em;
        display: grid;
        grid-area: grid;
        grid-template-columns: auto;
        grid-template-areas: 'grid';
        margin-bottom: .9em;

    }


    #toekomstreferencie button{
        width: 7vw;
        height: 4vh;
        margin-left: 3.7vw;
        margin-top: 3vh;
        font-size: 1.2vw;
        border-radius: 2em;

    }
    header {
      width: 46.5vw;
      margin-left: 30%;
    }
    footer{
        margin-top: 10vw;
    }
    #biggie {
      max-width: 2vw;
    }
    #buttie {
      min-width: 9vw;
      margin-left: 3vw !important;
    }
}

/*HD (High defenition)*/
@media screen and (min-width: 1800px) {
  #bigmama1 {
    width: 20vw;
    height: 10vw;
    position: absolute;
  background-color: #10689A;
  margin-left: 19vw;
  margin-top: 4vw;
  padding-left: 1.3vw;
  }
  #bigmama2 {
    width: 11vw;
    height: 10vw;
    position: absolute;
  background-color: #10689A;
  margin-left: 24vw;
  margin-top: 20vw;
  }
  #id1{
    margin-left: 22vw;
    margin-top: 2vw;
    position: absolute;
  }
  #nassi,
  #nabr[type="text"] {
    max-width: 2vw;
  }
  #id2{
position: absolute;
margin-left: 26.5vw;
margin-top: 18vw;
  }
#output1 {
  margin-top: .5vw;
  width: 17.1vw !important;
  text-align: center;
  height: 7vw;
  overflow: auto;
}
	#phone {
		display:none;
	}
#Navbar {
    background-color: #10689A;
    width: 99vw;
    height: 120px;
    min-width:: 500px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#Navbar a{
    color: white;
    font-size: 15px;
    margin-top: 30px;
    margin-right:10%;
}
#calcie {
  margin-left: 24.5vw !important;
  text-align: center;
  background-color: grey;
  border: solid grey;
  width: 9vw;
  border-radius: 2em;
}
input[type="text"] {
  width: 7vw !important;
}
#Navbar img{
    width:5vw;
    height: 5vw;
    Margin-top: -5px;
}
#desktop {
  display: flex;
  flex-wrap: nowrap;
}

    #home{
        margin-left: 2vw;
    }
#logo {
	margin-top: 20%;
	position:absolute;
}

    #welkomstekst{
        background-color: #10689A;
        width: 50vw;
        margin-left: 25vw;
        text-align: center;
        padding: 20px;
        margin-top: 4vh;
        line-height: 1.9;
        border-radius: 2em;
    }

    #welkomstekst p{
        color: white;
    }
    #toekomstreferencie{
        width: 15vw;
        height: 8vh;
        background-color: #10689A;
        border-radius: 2em;
        display: grid;
        grid-area: grid;
        grid-template-columns: auto;
        grid-template-areas: 'grid';
        margin-bottom: .9em;

    }


    #toekomstreferencie button{
        width: 7vw;
        height: 4vh;
        margin-left: 3.7vw;
        margin-top: 3vh;
        font-size: 1.2vw;
        border-radius: 2em;

    }
    header {
      width: 46.5vw;
      margin-left: 36%;
    }
    footer{
        margin-top: 10vw;
    }
    #biggie {
      max-width: 2vw;
    }
    #buttie {
      min-width: 9vw;
      margin-left: 3vw !important;
    }
}



#bobie {
  width: 3vw !important;
}

.nav-item {
  padding-top: 1.4vw;
}
.dropdown {
  max-width: 10vw;
  float: right;
  padding-top: 1.7vw;
}

.Fibo{
     background-color: #10689A;
        width: 50vw;
        margin-left: 5vw;
        text-align: center;
        padding: 20px;
        margin-top: 4vh;
        line-height: 1.9;
        border-radius: 2em;
    }
#dReeksP{
color: white;
}

#dReeksF{
color: white;
}
#output2{
  margin-left: 12.9vw;
}
<!DOCTYPE HTML>
<html lang="en">
    <head>
	<script type="text/javascript" src="js/java.js"></script>
        <link href="CSS/style.css" rel="stylesheet" type="text/css">
		  <meta charset="UTF-8">
  <meta name="description" content="Opdracht">
  <meta name="keywords" content="Opdract">
  <meta name="author" content="Alexander & Ravi">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <header>
      	<div id="desktop">
      <ul  class="nav nav-tabs auto-fill">
        <li class="nav-item">
          <a class="nav-link active" href="index.html"><img id="bobie" src="IMG/calculatorlogo.png"></a>
        </li>
<li class="nav-item">
  <a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item">
  <a  class="nav-link active" href="#">Rad van fortuin</a>
  <li class="nav-item">
    <a  class="nav-link active" href="#">Shoot the pig</a>
  </li>
</li>
<div class="dropdown">
    <button  class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Rekenen
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
    <li><a href="#">Rekenpagina</a></li>
    <li><a href="#">Gevorderd rekenpagina</a></li>
    <li><a href="#">reeksen</a></li>
    <li><a href="#">Omrekenen</a></li>
</ul>
  </div>
  </ul>
</div>
</header>
    <body>
		<section id="phone">
      <img id="bobies" src="IMG/calculatorlogo.png">
<div class="topnav" id="myTopnav">
  <a href="index.html" class="active">Home</a>
  <a href="">Rekenpagina</a>
  <a href="">Gevordend Rekenpagina</a>
  <a href="">Reeksen</a>
  <a href="">Omrekenen</a>
  <a href="">Rad van fortuin</a>
  <a href="">Shoot the pig</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>
</section>
<div id="minis">
        <div id="welkomstekst">
			<p>Welkom bij <strong>Math-mate m2</strong> hier kan je:<br>
				lekker <strong>rekenen met hexa</strong></br>
			  eigen manier, heb je na het <strong>rekenen</strong></br>
			zin in wat ontspanning speel shoot the pig!</p>
            </div>
          </div>
        <div id="toekomstreferencie" ><button id="buttie" onclick="toggle_visibility('minis')" href="#slides" data-toggle="collapse">Hexa's</button></div>
        <div class="collapse" id="slides">
          <div class="container">
<h3 id="id1">Binair naar hexadecimaal</h3>
<div id="bigmama1">
<form>
	<input type="text" value"" id="omzettenInvoer" placeholder="Waarde" value="1010"/>
	<input type="number" value"" id="omvettenVan" placeholder="tal" value="2" />
	<button type="button" id="arie" value""  name="-->" disabled>--></button>
	<input type="text" value"" id="gewenstgetal" placeholder="tal"/>
	<button type="button" value="verzenden" onclick="omzetten()">Bereken</button></br>
	<input type="text" value"" id="output1"  name="input"/>
	<input type="text" value"" id="output2"  name="input"/>
</form>
</div>
<h3 id="id2">Factorizer</h3>
<div id="bigmama2">
  <form>
<input type="text" value"" id="getalie" placeholder="Hier invullen" name="input"/>
<button type="button" value="verzenden" onclick="he()">Bereken</button>
</form>
</div>
      </div>
      </div>
      <footer>
			<p> &copy; Ravi Breugom en Alexander wallaard</p>
	   </footer>
    </body>
</html>

1 个答案:

答案 0 :(得分:0)

我已经为您编写了一个解决方案,但是在复制和粘贴之前,请先阅读conversions的工作原理。

以下代码可用于2-36之间的任何基数,并且不使用.toString();


function dec2base(int, base) {
  let letters = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
  let returnVal = "";
  if (base > 1 && base < 37) {
    while (int != 0) {
      rest = int % base;
      int = Math.floor(int / base);
      returnVal = letters[rest] + returnVal;
    }
  }
  return returnVal;
}

console.log(dec2base(255, 16));