HTML實現簡單計算器附詳細思路

2020-03-24 17:27:59

字體：大中小

來源：轉載

供稿：網友

復制代碼代碼如下:
!DOCTYPE html
html
meta name="content-type" content="text/html; charset=UTF-8"
head
title Calculator /title
!--將按鍵內容以字符串形式存儲在文字框中當按鈕為 = 時，調用eval方法計算結果然后將結果輸出文字框中--
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"
!--定義按鍵表格,每個按鍵對應一個事件觸發--
table border="1" align="center" bgColor="#bbff77"

tr
td colspan="4"
input type="text" id="nummessege"
/
/td
/tr
tr
td
input type="button" value="1" id="1"

/td
td
input type="button" value="2" id="2"

/td
td
input type="button" value="3" id="3"

/td
td
input type="button" value="+" id="add"

/td
/tr
tr
td
input type="button" value="4" id="4"

/td
td
input type="button" value="5" id="5"

/td
td
input type="button" value="6" id="6"

/td
td
input type="button" value="-" id="sub"

/td
/tr
tr
td
input type="button" value="7" id="7"

/td
td
input type="button" value="8" id="8"

/td
td
input type="button" value="9" id="9"

/td
td
input type="button" value="*" id="mul"

/td
/tr
tr
td colspan="2"
input type="button" value="0" id="0"

/td
td
input type="button" value="." id="point"

/td
td
input type="button" value="/" id="division"

/td
/tr
tr
td colspan="2"
input type="button" value="Del" id="clear"

/
/td
td colspan="2"
input type="button" value="=" id="result"

/
/td

/tr

/table
/body
/html

html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：HTML的meta標簽用法總結

下一篇：html輸入框只能輸入數字以及只能輸入字母數字組合的詳細介紹