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
Example code of CSS layout at both ends (using parent's negative margin)
Recently, during the development process, I encou...
A must-read career plan for web design practitioners
Original article, please indicate the author and ...
Vue implements setting multiple countdowns at the same time
This article example shares the specific code of ...
MySQL's conceptual understanding of various locks
Optimistic Locking Optimistic locking is mostly i...
Various ways to achieve the hollowing effect of CSS3 mask layer
This article introduces 4 methods to achieve mask...
How to install Docker on Windows 10 Home Edition
I recently used Docker to upgrade a project. I ha...
Two implementation solutions for vuex data persistence
Table of contents Business requirements: Solution...
MySQL 5.7.20 installation and configuration method graphic tutorial (win10)
This article shares the installation and configur...
JavaScript array deduplication solution
Table of contents Method 1: set: It is not a data...
What you need to know about MySQL auto-increment ID
Introduction: When using MySQL to create a table,...
A detailed introduction to for/of, for/in in JavaScript
Table of contents In JavaScript , there are sever...
Installation tutorial of mysql 8.0.11 compressed version under win10
This article shares the installation tutorial of ...
Steps to customize icon in Vue
ant-design-vue customizes the use of Ali iconfont...
Centos7 startup process and Nginx startup configuration in Systemd
Centos7 startup process: 1.post(Power-On-Self-Tes...
Multiple ways to implement two-column layout with fixed width on the left and adaptive width on the right using CSS
7 ways to implement a two-column layout with fixe...