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

Implementation of CSS equal division of parent container (perfect thirds)

The width of the parent container is fixed. In or...

Beautiful checkbox style (multiple selection box) perfectly compatible with IE8/9/10, FF, etc.

It's embarrassing to say that I had to search ...

Detailed explanation of Linux curl form login or submission and cookie usage

Preface This article mainly explains how to imple...

Detailed explanation of the solution to forget the password in MySQL 5.7

ENV: [root@centos7 ~]# uname -r 3.10.0-514.el7.x8...

Detailed tutorial on MySQL installation and configuration

Table of contents Installation-free version of My...

JS code to achieve page switching effect

This article example shares the specific code of ...

How to use Axios asynchronous request API in Vue

Table of contents Setting up a basic HTTP request...

Detailed explanation of how to query fields containing '%' in MySQL like (ESCAPE usage)

In the SQL like statement, for example SELECT * F...

Analysis of different MySQL table sorting rules error

The following error is reported when MySQL joins ...

Vue custom instructions to achieve pop-up window drag four-side stretching and diagonal stretching effect

introduction The company's recent Vue front-e...

A brief discussion on how Tomcat breaks the parent delegation mechanism

Table of contents JVM Class Loader Tomcat class l...

18 Amazing Connections Between Interaction Design and Psychology

Designers need to understand psychology reading n...

4 Practical Tips for Web Page Design

Related articles: 9 practical tips for creating we...

Flash embedded in HTML Solution for embedding Flash files in HTML web page code (Part 2)

The above article has temporarily concluded my int...

How to set up PostgreSQL startup on Ubuntu 16.04

Since PostgreSQL is compiled and installed, you n...