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

Install OpenSSH on Windows and log in to the Linux server by generating an SSH key

The full name of SSH is Secure SHell. By using SS...

The image element img has extra blank space in IE6

When doing DIV+CSS layout of the page, it is very...

CSS sets the box container (div) height to always be 100%

Preface Sometimes you need to keep the height of ...

Linux implements the source code of the number guessing game

A simple Linux guessing game source code Game rul...

Ubuntu 15.04 opens mysql remote port 3306

Ubuntu 15.04 opens MySQL remote port 3306. All th...

MySQL 5.7 JSON type usage details

JSON is a lightweight data exchange format that u...

9 Tips for Web Page Layout

<br />Related articles: 9 practical suggesti...

Sample code for implementing PC resolution adaptation in Vue

Table of contents plan Install Dependencies Intro...

Introduction to MySQL role functions

Table of contents Preface: 1. Introduction to rol...

HTML+CSS+JS to implement the Don't Step on the Whiteboard game

Table of contents Background 1. Thought Analysis ...

Detailed steps for installing, configuring and uninstalling QT5 in Ubuntu 14.04

1. I downloaded QT5.13 version before, but after ...

Example of pre-rendering method for Vue single page application

Table of contents Preface vue-cli 2.0 version vue...

WeChat applet realizes the function of uploading pictures

This article example shares the specific code for...

How to mark the source and origin of CSS3 citations

I am almost going moldy staying at home due to th...

Basic ideas for finding errors in Web front-end development

WEB development mainly consists of two interactio...