Hướng dẫn scientific calculator in javascript source code - máy tính khoa học trong mã nguồn javascript

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

Chia sẻ cái này:

Được phát hành:	10 tháng trước
Cập nhật mới nhất:	10 tháng trước
Cập nhật mới nhất:	4,155

Tải xuống:

Tuy nhiên, một mã nguồn máy tính khoa học khác được viết bằng HTML, CSS và Vanilla JavaScript. Máy tính này đi kèm với một thiết kế sạch với chủ đề tối. Cùng với các tính toán cơ bản, nó cho phép người dùng tìm ra các giá trị của tội lỗi, cos, tan, log, in, fanster, exp, radians và độ.

Bạn có thể tích hợp máy tính này vào dự án web/ứng dụng của mình để cho phép người dùng giải quyết các vấn đề khoa học một cách nhanh chóng. Chủ đề và phong cách có thể được tùy chỉnh cao với CSS bổ sung theo nhu cầu của bạn.

Cách tạo máy tính khoa học

    

      

        
      
      

        
        

          
C
          
π
          
sqrt
          
sq
          
%
          
<=
        
        

          
log
          
sin
          
exp
          
^
          
+/-
          
÷
        
        

          
ln
          
cos
          
7
          
8
          
9
          
x
        
        

          
n!
          
tan
          
4
          
5
          
6
          
-
        
        

          
radians
          
1
          
2
          
3
          
+
        
        

          
degrees
          
0
          
.
          
=
        
      
    

1. Để tạo một máy tính khoa học, hãy tạo một phần tử div với tên lớp "calculator". Tương tự như vậy, tạo một phần tử div với tên lớp "display" và đặt một phần tử đầu vào bên trong nó với ID đầu ra. Tương tự, tạo các phần tử div cho các nút, bọc tất cả các phần tử này thành thẻ div và xác định tên lớp "container" của nó. Vì vậy, cấu trúc HTML hoàn chỉnh cho máy tính khoa học như sau:

.calculator{
    max-width: 612px;
    margin: 10px auto;
}
#output {
  background-color: #000;
  color: #fff;
  width: 100%;
  height: 80px;
  font-size: 48px;
  border-radius: 5px;
  text-align: left;
  padding: 0px 10px 0px 10px;
  box-shadow: 0px 0px 30px -5px #fff;
  box-sizing: border-box;
}
#buttons {
  margin-top: 15px;
}
.button {
  color: #fff;
  text-align: center;
  line-height: 70px;
  display: inline-block;
  background-color: #595959;
  border: 1px solid #33ccff;
  height: 70px;
  width: 100px;
  font-size: 36px;
  margin-right: -4.6px;
  cursor: pointer;
}
.button:hover {
  background-color: #0066ff;
  box-shadow: 0px 0px 30px 0px #fff;
}
.button:active {
  background-color: #80b3ff;
  box-shadow: 0px 0px 30px 0px #000;
}
.number {
  background-color: #404040;
}
.number:active {
  background-color: #80b3ff;
  box-shadow: 0px 0px 30px 0px #000;
}
#zero {
  width: 200px;
}
#decimal {
  font-weight: bold;
}
#equals {
  background-color: #0066ff;
}
#equals:hover {
  background-color: #fff;
  color: #000;
  box-shadow: 0px 0px 30px -5px #fff;
}
#backspace {
  background-color: #333333;
}
#backspace:hover {
  background-color: #99003d;
}
#backspace:active {
  background-color: #ff4d94;
  box-shadow: 0px 0px 30px 0px #000;
}
#clear {
  background-color: #262626;
}
#clear:hover {
  background-color: #cc0000;
}
#clear:active {
  background-color: #ff4d4d;
  box-shadow: 0px 0px 30px 0px #000;
}
#radians, #degrees {
  width: 200px;
}
#radians:hover {
  background-color: #00b38f;
}
#degrees:hover {
  background-color: #00b38f;
}

2. Sau khi tạo cấu trúc HTML, bây giờ kiểu máy tính sử dụng CSS. Bạn có thể đặt các kiểu tùy chỉnh để tùy chỉnh giao diện máy tính. Do đó, sau đây là các kiểu CSS cơ bản cho máy tính khoa học.

var display = document.getElementById("output");
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 != "sqrt" && button.textContent != "sq" && button.textContent != "%" && button.textContent != "<=" && button.textContent != "+/-" && button.textContent != "sin" && button.textContent != "cos" && button.textContent != "tan" && button.textContent != "log" && button.textContent != "ln" && button.textContent != "^" && button.textContent != "n!" && button.textContent != "π" && button.textContent != "exp" && button.textContent != "radians" && button.textContent != "degrees") {
      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 === "sq") {
      square();
    } else if (button.textContent === "sqrt") {
      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 === "^") {
      exponent();
    } else if (button.textContent === "n!") {
      factorial();
    } else if (button.textContent === "exp") {
      exp();
    } else if (button.textContent === "radians") {
      radians();
    } else if (button.textContent === "degrees") {
      degrees();
    }
  });
});

// function nextLine() {
//   if(display.value.length > 19) {
//     document.write("\n");
//   }
// }
// ***button functions***
function checkLength() {
  if (display.value.length >= 23) {
    display.value = "Overload Error";
  }
}
function syntaxError() {
  if (eval(display.value) == SyntaxError) {
    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 = display.value + "*";
}
function divide() {
  display.value = display.value + "/";
}
function plusMinus() {
  if (display.value.charAt(0) === "-") {
    display.value = display.value.slice(1);
  } else {
    display.value = "-" + display.value;
  }
}
function factorial() {
  var result = 1;
  if (display.value === 0) {
    display.value = "1";
  } else if (display.value < 0) {
    display.value = "undefined";
  } else {
    var result = 1;
    for (var i = display.value; i > 0; i--) {
      result = result * i;
    }
    display.value = result;
  }
}
function pi() {
  // if(display.value === "") {
  //   display.value = Math.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 = 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 máy tính khoa học JavaScript sau đây trước khi đóng thẻ cơ thể và thực hiện.

Đó là tất cả! Hy vọng, bạn đã tích hợp thành công mã nguồn máy tính khoa học này vào dự án của bạn. 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.