从十进制到十六进制

时间:2018-06-21 09:44:36

标签: javascript html

有人可以帮我吗 有这个问题吗?从十进制到二进制已经可以工作,但是我无法从十进制到十六进制工作。

我对这段代码有疑问:var ant2 = som2 *(gewenstgetal / 4);其余的都在工作,但我无法正常工作,如果有人可以帮助我,这将非常有帮助

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;
    var ant2 = som2 * (gewenstgetal / 4);

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


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

0 个答案:

没有答案