Как создать двоичный калькулятор с использованием HTML, CSS и JavaScript?

Опубликовано: 5 Января, 2022

HTML или язык разметки гипертекста вместе с CSS (каскадная таблица стилей) и JavaScript могут использоваться для разработки интерактивных пользовательских приложений, которые могут выполнять определенные функции. Точно так же двоичный калькулятор можно разработать с использованием HTML, CSS и JS вместе. Двоичный калькулятор выполняет арифметические операции с двоичными числами. Двоичный калькулятор имеет ограничение буфера в 8 бит. Если результат арифметической операции превышает 8 бит, посторонние биты усекаются. Арифметические операции выполняются с помощью функций JavaScript. Приложение состоит из экрана, на котором отображается ввод пользователя, а также результат арифметической операции. Две кнопки 0 и 1 используются для ввода. Кнопки +, -, *, / и Calculate используются для выполнения арифметических операций с вводом. Кнопка Calculate связана с функцией JavaScript calculate (). При нажатии кнопки Calculate запускается функция calculate () и анализируется HTML-код в разделе «output». Первое число и второе число получаются путем разделения строки и, наконец, они преобразуются в целые числа с помощью parseInt (). Метод parseInt () принимает два аргумента, из которых первый - это строка, которая должна быть преобразована в целое число, а второй - базовое значение, которое в данном случае равно 2 или двоичному. Арифметические операции выполняются в зависимости от оператора сложения, вычитания, умножения или деления, выбранного пользователем. Функция input () получает ввод от пользователя и отображает его на экране. Функция backspace () удаляет последний символ отображаемой строки. Функция cls () очищает экран дисплея. Следующие ниже фрагменты кода реализуют двоичный калькулятор.

Пример. Когда пользователь вводит ввод, он остается в разделе «вывод» в форме HTML. Объявляется глобальная переменная scr, к которой могут обращаться все функции JavaScript. Когда вводится какой-либо ввод, он сохраняется в переменной scr. При нажатии кнопки «Рассчитать» в строке, хранящейся в переменной scr, выполняется поиск оператора с использованием метода indexOf (), который возвращает индекс оператора, если он найден, иначе возвращает -1. Если оператор присутствует, строка, хранящаяся в переменной scr, разделяется символом оператора (+, -, *, /), а строки сохраняются в массиве num. Поскольку ввод находится в строковом формате, он должен быть преобразован в двоичный целочисленный формат для выполнения вычислений. Строки анализируются с использованием метода parseint (str, base), где str - это строка, которую нужно преобразовать, а base - это база числа (здесь двоичная база = 2). После двоичного преобразования выполняется указанная арифметическая операция, и результат снова сохраняется в переменной scr и отображается в разделе «выход».

  1. HTML:

    html

    <!DOCTYPE html>
    < html >
    < head >
    < meta charset = "utf-8" />
    < title >Binary Calculator</ title >
    <!--Bootstrap 4 CSS CDN -->
    < link rel = "stylesheet"
    href =
    " https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css "
    integrity =
    "sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
    crossorigin = "anonymous" />
    </ head >
    < body >
    < div class = "container" >
    < div class = "jumbotron" >
    < h1 >Binary Calculator</ h1 >
    < div id = "output" ></ div >
    < div class = "container mt-2" >
    < div class = "row" >
    < div class = "col-12" >
    < button type = "button"
    class = "btn btn-light"
    onclick = "input('0')" >
    0</ button >
    < button type = "button"
    class = "btn btn-light"
    onclick = "input('1')" >
    1</ button >
    < button type = "button"
    class = "btn btn-danger float-right ml-2"
    onclick = "cls()" >
    AC</ button >
    < button type = "button"
    class = "btn btn-warning float-right"
    onclick = "backspace()" >
    Backspace</ button >
    </ div >
    </ div >
    < div class = "row mt-2" >
    < div class = "col-12" >
    < button type = "button"
    class = "btn btn-info"
    onclick = "input('+')" >+</ button >
    < button type = "button"
    class = "btn btn-info"
    onclick = "input('-')" >-</ button >
    < button type = "button"
    class = "btn btn-info"
    onclick = "input('*')" >*</ button >
    < button type = "button"
    class = "btn btn-info"
    onclick = "input('/')" >/</ button >
    </ div >
    </ div >
    < div class = "row mt-2" >
    < div class = "col-12" >
    < button type = "button"
    class = "btn btn-success"
    onclick = "calculate()" >Calculate</ button >
    </ div >
    </ div >
    </ div >
    </ div >
    </ div >
    <!--jquery and popper.js cdn -->
    < script src =
    " https://code.jquery.com/jquery-3.5.1.slim.min.js "
    integrity =
    "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin = "anonymous" ></ script >
    < script src =
    " https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js "
    integrity =
    "sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
    crossorigin = "anonymous" ></ script >
    </ body >
    </ html >

  2. CSS:

    html

    < style type = "text/css" >
    .jumbotron{
    width : 60%;
    margin : auto;
    text-align: center;
    }
    #output{
    border: 2px solid black;
    min-height: 60px;
    text-align: right;
    font-weight: bold;
    font-size: 20px;
    }
    .btn{
    min-width: 120px;
    border: 2px solid black;
    }
    </ style >

  3. JavaScript:

    javascript

    <script type= "text/javascript" >
    var scr = "" ; //declared as global v
    function calculate() {
    if (scr.indexOf( "+" ) != -1) {
    // If + is present in the string
    // String obtained from scr is split
    var num = scr.split( "+" );
    // The splitted string stores in num array
    var x = parseInt(num[0], 2);
    // The num[0] and num[1] are the two binary
    // numbers resp
    var y = parseInt(num[1], 2);
    var sum = x + y;
    var ans = sum.toString(2);
    } else if (scr.indexOf( "-" ) != -1) {
    // If - is present in the string
    var num = scr.split( "-" );
    var x = parseInt(num[0], 2);
    var y = parseInt(num[1], 2);
    var sub = x - y;
    var ans = sub.toString(2);
    } else if (scr.indexOf( "*" ) != -1) {
    // If * is present in the string
    var num = scr.split( "*" );
    var x = parseInt(num[0], 2);
    var y = parseInt(num[1], 2);
    var mul = x * y;
    var ans = mul.toString(2);
    } else if (scr.indexOf( "/" ) != -1) {
    // If / is present in the string
    var num = scr.split( "/" );
    var x = parseInt(num[0], 2);
    var y = parseInt(num[1], 2);
    var div = x / y;
    var ans = div.toString(2);
    }
    scr = ans;
    document.getElementById( "output" ).innerHTML = scr;
    function input(ch) {
    scr += ch;
    document.getElementById( "output" ).innerHTML = scr;
    function backspace() {
    var b = document.getElementById( "output" ).innerHTML;
    scr = b.substring(0, b.length - 1);
    document.getElementById( "output" ).innerHTML = scr;
    function cls() {
    scr = "" ;
    document.getElementById( "output" ).innerHTML = scr;
    }
    </script>

Полный код:

html

<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" />
< title >Binary Calculator</ title >
<!--Bootstrap 4 CSS CDN -->
< link rel = "stylesheet"
href =
" https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css "
integrity =
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin = "anonymous" />
< style type = "text/css" >
.jumbotron {
width: 60%;
margin: auto;
text-align: center;
}
#output {
border: 2px solid black;
min-height: 60px;
text-align: right;
font-weight: bold;
font-size: 20px;
}
.btn {
min-width: 120px;
border: 2px solid black;
}
</ style >
</ head >
< body >
< div class = "container" >
< div class = "jumbotron" >
< h1 >Binary Calculator</ h1 >
< div id = "output" ></ div >
< div class = "container mt-2" >
< div class = "row" >
< div class = "col-12" >
< button type = "button"
class = "btn btn-light"
onclick = "input('0')" >0</ button >
< button type = "button"
class = "btn btn-light"
onclick = "input('1')" >1</ button >
< button type = "button"
class = "btn btn-danger float-right ml-2"
onclick = "cls()" >AC</ button >
< button type = "button"
class = "btn btn-warning float-right"
onclick = "backspace()" >Backspace</ button >
</ div >
</ div >
< div class = "row mt-2" >
< div class = "col-12" >
< button type = "button"
class = "btn btn-info"
onclick = "input('+')" >+</ button >
< button type = "button"
class = "btn btn-info"
onclick = "input('-')" >-</ button >
< button type = "button"
class = "btn btn-info"
onclick = "input('*')" >*</ button >
< button type = "button"
class = "btn btn-info"
onclick = "input('/')" >/</ button >
</ div >
</ div >
< div class = "row mt-2" >
< div class = "col-12" >
< button type = "button"
class = "btn btn-success"
onclick = "calculate()" >Calculate</ button >
</ div >
</ div >
</ div >
</ div >
</ div >
< script type = "text/javascript" >
var scr = ""; //declared as global variable
function calculate() {
if (scr.indexOf("+") != -1) {
// If + is present in the string
// String obtained from scr is split
var num = scr.split("+");
// The splitted string stores in num array
var x = parseInt(num[0], 2);
// The num[0] and num[1] are the two binary
// numbers resp
var y = parseInt(num[1], 2);
var sum = x + y;
var ans = sum.toString(2);
} else if (scr.indexOf("-") != -1) {
// If - is present in the string
var num = scr.split("-");
var x = parseInt(num[0], 2);
var y = parseInt(num[1], 2);
var sub = x - y;
var ans = sub.toString(2);
} else if (scr.indexOf("*") != -1) {
// If * is present in the string
var num = scr.split("*");
var x = parseInt(num[0], 2);
var y = parseInt(num[1], 2);
var mul = x * y;
var ans = mul.toString(2);
} else if (scr.indexOf("/") != -1) {
// If / is present in the string
var num = scr.split("/");
var x = parseInt(num[0], 2);
var y = parseInt(num[1], 2);
var div = x / y;
var ans = div.toString(2);
}
scr = ans;
document.getElementById("output").innerHTML = scr;
}
function input(ch) {
scr += ch;
document.getElementById("output").innerHTML = scr;
}
function backspace() {
var b = document.getElementById("output").innerHTML;
scr = b.substring(0, b.length - 1);
document.getElementById("output").innerHTML = scr;
}
function cls() {
scr = "";
document.getElementById("output").innerHTML = scr;
}
Technical Scripter JavaScript HTML JavaScript-Misc CSS Bootstrap

РЕКОМЕНДУЕМЫЕ СТАТЬИ

Что такое тернарный оператор?
23 Января, 2024
Количество чисел между L и R, взаимно простых с P
27 Февраля, 2023
Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно.
27 Февраля, 2023
Максимизируйте сумму трех чисел, выполнив побитовое XOR
27 Февраля, 2023
Проверьте, совпадает ли набор первых элементов X одного массива с набором первых элементов Y другого
27 Февраля, 2023
Подсчитать подстроки нечетной длины с медианой, такой же, как K-й символ строки
27 Февраля, 2023
Найти лексикографически первый идентификатор каждого домена из заданного массива идентификаторов электронной почты
27 Февраля, 2023
Найдите общее количество фигур 'X'
26 Февраля, 2023