HTML怎样实现简单计算器


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

这次给大家带来HTML怎样实现简单计算器,HTML实现简单计算器的注意事项有哪些,下面就是实战案例,一起来看一下。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

<!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

onclick

num(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"

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>

相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

怎样让html的下拉菜单提交后保留选中值不返回默认值

html的元素如何设置焦点

html如何用超链接打开新窗口时控制其属性

以上就是HTML怎样实现简单计算器的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

Html图片的img标签怎样使用

Html的区块元素

Html5 header标签是什么意思?Html5 header标签的用法详解(附实例)

Html中div标签、section标签和acticle标签三者有啥区别

Html<p>标签是什么元素?关于Html p标签的定义和作用详解

如何选择web前端模板引擎(推荐)

Html中div与span对比

Html实现实时效果查看功能

Html翻转效果怎么实现

Html搜索框怎么设置?Html搜索框input标签的使用方法实例

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...