search
HomeWeb Front-endJS TutorialA simple calculator written in javascript, with a lot of content and practical methods, recommended_javascript skills

I recently wrote a simple calculator using javascript. I tested it myself and it felt fine. Let me show you the interface first:

The interface is like this, but what about the functions?

Now it is just a simple standard calculator that can perform continuous operations of addition, subtraction, multiplication and division, as well as remainder operations. If a zero dividend error occurs, a prompt will be given below, like this:

I don’t know how it is written, but for novices, this is definitely a big meal, and there are many things that can be accessed and learned. If there are any experts who see any omissions or mistakes in it, I hope they will give you some advice and pointers.

Paste the code below, I hope there are enough comments inside.
js part:

Copy code The code is as follows:

var num=0,result =0,numshow="0";
var operate=0; //Flag to judge input status
var calcul=0; //Flag to judge calculation status
var quit=0; //Prevent Flag of repeated keystrokes
function command(num){
var str=String(document.calculator.numScreen.value); //Get the current display data
str=(str!="0") ? ((operate==0) ? str : "") : ""; //If the current value is not "0" and the status is 0, return the current value, otherwise return a null value;
str=str String( num); //Append characters to the current value
document.calculator.numScreen.value=str; //Refresh the display
operate=0; //Reset the input status
quit=0; //Reset Set the flag to prevent repeated key presses
}
function dzero(){
var str=String(document.calculator.numScreen.value);
str=(str!="0") ? ( (operate==0) ? str "00" : "0") : "0"; //If the current value is not "0" and the status is 0, then return str "00", otherwise return "0";
document.calculator.numScreen.value=str;
operate=0;
}
function dot(){
var str=String(document.calculator.numScreen.value);
str=(str!="0") ? ((operate==0) ? str : "0") : "0"; //If the current value is not "0" and the status is 0, return the current value, otherwise return "0";
for(i=0; iif(str.substr(i,1)= =".") return false; //If there is, no more inserting
}
str=str ".";
document.calculator.numScreen.value=str;
operate=0;
}
function del(){ //Backspace
var str=String(document.calculator.numScreen.value);
str=(str!="0") ? str : " ";
str=str.substr(0,str.length-1);
str=(str!="") ? str : "0";
document.calculator.numScreen.value= str;
}
function clearscreen(){ //Clear data
num=0;
result=0;
numshow="0";
document.calculator.numScreen. value="0";
}
function plus(){ //Add
calculate(); //Call calculation function
operate=1; //Change input status
calcul= 1; //Change the calculation status to addition
}
function minus(){ //Subtraction
calculate();
operate=1;
calcul=2;
}
function times(){ //Multiplication
calculate();
operate=1;
calcul=3;
}
function divide(){ //Division
calculate ();
operate=1;
calcul=4;
}
function present(){ //Find remainder
calculate();
operate=1;
calcul=5;
}
function equal(){
calculate(); //Equal to
operate=1;
num=0;
result=0;
numshow="0";
}
//
function calculate(){
numshow=Number(document.calculator.numScreen.value);
if(num!=0 && quit !=1){ //Determine whether the previous operand is zero and the status of anti-repeat keystrokes
switch(calcul){ //Determine the input status
case 1:result=num numshow;break; // Calculate " "
case 2:result=num-numshow;break; //Calculate "-"
case 3:result=num*numshow;break;
case 4:if(numshow!=0) {result=num/numshow;}else{document.getElementById("note").innerHTML="The dividend cannot be zero! "; setTimeout(clearnote,4000)} break;
case 5:result=num%numshow;break;
}
quit=1; //Avoid repeated key presses
}
else{
result=numshow;
}
numshow=String(result);
document.calculator.numScreen.value=numshow;
num=result; //Storing the current value
}
function clearnote(){ //Clear the prompt
document.getElementById("note").innerHTML="";
}

html part:
Copy code The code is as follows:





写给新手:js表单操作(四) 简单计算器(二)





© I'm Yeah!
简单的计算器








  • 7

  • 8

  • 9


  • C

  • 4

  • 5

  • 6

  • ×

  • ÷

  • 1

  • 2

  • 3

  • +

  • -

  • 0

  • 00

  • .

  • %

  • =





欢迎使用javascript计算器!反馈





Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
计算器上的ac是什么键计算器上的ac是什么键Feb 24, 2023 am 10:19 AM

计算器上的ac是“全部清除”键,ac的英文全称是“All Clear”,表示“全清键”;按下ac键表示清除所有寄存器中的数值;在数字输入期间,第一次按下ac键将清除存储器内容外的所有数值。

计算器中的e是多少计算器中的e是多少Oct 19, 2022 am 11:23 AM

计算器中的e表示10的幂,即表示以10为底的指数,比如1.99714E13就等于19971400000000;把一个数表示成a与10的n次幂相乘的形式,这种记数法叫做科学记数法;当我们要标记或运算某个较大或较小且位数较多时,用科学记数法免去浪费很多空间和时间。

教你win10计算器怎么打开教你win10计算器怎么打开Jul 12, 2023 pm 11:21 PM

win10系统有很多强大的功能,吸引不少网友下载安装使用,其中也有很多实用的小工具,比如说win10计算器工具。有网友还不清楚win10计算器怎么打开,下面小编就教下大家打开win10计算器的方法。方法一:开始菜单中查找1、在Windows10系统桌面,依次点击“开始/计算器”菜单项。2、就可以打开Windows10的计算器窗口了。方法二:小娜搜索打开1、在Windows10桌面,点击任务栏左下角的“小娜搜索”的图标。2、在弹出的菜单中输入“计算器”的关键词进行搜索,点击搜索结果中的计算器菜单项

无存储功能的计算器指的是什么无存储功能的计算器指的是什么Dec 29, 2020 am 10:59 AM

无存储功能的计算器指的是科学型计算器;科学型计算器是电子计算器的一种,可进行乘方、开方、指数、对数、三角函数、统计等方面的运算,又称函数计算器;计算器一般由运算器、控制器、存储器、键盘、显示器、电源和一些可选外围设备及电子配件组成。

用PHP编写的高效斐波那契数列计算器用PHP编写的高效斐波那契数列计算器Mar 21, 2024 am 10:06 AM

高效斐波那契数列计算器:PHP实现斐波那契数列(Fibonaccisequence)是一个非常经典的数学问题,其规律是每个数等于前两个数之和,即F(n)=F(n-1)+F(n-2),其中F(0)=0,F(1)=1。在计算斐波那契数列时,可以使用递归方式来实现,但随着数值增大会出现性能问题。因此,本文将介绍如何使用PHP编写一个高效的斐波那

计算器上ac是什么键计算器上ac是什么键Aug 18, 2023 am 09:48 AM

计算器上的"AC" 键表示 "All Clear"的意思,按下AC键会清除计算器中的所有输入和操作,将计算器重置为初始状态,相当于重新开始一次计算。

编写一个简单的计算器的C/C++程序编写一个简单的计算器的C/C++程序Sep 02, 2023 pm 10:49 PM

简单计算器是执行一些基本运算的计算器,例如“+”、“-”、“*”、“/”。计算器可以快速完成基本操作。我们将使用switch语句来制作一个计算器。示例Operator−‘+’=>34+324=358Operator−‘-’=>3874-324=3550Operator−‘*’=>76*24=1824O

如何使用 JavaScript 实现一个简单的计算器功能?如何使用 JavaScript 实现一个简单的计算器功能?Oct 27, 2023 pm 02:51 PM

如何使用JavaScript实现一个简单的计算器功能?计算器是我们日常生活中常用的工具之一,它可以用来进行简单的数学运算。今天,我们将使用JavaScript实现一个简单的计算器功能。在本文中,我将为您介绍如何使用JavaScript编写代码来实现基本的数学运算和计算器界面。首先,我们需要创建一个HTML文件,其中包含一个用于显示运算结果的文

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools