Implementing a web calculator based on JavaScript
|
This article shares the specific code of JavaScript to implement the minesweeper game of the web calculator for your reference. The specific content is as follows First look at the effect:
In addition, the calculator also comes with digital and operator checking functions:
Paste the source code below:
<!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>Calculator</title>
<script language="javascript">
var oper1=prompt("Please enter the first operand:");
var oper2 = prompt("Please enter the second operand: ");
var operator=prompt("Please enter the operator (+, -, *, /)");
parse();
var result;
switch(operator)
{
case"+":
result=doSum(oper1,oper2);
alert(oper1+"+"+oper2+"="+result);
break;
case"-":
result = doSubstract (oper1, oper2);
alert(oper1+"-"+oper2+"="+result);
break;
case"*":
result = doMultiply(oper1,oper2);
alert(oper1+"*"+oper2+"="+result);
break;
case"/":
result = doDivide(oper1,oper2);
alert(oper1+"/"+oper2+"="+result);
break;
default:
alert("The operator entered is illegal");
}
function parse(){
if(isNaN(oper1)||isNaN(oper2)){
alert("The number entered is illegal");
}
else{
oper1 = parseFloat(oper1);
oper2 = parseFloat(oper2);
}
}
function doSum(oper1,oper2){
return oper1+oper2;
}
function doSubstract(oper1,oper2){
return oper1-oper2;
}
function doMultiply(oper1,oper2){
return oper1*oper2;
}
function doDivide(oper1,oper2){
return oper1/oper2;
}
</script>
</head>
<body>
</body>
</html> Of course, only the JavaScript source code is shown here. You can also use html+css to design a nice appearance for the calculator. You can feel free to use it. 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:
|
<<: Detailed explanation of common MySQL operation commands in Linux terminal
>>: Complete steps for mounting a new data disk in CentOS7
Recommend
Detailed explanation of the basic implementation principle of MySQL DISTINCT
Preface DISTINCT is actually very similar to the ...
mysql root user cannot be authorized and solve the problem of navicat remote authorization prompt 1044
Look at the solution first #------------The probl...
JavaScript to make the picture move with the mouse
This article shares the specific code of JavaScri...
How to write memory-efficient applications with Node.js
Table of contents Preface Problem: Large file cop...
Example code for using CSS to darken the font color of the selected area when scrolling
When encapsulating the date picker, you need to d...
A brief talk on responsive design
1. What is responsive design? Responsive design i...
How to understand the difference between computed and watch in Vue
Table of contents Overview computed watch monitor...
Tips on making web pages for mobile phones
Considering that many people now use smartphones, ...
Why is UTF-8 not recommended in MySQL?
I recently encountered a bug where I was trying t...
Summary of practical skills commonly used in Vue projects
Table of contents Preface 1. Use $attrs and $list...
Mybatis mysql delete in operation can only delete the first data method
Bugs As shown in the figure, I started to copy th...
Detailed explanation of communication between hierarchical nested components in Vue front-end development
Table of contents Preface Example summary Preface...
Introduction to JavaScript strict mode use strict
Table of contents 1. Overview 1.1 What is strict ...
Detailed explanation of mysql deadlock checking and deadlock removal examples
1. Query process show processlist 2. Query the co...
About front-end JavaScript ES6 details
Table of contents 1. Introduction 1.1 Babel Trans...