如何用HTML编写计算器

共同创作者是 wikiHow员工

要在电脑上做数学题？方法有很多，比如使用内置的计算器，或者自己用简单的HTML代码编写一个计算器。如果你选择第二种方法，首先得了解一些基础的HTML知识，然后将必要的代码复制到文本编辑器中，并以HTML为扩展名保存起来。之后用浏览器打开这个HTML文件，就能使用计算器了。你不仅可以在浏览器做数学题，还能学到基础的编码技巧，可谓一举两得！

部分 1

部分 1 的 4:

了解代码

下载PDF文件

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/08\/Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/08\/Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

1
了解html各项标签的功能。 HTML语言是由一系列标签组成的，这些标签定义了HTML的各种元素，而我们要做的是将不同元素组合起来实现计算器。点击这里深入了解HTML ，或者继续往下阅读，了解在计算器代码中每一行文本所起的作用。
- html ：这个标签告知此文件用哪一种语言编写代码。有好几种语言可以用来编写代码，<html>标签说明了文档是根据html语法使用html语言编写的。 ^{[1]
  X
  研究来源}
- head : 规定文档相关的元数据（metadata），通常用来定义文档的风格元素，比如网页标题、文本标题等。不妨把它想成一个概括了文档各种头部属性和信息的雨伞术语。 ^{[2]
  X
  研究来源}
- title : 告知页面标题。这项属性定义文档的标题，也就是用浏览器打开html文档后显示在窗口标题栏的名称。
- body bgcolor= "#" : 这项属性规定文档主体的背景颜色。#号后面的数字对应一种预定义的颜色。
- text= "" : 在text属性的引号之间规定文档文本的颜色。
- form name="" ：这项属性规定表单名称，根据Javascript对名称定义的理解用于创建后面的结构。举个例子，我们的表单名称为计算器（calculator），它会被用来给文档之后的内容创建一个具体结构。 ^{[3]
  X
  研究来源}
- input type="" : 行为发生的地方。这个属性告知文档input标签于网页中所要展现的属性类型，可以是文本、密码、按钮等。计算器使用的input类型是按钮。 ^{[4]
  X
  研究来源}
- value="" : 这个指令告知文档上述input元素的设定值。以计算器代码为例，设定值将是数字（1-9）和运算(+、-、*、/、=)。 ^{[5]
  X
  研究来源}
- onClick="" : 这个事件属性告知文档在点击按钮时会触发某个事件。编写计算器代码时，我们需要每个按钮上的字符被点击后按字面意思显示在结果框。以“6”按钮为例，在onClick属性的引号之间输入document.calculator.ans.value+='6'。 ^{[6]
  X
  研究来源}
- br : 在文档中启动换行。此标记后面的内容会在先前内容的下一行显示。 ^{[7]
  X
  研究来源}
- /form、/body和/html : 告知在文档早前部分启动的指令现在结束了。 ^{[8]
  X
  研究来源}
广告

部分 2

部分 2 的 4:

基本的HTML计算器代码

下载PDF文件

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/4b\/Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4b\/Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

选中文本框里的内容。将鼠标移到文本框左上角，按住鼠标，一直往下拖动到右下角，被选中的文本会变成蓝色。之后，在Mac电脑上同时按“Command”和“C”键，如果是PC电脑则同时按“Ctrl”和“C”键，将代码复制到剪贴板。

 < 
 html 
 > 
 < 
 head 
 > 
 < 
 title 
 > 
HTML计算器 </ 
 title 
 > 
 </ 
 head 
 > 
 < 
 body 
 bgcolor 
 = 
 "#000000" 
 text 
 = 
 "gold" 
 > 
 < 
 form 
 name 
 = 
 "计算器" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "1" 
 onClick 
 = 
 "document.calculator.ans. 
 value+='1'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "2" 
 onClick 
 = 
 "document.calculator.ans. 
 value+='2'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "3" 
 onClick 
 = 
 "document.calculator.ans. 
 value+='3'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "4" 
 onClick 
 = 
 "document.calculator.ans. 
 value+='4'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "5" 
 onClick 
 = 
 "document.calculator.ans. 
 value+='5'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "6" 
 onClick 
 = 
 "document.calculator.ans. 
 value+='6'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "7" 
 onClick 
 = 
 "document.calculator.ans. 
 value+='7'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "8" 
 onClick 
 = 
 "document.calculator.ans. 
 value+='8'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "9" 
 onClick 
 = 
 "document.calculator.ans. 
 value+='9'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "-" 
 onClick 
 = 
 "document.calculator.ans. 
 value+='-'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "+" 
 onClick 
 = 
 "document.calculator.ans. 
 value+='+'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "*" 
 onClick 
 = 
 "document.calculator.ans. 
 value+='*'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "/" 
 onClick 
 = 
 "document.calculator.ans. 
 value+='/'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "0" 
 onClick 
 = 
 "document.calculator.ans. 
 value+='0'" 
 > 
 < 
 input 
 type 
 = 
 "reset" 
 value 
 = 
 "Reset" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "=" 
 onClick 
 = 
 "document.calculator.ans. 
 value=eval(document.calculator.ans.value)" 
 > 
 < 
 br 
 > 
Solution is < 
 input 
 type 
 = 
 "textfield" 
 name 
 = 
 "ans" 
 value 
 = 
 "" 
 > 
 </ 
 form 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >