Simple calculator written in javascript
I recently wrote a simple calculator using javascript. I tested it myself and it seemed fine. Let me show you the interface first:
The interface is like this, but what is the function? Woolen cloth?
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 an error occurs when the dividend is divided by zero, a prompt will be given below, just like this:
I don’t know how to write it, but for novices, this is definitely A big meal, with a lot of things you can come into contact with and learn from. 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:
var num=0,result=0,numshow="0";
var operate=0; //判断输入状态的标志
var calcul=0; //判断计算状态的标志
var quit=0; //防止重复按键的标志
function command(num){
var str=String(document.calculator.numScreen.value); //获得当前显示数据
str=(str!="0") ? ((operate==0) ? str : "") : ""; //如果当前值不是"0"，且状态为0，则返回当前值，否则返回空值;
str=str + String(num); //给当前值追加字符
document.calculator.numScreen.value=str; //刷新显示
operate=0; //重置输入状态
quit=0; //重置防止重复按键的标志
}
function dzero(){
var str=String(document.calculator.numScreen.value);
str=(str!="0") ? ((operate==0) ? str + "00" : "0") : "0"; //如果当前值不是"0"，且状态为0，则返回当str+"00"，否则返回"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"; //如果当前值不是"0"，且状态为0，则返回当前值，否则返回"0";
for(i=0; i<=str.length;i++){ //判断是否已经有一个点号
if(str.substr(i,1)==".") return false; //如果有则不再插入
}
str=str + ".";
document.calculator.numScreen.value=str;
operate=0;
}
function del(){ //退格
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(){ //清除数据
num=0;
result=0;
numshow="0";
document.calculator.numScreen.value="0";
}
function plus(){ //加法
calculate(); //调用计算函数
operate=1; //更改输入状态
calcul=1; //更改计算状态为加
}
function minus(){ //减法
calculate();
operate=1;
calcul=2;
}
function times(){ //乘法
calculate();
operate=1;
calcul=3;
}
function divide(){ //除法
calculate();
operate=1;
calcul=4;
}
function persent(){ //求余
calculate();
operate=1;
calcul=5;
}
function equal(){
calculate(); //等于
operate=1;
num=0;
result=0;
numshow="0";
}
//
function calculate(){
numshow=Number(document.calculator.numScreen.value);
if(num!=0 && quit!=1){ //判断前一个运算数是否为零以及防重复按键的状态
switch(calcul){ //判断要输入状态
case 1:result=num+numshow;break; //计算"+"
case 2:result=num-numshow;break; //计算"-"
case 3:result=num*numshow;break;
case 4:if(numshow!=0){result=num/numshow;}else{document.getElementById("note").innerHTML="被除数不能为零！"; setTimeout(clearnote,4000)} break;
case 5:result=num%numshow;break;
}
quit=1; //避免重复按键
}
else{
result=numshow;
}
numshow=String(result);
document.calculator.numScreen.value=numshow;
num=result; //存储当前值
}
function clearnote(){ //清空提示
document.getElementById("note").innerHTML="";
}html part:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>写给新手：js表单操作（四） 简单计算器（二）</title>
<style type="text/css">
body {
font-size:12px;
font-family:Arial, Georgia, "Times New Roman", Times, serif;
color:#555;
text-align:center;
background-color:#e2e2e2;
}
h6{
margin:0;
font-size:12px;
}
#calculator {
width:240px;
height:auto;
overflow:hidden;
margin:10px auto;
border:#fff 1px solid;
padding-bottom:10px;
background-color:#f2f2f2;
}
#calculator div {
clear:both;
}
#calculator ul{
padding:0;
margin:5px 14px;
border:#fff 1px solid;
height:auto;
overflow:hidden
}
#calculator li{
list-style:none;
float:left;
width:32px;
height:32px;
margin:5px;
display:inline;
line-height:32px;
font-size:14px;
background-color:#eaeaea;
}
#calculator li.tool{
background-color:#e2e2e2;
}
#calculator li:hover{
background-color:#f9f9f9;
cursor:pointer;
}
#calculator li:active{
background-color:#fc0;
cursor:pointer;
}
#calculator li.tool:active{
background-color:#d8e8ff;
cursor:pointer;
}
#calcu-head {
text-align:left;
padding:10px 15px 5px;
}
span.imyeah {
float:right;
color:#ccc;
}
span.imyeah a{
color:#ccc;
}
.screen{
width:200px;
height:24px;
line-height:24px;
padding:4px;
border:#e6e6e6 1px solid;
border-bottom:#f2f2f2 1px solid;
border-right:#f2f2f2 1px solid;
margin:10px auto;
direction:ltr;
text-align:right;
font-size:16px;
color:#999;
}
#calcu-foot{
text-align:left;
padding:10px 15px 5px;
height:auto;
overflow:hidden;
}
span#note{
float:left;
width:210px;
height:auto;
overflow:hidden;
color:red;
}
span.welcome{
clear:both;
color:#999;
}
span.welcome a{
float:right;
color:#999;
}
</style>
<script language="javascript">
//此处插入上面的js代码
</script>
</head>
<body>
<div id="calculator">
<div id="calcu-head"><span class="imyeah">© <a href="http://www.cnblogs.com/imyeah/" target="_blank">I'm Yeah!</a></span><h6 id="简单的计算器">简单的计算器</h6></div>
<form name="calculator" action="" method="get">
<div id="calcu-screen">
<!--配置显示窗口，使用onfocus="this.blur();"避免键盘输入-->
<input type="text" name="numScreen" class="screen" value="0" onfocus="this.blur();" />
</div>
<div id="calcu-btn">
<ul> <!--配置按钮-->
<li onclick="command(7)">7</li>
<li onclick="command(8)">8</li>
<li onclick="command(9)">9</li>
<li class="tool" onclick="del()">←</li>
<li class="tool" onclick="clearscreen()">C</li>
<li onclick="command(4)">4</li>
<li onclick="command(5)">5</li>
<li onclick="command(6)">6</li>
<li class="tool" onclick="times()">×</li>
<li class="tool" onclick="divide()">÷</li>
<li onclick="command(1)">1</li>
<li onclick="command(2)">2</li>
<li onclick="command(3)">3</li>
<li class="tool" onclick="plus()">+</li>
<li class="tool" onclick="minus()">-</li>
<li onclick="command(0)">0</li>
<li onclick="dzero()">00</li>
<li onclick="dot()">.</li>
<li class="tool" onclick="persent()">%</li>
<li class="tool" onclick="equal()">=</li>
</ul>
</div>
<div id="calcu-foot">
<span id="note"></span>
<span class="welcome">欢迎使用javascript计算器！<a href="http://www.cnblogs.com/imyeah" target="_blank">反馈</a></span>
</div>
</form>
</div>
</body>
</html>For more articles related to simple calculators written in javascript, please pay attention to the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1377
52
What key is ac on the calculator?
Feb 24, 2023 am 10:19 AM
The ac key on the calculator is the "all clear" key. The full English name of ac is "All Clear", which means "all clear key"; pressing the ac key means clearing the values in all registers; during number input, the first press Pressing the ac key will clear all values except the memory contents.
What is e in the calculator
Oct 19, 2022 am 11:23 AM
The e in the calculator represents the power of 10, which means the exponent with base 10. For example, 1.99714E13 is equal to 19971400000000; expressing a number in the form of a multiplied by the nth power of 10 is called scientific notation. Notation: When we want to mark or operate something larger or smaller with a large number of digits, we can use scientific notation to avoid wasting a lot of space and time.
Teach you how to open the win10 calculator
Jul 12, 2023 pm 11:21 PM
The win10 system has many powerful functions, which attract many netizens to download, install and use it. There are also many practical gadgets, such as the win10 calculator tool. Some netizens still don’t know how to open the Win10 calculator. Let me teach you how to open the Win10 calculator. Method 1: Search in the Start menu 1. On the Windows 10 system desktop, click the "Start/Calculator" menu item. 2. You can open the calculator window of Windows 10. Method 2: Open Cortana Search 1. On the Windows 10 desktop, click the "Cortana Search" icon in the lower left corner of the taskbar. 2. Enter the keyword "calculator" in the pop-up menu to search, and click the calculator menu item in the search results.
What is a calculator without storage function?
Dec 29, 2020 am 10:59 AM
Calculator without storage function refers to scientific calculator; scientific calculator is a type of electronic calculator that can perform operations such as exponentiation, square root, exponent, logarithm, trigonometric function, statistics, etc., also known as Function calculator; a calculator generally consists of a calculator, a controller, a memory, a keyboard, a display, a power supply, and some optional peripherals and electronic accessories.
An efficient Fibonacci sequence calculator written in PHP
Mar 21, 2024 am 10:06 AM
Efficient Fibonacci sequence calculator: PHP implementation of Fibonacci sequence is a very classic mathematical problem. The rule is that each number is equal to the sum of the previous two numbers, that is, F(n)=F(n -1)+F(n-2), where F(0)=0 and F(1)=1. When calculating the Fibonacci sequence, it can be implemented recursively, but performance problems will occur as the value increases. Therefore, this article will introduce how to write an efficient Fibonacci using PHP
How to implement a simple calculator function using JavaScript?
Oct 27, 2023 pm 02:51 PM
How to implement a simple calculator function using JavaScript? Calculator is one of the commonly used tools in our daily life. It can be used to perform simple mathematical operations. Today, we will use JavaScript to implement a simple calculator function. In this article, I'll show you how to write code in JavaScript to implement basic math operations and calculator interfaces. First, we need to create an HTML file that contains a text for displaying the results of the operation.
How to convert currency on Mac system calculator - How to convert currency on Mac system calculator
Mar 18, 2024 pm 03:58 PM
Friends, do you know how to convert currency on Mac system calculator? Today I will explain how to convert currency on Mac system calculator. If you are interested, please come and take a look with me. I hope it can help you. Step 1: Open the Mac system calculator, click Convert on the menu bar. Step 2: In the Conversion menu, click Currency. Step 3: After selecting the currency to convert, click the Convert button.
What key is ac on the calculator?
Aug 18, 2023 am 09:48 AM
The "AC" key on the calculator means "All Clear". Pressing the AC key will clear all inputs and operations in the calculator and reset the calculator to its initial state, which is equivalent to restarting a calculation.
