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
Native JS to achieve special effects message box
This article shares with you a special effect mes...
Pure CSS to modify the browser scrollbar style example
Use CSS to modify the browser scroll bar style ::...
Example of automatic stop effect after text scrolling
The effect is very simple, just copy the following...
WeChat applet implements video player sending bullet screen
This article shares the specific code for WeChat ...
Specific use of MySQL segmentation function substring()
There are four main MySQL string interception fun...
Two tools for splitting the screen in the Linux command line terminal
Here are two terminal split screen tools: screen ...
My CSS architecture concept - it varies from person to person, there is no best, only suitable
Preface <br />I have been working in the fro...
How to install Django in a virtual environment under Ubuntu
Perform the following operations in the Ubuntu co...
Detailed explanation of the use of docker tag and docker push
Docker tag detailed explanation The use of the do...
Example of adding music video to HTML page
1. Video tag Supports automatic playback in Firef...
Brief Analysis of MySQL B-Tree Index
B-Tree Index Different storage engines may also u...
Explanation of the working principle and usage of redux
Table of contents 1. What is redux? 2. The princi...
How to solve nginx 503 Service Temporarily Unavailable
Recently, after refreshing the website, 503 Servi...
How to choose the right MySQL datetime type to store your time
When building a database and writing a program, i...
How to use VLAN tagged Ethernet card in CentOS/RHEL system
In some scenarios, we want to assign multiple IPs...