Rumah > hujung hadapan web > tutorial js > JS实现的简单四则运算计算器功能示例

JS实现的简单四则运算计算器功能示例

韦小宝
Lepaskan: 2018-01-17 10:32:15
asal
1872 orang telah melayarinya

这篇文章主要介绍了JS实现的简单四则运算计算器功能,涉及javascript事件响应及数值运算相关操作技巧,对js感兴趣的朋友可以参考下本篇文章

具体代码如下:

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

<!DOCTYPE html>

<html>

<meta name="content-type" content="text/html; charset=UTF-8">

<head>

  <title>www.php.cn     计算器 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"

    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(&#39;+&#39;)"

          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(&#39;-&#39;)"

          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(&#39;*&#39;)"

          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(&#39;.&#39;)"

          style="height: 70px; width: 90px; font-size: 35px">

    </td>

    <td>

      <input type="button" value="/" id="pision"

          onclick="onclicknum(&#39;/&#39;)"

          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>

Salin selepas log masuk

以上就是本篇文章的所有内容,希望对大家学习提供到帮助!!

相关推荐:

最全JavaScript学习总结

JavaScript体验异步更好的解决办法分享

JavaScript实现多重继承实例详解

Atas ialah kandungan terperinci JS实现的简单四则运算计算器功能示例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan