Kalkulator naukowy

Kalkulator naukowy jest przydatnym narzędziem do wykonywania skomplikowanych obliczeń matematycznych. Może być używany do wykonywania zadań związanych z algebra, geometrią, trygonometrią i innymi dziedzinami matematyki.

Używany jest do wykonywania obliczeń szybciej i dokładniej niż tradycyjne metody ręcznego liczenia.

Dodane są stałe fizyczne oraz matematyczne. Oraz przelicznik miar

Poniżej znajdziecie kody do wstawienia takiego kalkulatora na własną stronę.

Kalkulator naukowy

C ( ) 7 8 9 4 5 6 1 2 3 ± 0 ,

<= % x ! x^ * / ∞ e + x ² log cos - √ sin tan = π ∘ rad

Oto krótki przegląd jego funkcji i zastosowań:

Edukacja: Kalkulatory naukowe są nieodłącznym narzędziem dla studentów studiujących nauki ścisłe. Pomagają w rozwiązywaniu skomplikowanych problemów matematycznych, fizycznych czy chemicznych.
Inżynieria: W dziedzinie inżynierii kalkulatory naukowe są niezbędne do wykonywania skomplikowanych obliczeń. Służą do projektowania struktur, obliczania wytrzymałości materiałów czy analizy danych technicznych.
Fizyka: Kalkulatory naukowe umożliwiają wykonywanie obliczeń związanych z fizyką, takich jak prawa ruchu, dynamika czy elektromagnetyzm.
Matematyka: W matematyce kalkulatory naukowe pomagają w rozwiązywaniu równań, obliczaniu pierwiastków, funkcji trygonometrycznych, logarytmów i innych skomplikowanych operacji.

Warto zaznaczyć, że kalkulatory naukowe oferują wiele funkcji, takich jak obliczenia matematyczne, funkcje trygonometryczne, konwersje jednostek i operacje statystyczne.

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
script.js

index.html

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="skrip.pl">
    <title>HTML Scientific Calculator</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>     
 <main>
     <div class="calculator">
        <input type="text" id="screen" maxlength="20" placeholder="0">
        <div class="calc-buttons">

<div class="functions-one">
        <button class="button red">C</button>
        <button class="button basic-stuff">(</button>
        <button class="button basic-stuff">)</button>
        <button class="button numbers">7</button>
        <button class="button numbers">8</button>
        <button class="button numbers">9</button>
        <button class="button numbers">4</button>
        <button class="button numbers">5</button>
        <button class="button numbers">6</button>
        <button class="button numbers">1</button>
        <button class="button numbers">2</button>
        <button class="button numbers">3</button>
        <button class="button basic-stuff">±</button>
        <button class="button numbers">0</button>
        <button class="button basic-stuf"><strong>,</strong></button>
</div>

        <div class="functions-two">
            <button class="button triggers">&#60;=</button>
            <button class="button complex-stuff">%</button>
            <button class="button complex-stuff">x !</button>
            <button class="button complex-stuff">x^</button>
            <button class="button basic-stuff">*</button>
            <button class="button basic-stuff">/</button>
            <button class="button complex-stuff">ln</button>
            <button class="button complex-stuff">e</button>
            <button class="button basic-stuff">+</button>
            <button class="button complex-stuff">x ²</button>
            <button class="button complex-stuff">log</button>
            <button class="button complex-stuff">cos</button>
            <button class="button basic-stuff">-</button>
            <button class="button complex-stuff">√</button>
            <button class="button complex-stuff">sin</button>
            <button class="button complex-stuff">tan</button>
            <button class="button triggers">=</button>
            <button class="button complex-stuff">&#x003C0;</button>
            <button class="button complex-stuff">∘</button>
            <button class="button complex-stuff">rad</button>
        </div>
   
      </div>
    </div>
 </main>

  <script  src="script.js"></script>
      
  </body>
</html>

style.css

.calculator {
  max-width: 530px;
  background-color: #Fafafa;
  padding: 20px;
  border: solid 1px rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  margin: 10px auto;
}
input[type=text] {
  width: 80%;
  height: 32px;
  font-size: 18px;
  border-radius: 5px;
  border: solid 1px rgba(0, 0, 0, 0.2);
  background-color: #ffffff;
  color: #111111;
  padding: 0 5px 0 5px;
  margin: 0 0px 10px 10%;
}
.calc-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.button {
  margin: 3px;
  width: 63px;
  border: none;
  height: 35px;
  border-radius: 4px;
  color: #000000;
  cursor: pointer;
}
button:hover {
  background-color: greenyellow;
  transition: .2s;
}
.functions-one {
  width: 210px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.functions-two {
  width: 280px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.triggers {
  background-color: #F1C46F;
}
.red {
  background-color: #F97358;
}
.numbers {
  background-color: #a9a9a9;
}
.basic-stuff {
  background-color: #80d4ff;
}
.basic-stuf {
  background-color: #80d4ff;
  font-size: 19px;
}
.complex-stuff {
  background-color: #80ffff;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  opacity: 0.4; /* Firefox */
}

script.js

// JavaScript Document
// www.skrip.pl
var display = document.getElementById("screen");
var buttons = document.getElementsByClassName("button");
  
  Array.prototype.forEach.call(buttons, function(button) {
  button.addEventListener("click", function() {
    if (button.textContent != "=" && 
    button.textContent != "C" && 
    button.textContent != "x" && 
    button.textContent != "÷" && 
    button.textContent != "√" && 
    button.textContent != "x ²" && 
    button.textContent != "%" && 
    button.textContent != "<=" && 
    button.textContent != "±" && 
    button.textContent != "sin" && 
    button.textContent != "cos" && 
    button.textContent != "tan" && 
    button.textContent != "log" && 
    button.textContent != "ln" && 
    button.textContent != "x^" && 
    button.textContent != "x !" && 
    button.textContent != "π" && 
    button.textContent != "e" && 
    button.textContent != "rad" 
    && button.textContent != "∘") {
      display.value += button.textContent;
    } else if (button.textContent === "=") {
      equals();
    } else if (button.textContent === "C") {
      clear();
    } else if (button.textContent === "x") {
      multiply();
    } else if (button.textContent === "÷") {
      divide();
    } else if (button.textContent === "±") {
      plusMinus();
    } else if (button.textContent === "<=") {
      backspace();
    } else if (button.textContent === "%") {
      percent();
    } else if (button.textContent === "π") {
      pi();
    } else if (button.textContent === "x ²") {
      square();
    } else if (button.textContent === "√") {
      squareRoot();
    } else if (button.textContent === "sin") {
      sin();
    } else if (button.textContent === "cos") {
      cos();
    } else if (button.textContent === "tan") {
      tan();
    } else if (button.textContent === "log") {
      log();
    } else if (button.textContent === "ln") {
      ln();
    } else if (button.textContent === "x^") {
      exponent();
    } else if (button.textContent === "x !") {
      factorial();
    } else if (button.textContent === "e") {
      exp();
    } else if (button.textContent === "rad") {
      radians();
    } else if (button.textContent === "∘") {
      degrees();
    }
  });
});


function syntaxError() {
  if (eval(display.value) == SyntaxError || eval(display.value) == ReferenceError || eval(display.value) == TypeError) {
    display.value == "Syntax Error";
  }
}


function equals() {
  if ((display.value).indexOf("^") > -1) {
    var base = (display.value).slice(0, (display.value).indexOf("^"));
    var exponent = (display.value).slice((display.value).indexOf("^") + 1);
    display.value = eval("Math.pow(" + base + "," + exponent + ")");
  } else {
    display.value = eval(display.value)
    checkLength()
    syntaxError()
  }
}

function clear() {
  display.value = "";
}

function backspace() {
  display.value = display.value.substring(0, display.value.length - 1);
}

function multiply() {
  display.value += "*";
}

function divide() {
  display.value +=  "/";
}

function plusMinus() {
  if (display.value.charAt(0) === "-") {
    display.value = display.value.slice(1);
  } else {
    display.value = "-" + display.value;
  }
}

function factorial() {
  var number = 1;
  if (display.value === 0) {
    display.value = "1";
  } else if (display.value < 0) {
    display.value = "undefined";
  } else {
    var number = 1;
    for (var i = display.value; i > 0; i--) {
      number *=  i;
    }
    display.value = number;
  }
}

function pi() {
  display.value = (display.value * Math.PI);
}

function square() {
  display.value = eval(display.value * display.value);
}

function squareRoot() {
  display.value = Math.sqrt(display.value);
}

function percent() {
  display.value = display.value / 100;
}

function sin() {
  display.value = Math.sin(display.value);
}

function cos() {
  display.value = Math.cos(display.value);
}

function tan() {
  display.value = Math.tan(display.value);
}

function log() {
  display.value = Math.log10(display.value);
}

function ln() {
  display.value = Math.log(display.value);
}

function exponent() {
  display.value += "^";
}

function exp() {
  display.value = Math.exp(display.value);
}

function radians() {
  display.value = display.value * (Math.PI / 180);
}

function degrees() {
  display.value = display.value * (180 / Math.PI);
}

var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn")
var btn = document.getElementById("myBtn2");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal




btn.onclick = function() {
  modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function(e) {
  modal.style.display = "none";
}

var right = document.getElementsByClassName("right");
for(var k = 0, length = right.length; k < length; k++) {
     right[k].onclick =  function(){
      modal.style.display = "none";
     }
  }
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
display.value += button.textContent;

Pliki źródłowe

Lub można pobrać gotowe pliki kalkulatora i je edytować.

Top Stories

Wangiri scam – jak nie zostać ofiarą

Statystyki wyszukiwarki PornHub za 2024 rok

Prosty sposób na zdobycie 1000 GB transferu danych na rok w Orange na kartę

Rozbudowany kalkulator naukowy na stronę www