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输入框只能输入数字以及只能输入字母数字组合的详细介绍