HTML implementation of a simple calculator with detailed ideas

HTML implementation of a simple calculator with detailed ideas

Copy code
The code is as follows:

<!DOCTYPE html>
<html>
<meta name="content-type" content="text/html; charset=UTF-8">
<head>
<title>Calculator</title>
<!--Store the key content in the text box as a string. When the button is "=", call the eval method to calculate the result and then output the result in the text box. -->
<script type="text/javascript">
var numresult;
var str;
function onclicknum(nums) {
str = document.getElementById("nummessege");
str.value = str.value + nums;
}
function onclickclear() {
str = document.getElementById("nummessege");
str.value = "";
}
function onclickresult() {
str = document.getElementById("nummessege");
numresult = eval(str.value);
str.value = numresult;
}
</script>
</head>
<body bgcolor="affff" >
<!--Define a key table, each key corresponds to an event trigger-->
<table border="1" align="center" bgColor="#bbff77"
style="height: 350px; width: 270px">
<tr>
<td colspan="4">
<input type="text" id="nummessege"
style="height: 90px; width: 350px; font-size: 50px" />
</td>
</tr>
<tr>
<td>
<input type="button" value="1" id="1" onclick="onclicknum(1)"
style="height: 70px; width: 90px; font-size: 35px">
</td>
<td>
<input type="button" value="2" id="2" onclick="onclicknum(2)"
style="height: 70px; width: 90px; font-size: 35px">
</td>
<td>
<input type="button" value="3" id="3" onclick="onclicknum(3)"
style="height: 70px; width: 90px; font-size: 35px">
</td>
<td>
<input type="button" value="+" id="add" onclick="onclicknum('+')"
style="height: 70px; width: 90px; font-size: 35px">
</td>
</tr>
<tr>
<td>
<input type="button" value="4" id="4" onclick="onclicknum(4)"
style="height: 70px; width: 90px; font-size: 35px">
</td>
<td>
<input type="button" value="5" id="5" onclick="onclicknum(5)"
style="height: 70px; width: 90px; font-size: 35px">
</td>
<td>
<input type="button" value="6" id="6" onclick="onclicknum(6)"
style="height: 70px; width: 90px; font-size: 35px">
</td>
<td>
<input type="button" value="-" id="sub" onclick="onclicknum('-')"
style="height: 70px; width: 90px; font-size: 35px">
</td>
</tr>
<tr>
<td>
<input type="button" value="7" id="7" onclick="onclicknum(7)"
style="height: 70px; width: 90px; font-size: 35px">
</td>
<td>
<input type="button" value="8" id="8" onclick="onclicknum(8)"
style="height: 70px; width: 90px; font-size: 35px">
</td>
<td>
<input type="button" value="9" id="9" onclick="onclicknum(9)"
style="height: 70px; width: 90px; font-size: 35px">
</td>
<td>
<input type="button" value="*" id="mul" onclick="onclicknum('*')"
style="height: 70px; width: 90px; font-size: 35px">
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="0" id="0" onclick="onclicknum(0)"
style="height: 70px; width: 190px; font-size: 35px">
</td>
<td>
<input type="button" value="." id="point" onclick="onclicknum('.')"
style="height: 70px; width: 90px; font-size: 35px">
</td>
<td>
<input type="button" value="/" id="division"
onclick="onclicknum('/')"
style="height: 70px; width: 90px; font-size: 35px">
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="Del" id="clear"
onclick="onclickclear()"
style="height: 70px; width: 190px; font-size: 35px" />
</td>
<td colspan="2">
<input type="button" value="=" id="result"
onclick="onclickresult()"
style="height: 70px; width: 190px; font-size: 35px" />
</td>

</tr>

</table>
</body>
</html>

<<:  JavaScript event delegation principle

>>:  How to expand the capacity of VirtualBox's virtual disk vdi file (graphic tutorial)

Recommend

How to use a game controller in CocosCreator

Table of contents 1. Scene layout 2. Add a handle...

Methods and problems encountered in installing mariadb in centos under mysql

Delete the previously installed mariadb 1. Use rp...

How to find the specified content of a large file in Linux

Think big and small, then redirect. Sometimes Lin...

Two ways to understand CSS priority

Method 1: Adding values Let's go to MDN to se...

Solve the problem of 8 hours difference between docker container and host machine

When using docker-compose for deployment, the out...

Installation tutorial of mysql 8.0.11 compressed version under win10

This article shares the installation tutorial of ...

Vue component encapsulates sample code for uploading pictures and videos

First download the dependencies: cnpm i -S vue-uu...

Detailed explanation of Nginx process management and reloading principles

Process structure diagram Nginx is a multi-proces...

Solution to find all child rows for a given parent row in MySQL

Preface Note: The test database version is MySQL ...

The process of installing MySQL 8.0.26 on CentOS7

1. First, download the corresponding database fro...

Use js to call js functions in iframe pages

Recently, I have been working on thesis proposals ...

Detailed explanation of the three major front-end technologies of React, Angular and Vue

Table of contents 1. React Basic Usage Notable Fe...

CentOS7 deploys version 19 of docker (simple, you can follow it)

1. Install dependency packages [root@localhost ~]...

How to change the encoding of MySQL database to utf8mb4

The utf8mb4 encoding is a superset of the utf8 en...

Is it true that the simpler the web design style, the better?

Original address: http://www.webdesignfromscratch...