Native js to implement a simple calculator
|
This article example shares the specific code of js to implement a simple calculator for your reference. The specific content is as follows Recently, the blogger was bored and wrote a simple calculator using js (the blogger is working on the backend, not the frontend >_<). In fact, I feel very happy working on the front-end. It is very fulfilling to create something by myself. Without further ado, here is the source code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Calculator</title>
<style>
#b1{
text-align: center;
background-color: lightblue;
width: 650px;
height: 650px;
border: 1px solid black;
margin-left: 400px;
border-radius: 18px;
}
#b2{
text-align: center;
width: 300px;
height: 80px;
margin-top: 30px;
font-family: "Microsoft YaHei";
font-size: 20px;
border-radius: 8px;
outline:none;
}
ul{
list-style-type: none;
}
li{
float: left;
margin-left: 40px;
margin-top: 30px;
}
li input{
width: 100px;
height: 50px;
border-radius: 8px;
font-family: "Microsoft YaHei";
font-size: 20px;
outline:none;
}
li input:hover{
background-color:red ;
}
</style>
<script>
var beforeNum=0;
function addNum(a){
beforeNum=document.getElementById("b2").value;
var nowNum=beforeNum;
if(beforeNum!=0){
nowNum=beforeNum+a;
}else{
if(beforeNum.substring(beforeNum.length-2,beforeNum.length-1)=="."){
nowNum=beforeNum+a;
}
if(a!="+"&&a!="-"&&a!="*"&&a!="/"&&(beforeNum.substring(beforeNum.length-2,beforeNum.length-1)!=".")){
nowNum=a;
}
}
document.getElementById("b2").value=nowNum;
}
function jisuan(){
document.getElementById("b2").value=eval(document.getElementById("b2").value);
}
function clearNum(){
document.getElementById("b2").value=0;
}
function backAgain(){
beforeNum=document.getElementById("b2").value;
if(beforeNum.length!=1){
document.getElementById("b2").value=beforeNum.substring(0,beforeNum.length-1);
}else if(beforeNum.length==1){
document.getElementById("b2").value=0;
}
}
function addPoint(b){
beforeNum=document.getElementById("b2").value;
if((beforeNum.indexOf(".")!=beforeNum.length-1)){
document.getElementById("b2").value=beforeNum+b;
}
}
function offCl(){
document.getElementById("b2").value="";
}
</script>
</head>
<body>
<div id="b1">
<p style="font-size: 20px;">Online simple calculator</p>
<div><input id="b2" name="wenben" value="0"/></div>
<div>
<ul>
<li><input type="button" value="1" onclick="addNum(this.value);"/></li>
<li><input type="button" value="2" onclick="addNum(this.value);"/></li>
<li><input type="button" value="3" onclick="addNum(this.value);"/></li>
<li><input type="button" value="4" onclick="addNum(this.value);"/></li>
</ul>
<ul>
<li><input type="button" value="5" onclick="addNum(this.value);"/></li>
<li><input type="button" value="6" onclick="addNum(this.value);"/></li>
<li><input type="button" value="7" onclick="addNum(this.value);"/></li>
<li><input type="button" value="8" onclick="addNum(this.value);"/></li>
</ul>
<ul>
<li><input type="button" value="9" onclick="addNum(this.value);"/></li>
<li><input type="button" value="0" onclick="addNum(this.value);"/></li>
<li><input type="button" value="+" onclick="addNum(this.value);"/></li>
<li><input type="button" value="-" onclick="addNum(this.value);"/></li>
</ul>
<ul>
<li><input type="button" value="*" onclick="addNum(this.value);"/></li>
<li><input type="button" value="/" onclick="addNum(this.value);"/></li>
<li><input type="button" value="." onclick="addPoint(this.value);"/></li>
<li><input type="button" value="=" onclick="jisuan();"/></li>
</ul>
</ul>
<ul>
<li><input type="button" value="Back" onclick="backAgain();"/></li>
<li><input type="button" value="Clear" onclick="clearNum();"/></li>
<li><input type="button" value="Shutdown" onclick="offCl();"/></li>
</ul>
</div>
</div>
</body>
</html>The effect diagram of code running.
In addition, the blogger performed a series of algorithm judgments when writing js functions and screened out some non-standard algorithms. If you are interested, you can extend these algorithm verifications. If you have any ideas or suggestions, you can communicate with the blogger. 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:
|
<<: Solution to 1045 error in mysql database
>>: Solution to forgetting the root password of MySQL 5.7 and 8.0 database
Recommend
Practical notes on installing Jenkins with docker-compose
Create a Directory cd /usr/local/docker/ mkdir je...
Detailed explanation of the usage and differences of MySQL views and indexes
MySQL Views Simply put, a MySQL view is a shortcu...
How to generate Hive table creation statement comment script in MySQL metadata
Preface This article mainly introduces the releva...
Summary of the use of CSS scope (style splitting)
1. Use of CSS scope (style division) In Vue, make...
CSS method of controlling element height from bottom to top and from top to bottom
Let’s start the discussion from a common question...
A brief discussion on the execution order of JavaScript macrotasks and microtasks
Table of contents 1. JavaScript is single-threade...
How to store text and pictures in MySQL
Large Text Data Types in Oracle Clob long text ty...
vue+echarts realizes the flow effect of China map (detailed steps)
@vue+echarts realizes the flow effect of China ma...
This article will help you thoroughly understand the specific use of cgroup in Docker
Table of contents What is cgroup Composition of c...
Implementation of clicking through the transparent area of irregular forms in Electron
Table of contents Implementing an irregular form ...
Linux CentOS MySQL database installation and configuration tutorial
Notes on installing MySQL database, share with ev...
Practical operation of using any font in a web page with demonstration
I have done some research on "embedding non-...
Why should the number of rows in a single MySQL table not exceed 5 million?
Today, let’s discuss an interesting topic: How mu...
React realizes the whole process of page watermark effect
Table of contents Preface 1. Usage examples 2. Im...