JavaScript code to implement a simple calculator

JavaScript code to implement a simple calculator

This article example shares the specific code of JavaScript to implement a simple calculator for your reference. The specific content is as follows

I spent several hours editing and developed a simple and easy to understand calculator. I kept fixing the bug and finally fixed it.

This is the style

This is the Css part

<style>
  #box {
   background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
   width: 500px;
   height: 420px;
   margin: auto;
   margin-top: 200px;
   position: relative;
  }

  .reckon {
   width: 280px;
   height: 200px;
   background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
   ;
   position: absolute;
   top: 100px;
   left: 100px;
   border: 5px solid #2a2b2c
  }

  #input1 {
   background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
   border: none;
   width: 220px;
   height: 8px;
   float: right;
   margin-top: 10px;
   margin-right: 20px;
   outline: none;
   padding: 10px
  }

  ul li {
   float: left;
   list-style: none;
   margin: 4px 2px;
   border-radius: 3px;
   background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
   box-shadow: 2px 2px #ccc;
   color: #fff;
   font-weight: "楷体";
   width: 50px;
   height: 30px;
   text-align: center;
   line-height: 30px;
  }

  ul {
   margin-top: 5px;
  }

  ul li:hover {
   opacity: 0.7;
  }
</style>

This is the HTML part

<div id="box">
  <div class="reckon" id="reckon">
   <input type="text" id="input1">
   <ul>
    <li class="num">7</li>
    <li class="num">8</li>
    <li class="num">9</li>
    <li class="opcr">+</li>

    <li class="num">4</li>
    <li class="num">5</li>
    <li class="num">6</li>
    <li class="opcr">- </li>

    <li class="num">1</li>
    <li class="num">2</li>
    <li class="num">3</li>
    <li class="opcr">*</li>

    <li class="num">0</li>
    <li id="returnZero">C</li>
    <li id="resule">=</li>
    <li class="opcr">/</li>
   </ul>
  </div>


 </div>
/* Define two labels to store the symbol and the first value*/
 <input type="text" id="text1" style="display:none">
 <input type="text" id="per" style="display:none">

For the HTML part, define all numbers as a class name, define all operators as a class, and define two inputs to store the operators.

<script>
  lis = document.querySelectorAll("#box ul .num")//Get all numbers opcr = document.querySelectorAll("#box ul .opcr")//Get the operator for (var i = 0; i < lis.length; i++) { //Traverse all numbers lis[i].onclick = function () {
    input1.value += parseInt(this.innerHTML) //Click input1 to display}
  }
  //Traverse all operators for (let i = 0; i < opcr.length; i++) {
   opcr[i].onclick = function () {
    if (text1.value == "") {//When the first value is empty text1.value = input1.value//Store the first value input1.value = "" //The value in the input box is empty per.value = this.innerHTML; //The value of the symbol is empty } else {
     text1.value = eval(text1.value + per.value + input1.value) //Calculate when it is not empty per.value = this.innerHTML; //Store the symbol value as the clicked value input1.value = "" //The value in the input box is empty}
   }
  }
  //Equal to resule.onclick = function () {
   input1.value = eval(text1.value + per.value + input1.value) //Calculate the value inside per.value = "" //Clear the value stored in per text1.value = "" //The value in the input box is empty}
  //Click to clear all returnZero.onclick = function () {
   input1.value = ""
   per.value = ""
   text1.value = ""
  }
</script>

Complete section

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Simple Calculator</title>
 <style>
  #box {
   background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
   width: 500px;
   height: 420px;
   margin: auto;
   margin-top: 200px;
   position: relative;
  }

  .reckon {
   width: 280px;
   height: 200px;
   background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
   ;
   position: absolute;
   top: 100px;
   left: 100px;
   border: 5px solid #2a2b2c
  }

  #input1 {
   background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
   border: none;
   width: 220px;
   height: 8px;
   float: right;
   margin-top: 10px;
   margin-right: 20px;
   outline: none;
   padding: 10px
  }

  ul li {
   float: left;
   list-style: none;
   margin: 4px 2px;
   border-radius: 3px;
   background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
   box-shadow: 2px 2px #ccc;
   color: #fff;
   font-weight: "楷体";
   width: 50px;
   height: 30px;
   text-align: center;
   line-height: 30px;
  }

  ul {
   margin-top: 5px;
  }

  ul li:hover {
   opacity: 0.7;
  }
 </style>
</head>

<body>
 <div id="box">
  <div class="reckon" id="reckon">
   <input type="text" id="input1">
   <ul>
    <li class="num">7</li>
    <li class="num">8</li>
    <li class="num">9</li>
    <li class="opcr">+</li>

    <li class="num">4</li>
    <li class="num">5</li>
    <li class="num">6</li>
    <li class="opcr">- </li>

    <li class="num">1</li>
    <li class="num">2</li>
    <li class="num">3</li>
    <li class="opcr">*</li>

    <li class="num">0</li>
    <li id="returnZero">C</li>
    <li id="resule">=</li>
    <li class="opcr">/</li>
   </ul>
  </div>


 </div>

 <input type="text" id="text1" style="display:block">
 <input type="text" id="per" style="display:block">

 <script>
  lis = document.querySelectorAll("#box ul .num")//Get all numbers opcr = document.querySelectorAll("#box ul .opcr")//Get +——*/
  for (var i = 0; i < lis.length; i++) { //Traverse all numbers lis[i].onclick = function () {
    input1.value += parseInt(this.innerHTML) //Click input1 to display}
  }

  //Traverse all +——*/
  for (let i = 0; i < opcr.length; i++) {
   opcr[i].onclick = function () {
    if (text1.value == "") {//When the first value is empty text1.value = input1.value//Store the first value input1.value = "" //The value in the input box is empty per.value = this.innerHTML; //The value of the symbol is empty } else {
     text1.value = eval(text1.value + per.value + input1.value) //Calculate the value when it is not empty per.value = this.innerHTML; //The value of the symbol is the clicked value input1.value = "" //The value in the input box is empty}
   }
  }
  //Equal to resule.onclick = function () {
   input1.value = eval(text1.value + per.value + input1.value) //Calculate the value inside per.value = "" //Clear the value stored in per text1.value = "" //The value in the input box is empty}
  //Click to clear all returnZero.onclick = function () {
   input1.value = ""
   per.value = ""
   text1.value = ""
  }
 </script>
</body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • A simple calculator written in javascript, with a lot of content and practical methods. Recommended
  • Simple js code to realize calculator operation
  • js implements a simple calculator
  • HTML+JS implements simple calculator code (addition, subtraction, multiplication and division)
  • Simple calculator implementation code written in JS
  • javascript-simple calculator implementation step decomposition (with pictures)
  • Pure javascript code to implement calculator functions (three methods)
  • js implements a simple calculator
  • Web calculator A JS calculator
  • Simple implementation of js web calculator

<<:  How to allow remote connection in MySql

>>:  How to reset the root password in CentOS7

Recommend

JavaScript parseInt() and Number() difference case study

Learning objectives: The two functions parseInt()...

How to configure Jupyter notebook in Docker container

Jupyter notebook is configured under the docker c...

Detailed explanation of modifying the default style of external component Vant based on Vue cli development

Table of contents Preface 1. Less 2. Import your ...

Writing a rock-paper-scissors game in JavaScript

This article shares the specific code for writing...

Best Practices Guide for MySQL Partitioned Tables

Preface: Partitioning is a table design pattern. ...

CSS to achieve the effect of rotating flip card animation

The css animation of the rotating flip effect, th...

The front end creates and modifies CAD graphics details through JavaScript

Table of contents 1. Current situation 2. Create ...

Detailed explanation of eight methods to achieve CSS page bottom fixed

When we are writing a page, we often encounter a ...

Docker installation tomcat dubbo-admin instance skills

1. Download the tomcat image docker pull tomcat:8...

Summary of seven MySQL JOIN types

Before we begin, we create two tables to demonstr...

The difference between br and br/ in HTML

answer from stackflow: Simply <br> is suffic...

How to declare a cursor in mysql

How to declare a cursor in mysql: 1. Declare vari...

Three ways to jump to a page by clicking a button tag in HTML

Method 1: Using the onclick event <input type=...

JS thoroughly understands GMT and UTC time zones

Table of contents Preface 1. GMT What is GMT Hist...

CSS removes the dotted border generated when clicking a link. Compatible with browsers that meet W3C standards

Part of the code: Copy code The code is as follow...