Hướng dẫn simple scientific calculator using html, css and javascript - máy tính khoa học đơn giản sử dụng html, css và javascript

Nội dung chính Show

• Đó là tất cả! Hy vọng, bạn đã tạo thành công một máy tính khoa học. Nếu bạn có bất kỳ câu hỏi hoặc đề xuất, hãy cho tôi biết bằng bình luận dưới đây.
• Làm thế nào có thể tạo ra máy tính khoa học bằng cách sử dụng JavaScript và HTML?
• Làm thế nào để bạn tạo một máy tính trong HTML và CSS?
• Tôi có thể tạo một máy tính với JavaScript không?
• Làm thế nào tôi có thể làm một máy tính khoa học?

Mã mã:	Máy tính khoa học ngon ngọt của người dùng
Loại tệp:	ZIP (HTML, CSS, JavaScript)
Tác giả:	Raphael
Chỉnh sửa mã trực tuyến:	Xem trên Codepen

Chia sẻ cái này:

Được phát hành:	11 thàng trước
Cập nhật mới nhất:	11 thàng trước
Cập nhật mới nhất:	8,954

Tải xuống:

Đoạn mã JavaScript này giúp bạn tạo ra một máy tính khoa học trong các dự án HTML của bạn. Nó đi kèm với tất cả các chức năng cần thiết để thực hiện các tính toán khoa học về các số. Bên cạnh việc bổ sung, trừ, phép nhân và chia, người dùng cũng có thể tìm thấy các giá trị của số mũ, log, log tự nhiên (LN), các hàm Trig.

Về cơ bản, máy tính khoa học này được xây dựng với HTML, CSS và JavaScript. Vì vậy, nó có thể có khả năng tùy biến cao với CSS bổ sung để làm cho nó theo nhu cầu của bạn.

        
        



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



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

      

1. Trong bước đầu tiên, hãy tạo cấu trúc HTML cho máy tính khoa học như sau:

.calculator {
max-width: 530px;
background-color: beige;
padding: 20px;
border-radius: 10px;
margin: 10px auto;
}
input[type=text] {
width: 315px;
    height: 25px;
    border-radius: 5px;
    border: 0px;
    background-color: #333333;
    color: #d9d9d9;
    padding: 0 5px 0 5px;
    margin: 0 0px 10px 84px;

}
.calc-buttons {
    display: flex;
flex-wrap: wrap;
justify-content: space-between;

}
.button {
   margin: 3px;
width: 63px;
border: none;
height: 25px;
border-radius: 4px;
color: #000000;
cursor: pointer;
}
button:hover {
  background-color: hsla(180, 100%, 40%, 0.3);
  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: #ffc266;
}
.numbers {
    background-color: #999999;
}
.basic-stuff {
    background-color: #80d4ff;
}

.complex-stuff {
    background-color: #80ffff;
}

2. Sau đó, kiểu máy tính sử dụng các CSS sau.

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

3. Cuối cùng, thêm chương trình JavaScript sau đây cho máy tính khoa học và thực hiện.

Đó là tất cả! Hy vọng, bạn đã tạo thành công một máy tính khoa học. Nếu bạn có bất kỳ câu hỏi hoặc đề xuất, hãy cho tôi biết bằng bình luận dưới đây.