Kalkulator arytmetyczny międzysystemowy

Jak wstawić gadżet na własną stronę?

Można to zrobić ręcznie lub pobrać gotowca i go edytować jak dusza zapragnie.

Tworzymy odpowiednie pliki:

index.html
style.css
main.js

index.html

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <meta charset="UTF-8">
  <title>Kalkulator arytmetyczny</title>
</head>

<body>

  <div class="calculator">
    <h2 class="covid">Kalkulator arytmetyczny</h2>
    <div class="choose">
      <p>Pierwsza liczba w systemie:</p>
      <form>
        <label> <input class="ip" id="bin" type="radio" name="input" value="bin" onclick="setr();dis();disbutton();">
          <span>Binarnym</span></label>
        <label> <input class="ip" id="oct" type="radio" name="input" value="oct" onclick="setr();dis();disbutton();">
          <span>Ósemkowym</span> </label>
        <label> <input class="ip" id="dec" type="radio" name="input" value="dec"
            onclick="setr();dis();disbutton();"><span>Dziesiętnym</span> </label>
        <label> <input class="ip" id="hex" type="radio" name="input" value="hex" onclick="setr();dis();disbutton();">
          <span>Szesnastkowym</span> </label>
      </form>
      <p>Druga liczba w systemie:</p>
      <form>
        <label> <input class="ip" id="opbin" type="radio" name="input" value="bin"> <span>Binarnym</span> </label>
        <label> <input class="ip" id="opoct" type="radio" name="input" value="oct"> <span>Ósemkowym</span> </label>
        <label> <input class="ip" id="opdec" type="radio" name="input" value="dec"> <span>Dziesiętnym</span> </label>
        <label> <input class="ip" id="ophex" type="radio" name="input" value="hex"> <span>Szesnastkowym</span> </label>
      </form>
      <p>Wynik w systemie:</p>
      <form>
        <label> <input class="ip" id="fbin" type="radio" name="input" value="bin"> <span>Binarnym</span> </label>
        <label> <input class="ip" id="fdec" type="radio" name="input" value="oct"> <span>Ósemkowym</span> </label>
        <label> <input class="ip" id="foct" type="radio" name="input" value="dec"><span>Dziesiętnym</span> </label>
        <label> <input class="ip" id="fhex" type="radio" name="input" value="hex"> <span>Szesnastkowym</span> </label>
      </form>
      <p>Operacja do wykonania:</p>
      <form>
        <label> <input class="ip" id="add" type="radio" name="input" value="Add"><span>Dodawanie</span> </label>
        <label> <input class="ip" id="sub" type="radio" name="input" value="Subtract"><span>Odejmowanie</span> </label>
        <label> <input class="ip" id="mul" type="radio" name="input" value="Multiply"><span>Mnożenie</span>
        </label>
        <label> <input class="ip" id="div" type="radio" name="input" value="Divide"><span>Dzielenie</span> </label>
      </form>
    </div>
    <br />

    <form id="format">
      <input class="box input" id="box1" type="text" placeholder="Pierwsza cyfra" onclick="" /><br />
      <input class="box input" id="box2" type="text" placeholder="Druga cyfra" />
    </form>



    <form class="button">
      <input type="button" class="clear" value="Wykonaj" onclick="process();" />
      <input type="button" class="clear" value="Wyczyść" onclick="clr();" />
    </form>
    <div class="ans">
      Wynik &#61; <span id="ans"></span>
    </div>

    <br />


    <h1 class="title">Konwerter Binarny, Decimal i Hex</h1>
    <div class="container">
      <div class="section">
        <div class="heading">
          <h2 style="text-align: center;">Binary</h2>

        </div>
        <input type="text" name="binary" id="binary">
        <div class="btns">
          <button class="btn" id="bToD">Na Decimal</button>
          <button class="btn" id="bToH">Na Hex</button>
        </div>
        <span class="output selectable" id="bOutput"></span>
      </div>
      <div class="section">
        <div class="heading">
          <h2 style="text-align: center;">Decimal</h2>

        </div>
        <input type="text" name="decimal" id="decimal">
        <div class="btns">
          <button class="btn" id="dToB">Na Binary</button>
          <button class="btn" id="dToH">Na Hex</button>
        </div>
        <span class="output selectable" id="dOutput"></span>
      </div>
      <div class="section">
        <div class="heading">
          <h2 style="text-align: center;">Hexa-decimal</h2>

        </div>
        <input type="text" name="hexadecimal" id="hexadecimal">
        <div class="btns">
          <button class="btn" id="hToB">Na Binary</button>
          <button class="btn" id="hToD">Na Decimal</button>
        </div>
        <span class="output selectable" id="hOutput"></span>
      </div>
    </div>



  </div>



  <div class="wrapper">

    <div class="content">
      <p class="fucking">Konwerter Tekstu (ASCII) na tekst Binarny</p>
      <div class="human">
        <p class="fucking-2">Wprowadź tekst</p>
        <div class="face">

        </div>
        <div class="io" contenteditable="true"></div>
      </div>
      <div class="machine">
        <p class="fucking-2">Wynik Binarny</p>
        <div class="face">

        </div>
        <div class="io" contenteditable="true"></div>
      </div>

    </div>

  </div>


  <script src="main.js"></script>
  <h5 style=" text-align: center; margin-top: 200px; color: white;">
Copyright &#169; www.skrip.pl<br />
    <script language="JavaScript" type="text/javascript">
      document.write("Ostatnia modyfikacja:  " + document.lastModified);
    </script>
  </h5>
</body>

</html>

style.css

@import url(https://fonts.googleapis.com/css?family=Droid+Sans+Mono);
body {
  font-family: 'Arial', sans-serif;
  background-color: #cccccc;
}
.wrapper {
  width: 750px;
  height: 560px;
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}
.content {
  position: relative;
  width: 750px;
  height: 560px;
  border-radius: 10px;
  position: relative;
  text-align: center;
}
.content::after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.content .fucking {
  font-size: 24px;
  font-weight: 800;
  margin-top: 100px;
}
.fucking-2 {
  border-bottom: 1px solid rgb(89, 131, 114);
  text-align: center;
}
::-webkit-scrollbar {
  width: 0px;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
.human, .machine {
  float: left;
  width: 50%;
  line-height: 1.5;
  overflow: scroll;
}
.human .io, .machine .io {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px 10px 70px 20px;
  height: 550px;
  display: block;
  outline: none;
  overflow-y: scroll;
  margin: 0 10px;
}
.human .io::-webkit-scrollbar, .machine .io::-webkit-scrollbar {
  width: 5px;
}
.human .io::-webkit-scrollbar-thumb, .machine .io::-webkit-scrollbar-thumb {
  border-radius: 3px;
}
.human:after, .machine:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.human {
  background-color: #ddd;
  font-size: 16px;
  border-radius: 3px 0 0 3px;
}
.machine {
  background-color: #18191b;
  color: #00FF99;
  border-radius: 0 3px 3px 0;
}
.machine .io {
  font-size: 11px;
}
.calculator {
  width: 700px;
  padding: 20px;
  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  background-color: #F5F5F5;
  box-shadow: 0px 1px 15px 0px rgba(0, 0, 0, 0.6);
  margin: 0 auto;
}
.covid {
  text-align: center;
  border-bottom: 1px solid #16161D;
}
.choose {
  font-size: 16px !important;
  letter-spacing: 0px;
}
.choose p {
  font-size: 20px;
}
.input {
  border: 1px solid #ddd;
  border-radius: 1px;
  height: 50px;
  width: 430px;
  margin: 5px;
  font-size: 16px;
  outline: none;
  overflow-x: auto;
  transition: all .2s ease-in-out;
}
.input:hover {
  border: 1px solid #bbb;
  -webkit-box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
}
.button input {
  display: inline-block;
  border: 1px solid #ddd;
  border-radius: 1px;
  height: 60px;
  width: 47.9%;
  font-size: 16px;
  text-align: center;
  padding: 10px;
  margin: 10px 4px 10px 0;
  cursor: pointer;
  background-color: #EEEEEE;
  transition: border-color .2s ease-in-out, background-color .2s, box-shadow .2s;
}
.button input:hover {
  background-color: #f1f1f1;
  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  border-color: #bbb;
}
.button input:active {
  font-weight: bold;
}
.ans {
  padding: 6px;
  word-wrap: break-word;
  width: 100%;
  height: 60px;
  background-color: #16161D;
  color: #00FF99;
  margin-top: 20px;
}
form {
  display: flex;
  order: 6;
}
label {
  cursor: pointer;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  margin-bottom: 0.375em;
}
label input {
  position: absolute;
  left: -9999px;
}
label input:checked + span {
  background-color: #d6d6e5;
}
label input:checked + span:before {
  box-shadow: inset 0 0 0 0.4375em #00005c;
}
label span {
  display: flex;
  align-items: center;
  padding: 0.375em 0.75em 0.375em 0.375em;
  border-radius: 99em;
  transition: 0.25s ease;
}
label span:hover {
  background-color: #d6d6e5;
}
label span:before {
  display: flex;
  flex-shrink: 0;
  content: "";
  background-color: #fff;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  margin-right: 0.375em;
  transition: 0.25s ease;
  box-shadow: inset 0 0 0 0.125em #00005c;
}
.output {
  overflow: scroll;
  margin-bottom: 1em !important;
  font-size: 1rem;
  color: #00FF99;
  width: 100%;
  height: 40px;
  background-color: #16161D;
}
.section input {
  outline: none;
}
.output::-webkit-scrollbar {
  width: 1px !important;
}
/* Handle */
.output::-webkit-scrollbar-thumb {
  background: #00FF99;
}
/* Handle on hover */
.output::-webkit-scrollbar-thumb:hover {
  background: rgb(125, 179, 155);
}
.section {
  display: flex;
  flex-direction: column;
  width: 200px;
}
.title {
  text-align: center;
}
.container {
  display: flex;
  flex-direction: row;
  justify-items: center;
  justify-content: space-evenly;
}
@media only screen and (max-width: 800px) {
  .container {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
  }
  h1, h2 {
    font-size: 1.1rem;
  }
}
.btn {
  padding: 10px 5px;
  font-size: 1rem;
  background: rgb(50, 101, 196);
  color: rgba(255, 255, 255, 0.726);
  outline: none;
  border: none;
  margin: .4em 0;
  width: 100%;
  transition: background-color .2s ease-in-out;
}
.btn:last-child {
  background: rgb(39, 66, 155);
}
.btn:hover {
  background: rgb(139, 156, 214);
  color: rgba(0, 0, 0, 0.788);
}
.btns {
  display: flex;
  width: 100%;
}
.selectable {
  -webkit-touch-callout: all; /* iOS Safari */
  -webkit-user-select: all; /* Safari */
  -khtml-user-select: all; /* Konqueror HTML */
  -moz-user-select: all; /* Firefox */
  -ms-user-select: all; /* Internet Explorer/Edge */
  user-select: all; /* Chrome and Opera */
}
@media only screen and (max-width: 600px) {
  .calculator {
    width: 90%;
    height: auto;
  }
  .choose p {
    font-size: 16px;
  }
  form span {
    font-size: 12px;
  }
  .human, .machine {
    height: 400px;
  }
}

main.js

// JavaScript Document
// www.skrip.pl
var UI = {
    human : {
        io      : document.querySelector('.human .io'),
        figure  : document.querySelector('.human .face')
    },
    machine : {
        io      : document.querySelector('.machine .io'),
        figure  : document.querySelector('.machine .face')
    }
};


var App = {

    init : function () {
        this.bindEvents();
        UI.human.io.textContent = "www.skrip.pl"
        UI.machine.io.innerHTML = this.toBinary( UI.human.io.textContent );
    },

    bindEvents : function () {
        var _this = this;

        helpers.addEvent(UI.human.io, "keyup", function (ev) {
           
           
            UI.machine.io.innerHTML = _this.toBinary( UI.human.io.textContent );
        });

        helpers.addEvent(UI.machine.io, "keyup", function (ev) {
           
            UI.human.io.innerHTML = _this.toHuman( UI.machine.io.textContent );
        });
    },

    toBinary : function (text) {
        var _this   = this,
            length  = text.length,
            binary  = "";
        for (var i = 0; i < length; i += 1) {
            binary += _this.pad( (text.charCodeAt(i)).toString(2) ) + " ";
        }
        return binary;
    },

    toHuman : function (text) {
        var arr = text.trim().split(/\s+/ig),
            result = "";
        arr.forEach(function(a) {
            result += String.fromCharCode( parseInt( a, 2 ));
        });
        return result;
    },

    pad : function (number) {
        var eight = number;
        while (eight.length < 8) {
            eight = '0' + eight;
        }
        return eight;
    }
};

var helpers = {
    addEvent : function (obj, type, fn) {
        if (obj.addEventListener) {
            obj.addEventListener(type, fn, false);
        } else if (obj.attachEvent) {
            obj['e' + type + fn] = fn;
            obj[type + fn] = function() {
                obj['e' + type + fn](window.event);
            };
            obj.attachEvent("on" + type, obj[type + fn]);
        }
    },
    triggerEvent : function (el, type) {
        if ((el[type] || false) && typeof el[type] == 'function') {
            el[type](el);
        }
    }
};

App.init();




function process() {
    if (document.getElementById("bin").checked) {
        handle_bin()
    } else if (document.getElementById("dec").checked) {
        handle_dec()
    } else if (document.getElementById("hex").checked) {
        handle_hex()
    } else if (document.getElementById("oct").checked) {
        handle_oct()
    }
}

function handle_bin() {
    var x;
    x = converttodec(2, 1);
    if (document.getElementById("opdec").checked) {
        var y;
        y = converttodec(10, 2)
    } else if (document.getElementById("ophex").checked) {
        var y;
        y = converttodec(16, 2)
    } else if (document.getElementById("opoct").checked) {
        var y;
        y = converttodec(8, 2)
    } else if (document.getElementById("opbin").checked) {
        var y;
        y = converttodec(2, 2)
    }
    output(x, y)
}

function handle_dec() {
    var x;
    x = converttodec(10, 1);
    if (document.getElementById("opdec").checked) {
        var y;
        y = converttodec(10, 2)
    } else if (document.getElementById("ophex").checked) {
        var y;
        y = converttodec(16, 2)
    } else if (document.getElementById("opoct").checked) {
        var y;
        y = converttodec(8, 2)
    } else if (document.getElementById("opbin").checked) {
        var y;
        y = converttodec(2, 2)
    }
    output(x, y)
}

function handle_hex() {
    var x = converttodec(16, 1);
    if (document.getElementById("opdec").checked) {
        var y;
        y = converttodec(10, 2)
    } else if (document.getElementById("ophex").checked) {
        var y;
        y = converttodec(16, 2)
    } else if (document.getElementById("opoct").checked) {
        var y;
        y = converttodec(8, 2)
    } else if (document.getElementById("opbin").checked) {
        var y;
        y = converttodec(2, 2)
    }
    output(x, y)
}

function handle_oct() {
    var x;
    x = converttodec(8, 1);
    if (document.getElementById("opdec").checked) {
        var y;
        y = converttodec(10, 2)
    } else if (document.getElementById("ophex").checked) {
        var y;
        y = converttodec(16, 2)
    } else if (document.getElementById("opoct").checked) {
        var y;
        y = converttodec(8, 2)
    } else if (document.getElementById("opbin").checked) {
        var y;
        y = converttodec(2, 2)
    }
    output(x, y)
}

function converttobin(r, option) {
    if (option == 1) var no = document.getElementById("box1");
    else if (option == 2) var no = document.getElementById("box2");
    var y = parseInt(no.value, r);
    var z = y.toString(2);
    return z
}

function converttodec(r, option) {
    if (option == 1) var no = document.getElementById("box1");
    else if (option == 2) var no = document.getElementById("box2");
    var y = parseInt(no.value, r);
    var z = y.toString(10);
    return z
}

function converttohex(r, option) {
    if (option == 1) var no = document.getElementById("box1");
    else if (option == 2) var no = document.getElementById("box2");
    var y = parseInt(no.value, r);
    var z = y.toString(16);
    return z
}

function converttooct(r, option) {
    if (option == 1) var no = document.getElementById("box1");
    else if (option == 2) var no = document.getElementById("box2");
    var y = parseInt(no.value, r);
    var z = y.toString(8);
    return z
}

function output(x, y) {
    var a = parseInt(x);
    var b = parseInt(y);
    var z;
    if (document.getElementById("add").checked) z = a + b;
    else if (document.getElementById("sub").checked) z = a - b;
    else if (document.getElementById("mul").checked) z = a * b;
    else if (document.getElementById("div").checked) z = a / b;
    if (document.getElementById("fdec").checked) {
        var fans = document.getElementById("ans");
        fans.innerHTML = z
    } else if (document.getElementById("fhex").checked) {
        var ans = z.toString(16);
        var fans = document.getElementById("ans");
        fans.innerHTML = ans
    } else if (document.getElementById("foct").checked) {
        var ans = z.toString(8);
        var fans = document.getElementById("ans");
        fans.innerHTML = ans
    } else if (document.getElementById("fbin").checked) {
        var ans = z.toString(2);
        var fans = document.getElementById("ans");
        fans.innerHTML = ans
    }
}

function clr() {
    var fans = document.getElementById("ans");
    var b1 = document.getElementById("box1");
    var b2 = document.getElementById("box2");
    fans.innerHTML = "";
    b1.value = "";
    b2.value = ""
}









let binaryOutput = document.querySelector('#binary');
let decimalOutput = document.querySelector('#decimal');
let hexOutput = document.querySelector('#hexadecimal');

document.querySelector('#bToD').addEventListener('click', () => convertBit(binaryOutput.value, 'bOutput', 'binary', 'decimal'));
document.querySelector('#bToH').addEventListener('click', () => convertBit(binaryOutput.value, 'bOutput', 'binary', 'hex'));
document.querySelector('#dToB').addEventListener('click', () => convertBit(decimalOutput.value, 'dOutput', 'decimal', 'binary'));
document.querySelector('#dToH').addEventListener('click', () => convertBit(decimalOutput.value, 'dOutput', 'decimal', 'hex'));
document.querySelector('#hToB').addEventListener('click', () => convertBit(hexOutput.value, 'hOutput', 'hex', 'binary'));
document.querySelector('#hToD').addEventListener('click', () => convertBit(hexOutput.value, 'hOutput', 'hex', 'decimal'));
function selectText(containerid) {
    if (document.selection) { // IE
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(containerid));
        range.select();
    } else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(document.getElementById(containerid));
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
    }
}
function convertBit(src, output, from, to) {
    switch (from) {
        case 'binary':
            document.getElementById(output).textContent = to === 'decimal' ? binToDec(src) : binToHex(src);
            break;
        case 'decimal':
            document.getElementById(output).textContent = to === 'binary' ? decToBin(src) : decToHex(src);
            break;
        case 'hex':
            document.getElementById(output).textContent = to === 'binary' ? hexToBin(src) : hexToDec(src);
            break;
    }
}

function binToDec(src) {
    let answer = 0;
    let n = 0;
    let srcString = src.toString();
    
    for (let i = srcString.length - 1; i >= 0; i--) {
        answer += srcString[i] * 2 ** n;
        n++;
    }

    return answer;
}

function binToHex(src) {
    const baseMap = {
        '0000': '0',
        '0001': '1',
        '0010': '2',
        '0011': '3',
        '0100': '4',
        '0101': '5',
        '0110': '6',
        '0111': '7',
        '1000': '8',
        '1001': '9',
        '1010': 'A',
        '1011': 'B',
        '1100': 'C',
        '1101': 'D',
        '1110': 'E',
        '1111': 'F'
    };

    let i;
    let answer = '';
    let rem = '';
    const len = 4;
    const srcString = src.toString();

    for (i = srcString.length; i >= len; i -= len) {
        if (i - len < srcString.length) {
            answer = baseMap[srcString.substr(i - len, len)] + answer;
        }
    }
    
    if (i !== 0) {
        rem = srcString.substr(0, i);
        while (rem.length < 4) {
            rem = '0' + rem;
        }
        answer = baseMap[rem] + answer;
    }

    return answer;
}

function decToBin(src) {
    let n = 0;
    let answer = '';

    while (2 ** (n) < src) n++;
    
    for (n; n >= 0; n--) {
        if (2 ** n <= src) {
            answer += '1';
            src = src % 2 ** n;
        } else {
            answer += answer === '' ? '' : '0';
        }
    }
    return answer;
}

function decToHex(src) {
    const baseMap = {
        '0': '0',
        '1': '1',
        '2': '2',
        '3': '3',
        '4': '4',
        '5': '5',
        '6': '6',
        '7': '7',
        '8': '8',
        '9': '9',
        '10': 'A',
        '11': 'B',
        '12': 'C',
        '13': 'D',
        '14': 'E',
        '15': 'F'
    };

    let n = 0;
    let answer = '';
    const base = 16;

    while (base ** (n + 1) < src) n++;

    for (n; n >= 0; n--) {
        if (base ** n <= src) {
            answer += baseMap[Math.floor(src / base ** n).toString()];
            src = src - Math.floor(src / base ** n) * (base ** n);
        } else {
            answer += '0';
        }
    }
    
    return answer;
}

function hexToBin(src) {
    const baseMap = {
        '0': '0000',
        '1': '0001',
        '2': '0010',
        '3': '0011',
        '4': '0100',
        '5': '0101',
        '6': '0110',
        '7': '0111',
        '8': '1000',
        '9': '1001',
        'A': '1010',
        'B': '1011',
        'C': '1100',
        'D': '1101',
        'E': '1110',
        'F': '1111'
    };

    let srcString = src.toString().toUpperCase();
    let answer = '';

    for (let i = 0; i < srcString.length; i++) {
        answer += baseMap[srcString[i]];
    }
    
    return answer;
}

function hexToDec(src) {
    const baseMap = {
        '0': '0',
        '1': '1',
        '2': '2',
        '3': '3',
        '4': '4',
        '5': '5',
        '6': '6',
        '7': '7',
        '8': '8',
        '9': '9',
        'A': '10',
        'B': '11',
        'C': '12',
        'D': '13',
        'E': '14',
        'F': '15'
    };

    let srcString = src.toString().toUpperCase();
    let answer = 0;

    for (let i = 0; i < srcString.length; i++) {
        answer += baseMap[srcString[i]] * (16 ** (srcString.length - 1 - i))
    }

    return answer;
}

Top Stories

Jak nie zostać ofiarą oszustów. Sposób na rozpoznanie fałszywego maila

Wangiri scam – jak nie zostać ofiarą

Statystyki wyszukiwarki PornHub za 2024 rok

Kalkulator arytmetyczny międzysystemowy

Prosty kalkulator do działań pomiędzy systemem dziesiętnym (Decimal), szesnastkowym (Hexa-decimal) i dwójkowym (Binary).

Kalkulator arytmetyczny międzysystemowy

Kalkulator arytmetyczny

Konwerter Binarny, Decimal (Dziesiętny) i Hexa-decimal (Szesnastkowy)

Binary

Decimal

Hexa-decimal

Jak wstawić gadżet na własną stronę?

index.html

style.css

main.js

Gotowiec do pobrania

Chmurka tagów

Zaprzyjaźniona strona

Najczęściej oglądane wpisy