☭
Для кого-то я солнышко,
для кого-то солнечный удар,
а кому-то вообще не светит... 		Музыка | Видео | Юмор | Смайлики | Размышления | Словари
Техника: Video | Mobile | HardWare | NetWork | Hacking | Security | Systems | Unix
Ульяновск: Сервисы | Транспорт | Радио | Телевидение | Бланки | ЗагранПаспорт
Мои: Cубтитры | Сериалы | Обзор фильмов | Бесплатные идеи | Linux
Программы: Files Archiver | Calendar | PolySend | RegTools | EXplay
MegaDet | SubFormat | Приложение к Диплому | Copy 1C
Rep    Z   B Старые разделы: Развлечения | Библиотека | Ульяновск | Ссылки | Linux

Последние новости  

   
   

Рейтинг  

Яндекс.Метрика
Яндекс цитирования 		 

   

Статистика  

Пользователи
7
Материалы
578
Кол-во просмотров материалов
2742953
   

JQuery Calculator

Информация о материале
Просмотров: 46

jq_calc.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JQuery Calculator</title>
  <link href="/jq_style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <table border="1" style="border-collapse: collapse; text-align:center;" cellpadding="5px" align="center">
      <tr id="tablo_line">
        <td colspan="4">
          <input id="tablo" placeholder="Табло" size="25"></td>
        </tr>
      <tr id="out_line">
        <td colspan="4">
          <input id="out" placeholder="Ответ" size="25" disabled="true"></td>
        </tr>
        <tr>
          <td><button id="n7" class="nbtn" type="button">7</button></td>
          <td><button id="n8" class="nbtn" type="button">8</button></td>
          <td><button id="n9" class="nbtn" type="button">9</button></td>
          <td><button id="plus" type="button">+</button></td>
        </tr>
        <tr>
          <td><button id="n4" class="nbtn" type="button">4</button></td>
          <td><button id="n5" class="nbtn" type="button">5</button></td>
          <td><button id="n6" class="nbtn" type="button">6</button></td>
          <td><button id="minus" type="button">-</button></td>
        </tr>
        <tr>
          <td><button id="n1" class="nbtn" type="button">1</button></td>
          <td><button id="n2" class="nbtn" type="button">2</button></td>
          <td><button id="n3" class="nbtn" type="button">3</button></td>
          <td><button id="multi" type="button">*</button></td>
       </tr>

      <tr>
        <td><button id="nzap" type="button">.</button></td>
        <td><button id="n0" class="nbtn" type="button">0</button></td>
          <td>
            <button id="go" type="button">
              =
            </button>
          </td>
        <td><button id="div" type="button">/</button></td>
      </tr>
  </table>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="/script.js"></script>

</body>

</html>

script.js

let num1, num2, op; 
let num = [];

var num_btns = $(".nbtn");

for(i=0; i < num_btns.length; i++){  
  num_btns[i].addEventListener('click', function(e){
    $("#tablo").val($("#tablo").val() + $(this).text());
  })
}

function general_press() {
  num1 = $('#tablo').val();
  $('#tablo').val('');
  $('#out').val(num1);
}

$("#go").on("click", function() {
  num2 = $("#tablo").val();
  if(op == "+")
    $("#out").val(Number(num1) + Number(num2));
  if(op == "-")
    $("#out").val(Number(num1) - Number(num2));
  if(op == "*")
    $("#out").val(Number(num1) * Number(num2));
  if(op == "/")
    $("#out").val(Number(num1) / Number(num2));
  $("#tablo").val('');
});

$("#plus").on("click", function() {
  general_press();
  op = "+";
});

$("#minus").on("click", function() {
  general_press();
  op = "-";
});

$("#multi").on("click", function() {
  general_press();
  op = "*";
});

$("#div").on("click", function() {
  general_press();
  op = "/";
});

$('#nzap').on('click', function() {
  $('#tablo').val($("#tablo").val() + '.');
});


jq_style.css

html, body {
  height: 100%;
  width: 100%;
}

#tablo_line {
    text-align: center;
    font-weight: bold;
    background-color: blue;
}

#out_line {
    text-align: center;
    font-weight: bold;
    background-color:  darkgreen;
}

   
   

Login Form