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

Detailed explanation of DBeaver connecting to MySQL version 8 and above and solving possible problems

Database MySQL version 8.0.18 Download a DBeaver....

Implementation code for adding slash to Vue element header

<template> <div class="app-containe...

The difference between mysql outer join and inner join query

The syntax for an outer join is as follows: SELEC...

Implementation code of jquery step progress axis plug-in

A jQuery plugin every day - step progress axis st...

Perfect solution to the problem of connection failure after MySQL client authorization

Deploy the MySQL environment locally (192.168.1.1...

An article to understand the advanced features of K8S

Table of contents K8S Advanced Features Advanced ...

Three methods to modify the hostname of Centos7

Method 1: hostnamectl modification Step 1 Check t...

Solution to the problem that the MySQL database cannot be accessed by other IP addresses

Preface Still referring to the project mentioned ...

HTML head tag meta to achieve refresh redirection

Copy code The code is as follows: <html> &l...

Introduction to the steps of deploying redis in docker container

Table of contents 1 redis configuration file 2 Do...

MySQL Series 10 MySQL Transaction Isolation to Implement Concurrency Control

Table of contents 1. Concurrent access control 2....

Example of how to deploy a Django project using Docker

It is also very simple to deploy Django projects ...

Linux uses dual network card bond and screwdriver interface

What is bond NIC bond is a technology that is com...

Detailed explanation of Vite's new experience

What is Vite? (It’s a new toy on the front end) V...

Detailed explanation of the relationship between Linux and GNU systems

Table of contents What is the Linux system that w...