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

Detailed explanation of MySQL replication principles and practical applications

This article uses examples to illustrate the prin...

Six important selectors in CSS (remember them in three seconds)

From: https://blog.csdn.net/qq_44761243/article/d...

Tips for using DIV container fixed height in IE6 and IE7

There are many differences between IE6 and IE7 in ...

Implementation of CentOS8.0 network configuration

1. Differences in network configuration between C...

CSS3 mouse hover transition zoom effect

The following is a picture mouse hover zoom effec...

Windows DNS server exposed "worm-level" vulnerability, has existed for 17 years

Vulnerability Introduction The SigRed vulnerabili...

In-depth analysis of the Linux kernel macro container_of

1. As mentioned above I saw this macro when I was...

js to implement verification code interference (dynamic)

This article example shares the specific code of ...

The whole process of installing mysql5.7.22 under ARM64 architecture

MySQL download address: https://obs.cn-north-4.my...

Elements of user experience or elements of web design

System and user environment design <br />Th...

Detailed explanation of HTML style tags and related CSS references

HTML style tag style tag - Use this tag when decl...

MySQL tutorial on how to deploy multiple instances on a single machine using mysqld_multi

Table of contents 1. MySQL compilation and instal...

Simple usage examples of MySQL custom functions

This article uses examples to illustrate the usag...

CentOS uses expect to remotely execute scripts and commands in batches

Sometimes we may need to operate servers in batch...

js realizes the image cutting function

This article example shares the specific code of ...