如何用HTML編寫計算器

IT科技
關注：1.23W次

部分1：瞭解程式碼1、瞭解html各項標籤的功能。部分2：基本的HTML計算器程式碼1、複製下面的程式碼。部分3：建立計算器1、開啟電腦裡的文字編輯程式。2、將計算器的HTML程式碼貼上到文件中。3、儲存檔案。4、將HTML副檔名新增到檔名。部分4：使用計算器1、找到你剛才建立的檔案。2、點選檔案開啟它。3、點選計算器上的按鈕來使用它。要在電腦上做數學題？方法有很多，比如使用內建的計算器，或者自己用簡單的HTML程式碼編寫一個計算器。如果你選擇第二種方法，首先得了解一些基礎的HTML知識，然後將必要的程式碼複製到文字編輯器中，並以HTML為副檔名儲存起來。之後用瀏覽器開啟這個HTML檔案，就能使用計算器了。你不僅可以在瀏覽器做數學題，還能學到基礎的編碼技巧，可謂一舉兩得！

部分1：瞭解程式碼

1、瞭解html各項標籤的功能。HTML語言是由一系列標籤組成的，這些標籤定義了HTML的各種元素，而我們要做的是將不同元素組合起來實現計算器。點選這裡深入瞭解HTML，或者繼續往下閱讀，瞭解在計算器程式碼中每一行文字所起的作用。html：這個標籤告知此檔案用哪一種語言編寫程式碼。有好幾種語言可以用來編寫程式碼，<html>標籤說明了文件是根據html語法使用html語言編寫的。

head: 規定文件相關的元資料（metadata），通常用來定義文件的風格元素，比如網頁標題、文字標題等。不妨把它想成一個概括了文件各種頭部屬性和資訊的雨傘術語。

title: 告知頁面標題。這項屬性定義文件的標題，也就是用瀏覽器開啟html文件後顯示在視窗標題欄的名稱。

body bgcolor= "#": 這項屬性規定文件主體的背景顏色。#號後面的數字對應一種預定義的顏色。

text= "": 在text屬性的引號之間規定文件文字的顏色。

form name=""：這項屬性規定表單名稱，根據Javascript對名稱定義的理解用於建立後面的結構。舉個例子，我們的表單名稱為計算器（calculator），它會被用來給文件之後的內容建立一個具體結構。

input type="": 行為發生的地方。這個屬性告知文件input標籤於網頁中所要展現的屬性型別，可以是文字、密碼、按鈕等。計算器使用的input型別是按鈕。

value="": 這個指令告知文件上述input元素的設定值。以計算器程式碼為例，設定值將是數字（1-9）和運算(+、-、*、/、=)。

onClick="": 這個事件屬性告知文件在點選按鈕時會觸發某個事件。編寫計算器程式碼時，我們需要每個按鈕上的字元被點選後按字面意思顯示在結果框。以“6”按鈕為例，在onClick屬性的引號之間輸入document.calculator.ans.value+='6'。

br: 在文件中啟動換行。此標記後面的內容會在先前內容的下一行顯示。

/form、/body和/html: 告知在文件早前部分啟動的指令現在結束了。

部分2：基本的HTML計算器程式碼

1、複製下面的程式碼。選中文字框裡的內容。將滑鼠移到文字框左上角，按住滑鼠，一直往下拖動到右下角，被選中的文字會變成藍色。之後，在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>