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 Nginx+Tomcat load balancing cluster installation and configuration case

Table of contents Preface 1. Nginx+Tomcat 2. Conf...

Example of building a redis-sentinel cluster based on docker

1. Overview Redis Cluster enables high availabili...

HTML code text box limit input text box becomes gray limit text box input

Method 1: Set the readonly attribute to true. INPU...

Summary of several commonly used CentOS7 images based on Docker

Table of contents 1 Install Docker 2 Configuring ...

Vue Basics Listener Detailed Explanation

Table of contents What is a listener in vue Usage...

A brief understanding of the three uses of standard SQL update statements

1. Environment: MySQL-5.0.41-win32 Windows XP Pro...

Teach you how to deploy Vue project with Docker

1.Write in front: As a lightweight virtualization...

How to write a MySQL backup script

Preface: The importance of database backup is sel...

Brief analysis of the various versions of mysql.data.dll driver

Here is the mysql driver mysql.data.dll Notice: T...

MySQL multi-instance configuration application scenario

Table of contents MySQL multiple instances Multi-...

Zabbix3.4 method to monitor mongodb database status

Mongodb has a db.serverStatus() command, which ca...

Detailed steps to build the TypeScript environment and deploy it to VSCode

Table of contents TypeScript environment construc...

How to enable MySQL remote connection in Linux server

Preface Learn MySQL to reorganize previous non-MK...

Form submission refresh page does not jump source code design

1. Design source code Copy code The code is as fol...

52 SQL statements to teach you performance optimization

1. To optimize the query, try to avoid full table...