logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

原生JavaScript实现网页版计算器

 新用户604881da 2021-11-11

本文实例为大家分享了JavaScript实现网页版计算器的具体代码，供大家参考，具体内容如下

由于无聊看电脑上的系统软件翻到了计算器这个功能，就简单写一下这个计算器的功能吧，这个网页版计算器基本功能都有吧，但是不是很完全，仅供参考。

 

首先是网页计算器的样式部分不想手写直接复制即可

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

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

        .cal {

            width: 420px;

            margin: 100px auto;

            background-color: #E6E6E6;

            padding: 2px;

            overflow: hidden;

        }

        .show {

            position: relative;

            width: 416px;

            height: 120px;

            font-size: 50px;

            line-height: 50px;

            font-weight: 700;

        }

        .show button {

            display: none;

            position: absolute;

            top: -2px;

            right: -2px;

            width: 60px;

            height: 40px;

            line-height: 40px;

            text-align: center;

            border: transparent;

            background-color: #E6E6E6;

            font-size: 30px;

            font-weight: 100;

            cursor: pointer;

        }

        .show button:hover {

            background-color: #e81123;

            color: #f0f0f0

        }

        .res,

        .left,

        .right {

            position: absolute;

            bottom: 0;

            height: 60px;

            line-height: 60px;

            padding: 0 3px;

        }

        .res {

            right: 0;

            /* width: 100%; */

            text-align: right;

        }

        .left {

            display: none;

            background-color: #E6E6E6;

        }

        .right {

            display: none;

            right: 0;

            background-color: #E6E6E6;

        }

        .left:hover,

        .right:hover {

            color: #2e8eda;

        }

        .keyboard {

            display: flex;

            flex-wrap: wrap;

            justify-content: center;

        }

        .btn {

            display: flex;

            justify-content: center;

            width: 100px;

            height: 60px;

            line-height: 60px;

            margin: 2px;

            background-color: #f0f0f0;

            border: transparent;

            font-size: large;

        }

        .btn:hover {

            background-color: #d6d6d6;

        }

        .digital {

            background-color: #fafafa;

            font-weight: 700;

        }

        .equal {

            background-color: #8abae0;

        }

        .equal:hover {

            background-color: #4599db;

        }

    </style>

</head>

<body>

    <div class="cal">

        <div class="show">

            <button class="close">×</button>

            <div class="res">0</div>

            <div class="left"><</div>

            <div class="right">></div>

        </div>

        <div class="keyboard">

            <!-- 0 -->

            <button class="btn percent">%</button>

            <!-- 1 -->

            <button class="btn clearOne">CE</button>

            <!-- 2 -->

            <button class="btn clearAll">C</button>

            <!-- 3 -->

            <button class="btn back">del</button>

            <!-- 4 -->

            <button class="btn div1">1/x</button>

            <!-- 5 -->

            <button class="btn square">x²</button>

            <!-- 6 -->

            <button class="btn sqrt">²√x</button>

            <!-- 7 -->

            <button class="btn div">÷</button>

            <!-- 8 -->

            <button class="btn digital">7</button>

            <!-- 9 -->

            <button class="btn digital">8</button>

            <!-- 10 -->

            <button class="btn digital">9</button>

            <!-- 11 -->

            <button class="btn mul">x</button>

            <!-- 12 -->

            <button class="btn digital">4</button>

            <!-- 13 -->

            <button class="btn digital">5</button>

            <!-- 14 -->

            <button class="btn digital">6</button>

            <!-- 15 -->

            <button class="btn sub">-</button>

            <!-- 16 -->

            <button class="btn digital">1</button>

            <!-- 17 -->

            <button class="btn digital">2</button>

            <!-- 18 -->

            <button class="btn digital">3</button>

            <!-- 19 -->

            <button class="btn add">+</button>

            <!-- 20 -->

            <button class="btn neg">+/-</button>

            <!-- 21 -->

            <button class="btn digital">0</button>

            <!-- 22 -->

            <button class="btn digital">.</button>

            <!-- 23 -->

            <button class="btn equal">=</button>

        </div>

    </div>

    <script src="./计算机.js"></script>

</body>

</html>

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

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

const bt = document.querySelectorAll('.keyboard button')

const close = document.querySelector('.close')

const res = document.querySelector('.res')

//当点击的数字的时候

let k = 0

let one

let two

function arr(num) {

    bt[num].onclick = function () {

        res.innerText += bt[num].innerText

        res.innerText = parseFloat(res.innerText)

        // console.log(one)

    }

}

//小数点

//保留结果小数

function fn() {

    if (res.innerText.length > 8) {

        res.innerText = res.innerText.slice(0, 10)

    }

    if (res.innerText == 'NaN') {

        res.innerText = 0

    }

}

//当点击的是运算符号的时候

function symbol(str, fu) {

    bt[str].onclick = function () {

        k++

        if (k > 1) {

            return

        }

        one = parseFloat(res.innerText)

        // switch (fu) {

        //     case '+':

        //         one += one

        //         break;

        //     case '-':

        //         one -= one

        //         break;

        //     case '*':

        //         one *= one

        //         break;

        //     case '/':

        //         one /= one

        //         break;

        // }

        res.innerText = ''

        close.style.display = 'block'

        close.innerText = bt[str].innerText

        console.log(one)

    }

}

arr(21)

arr(18)

arr(17)

arr(16)

arr(14)

arr(13)

arr(12)

arr(10)

arr(9)

arr(8)

arr(22)

//运算符号

symbol(0)

symbol(7, '/')

symbol(11, '*')

symbol(15, '-')

symbol(19, '+')

console.log(bt[22].innerText)

bt[22].onclick = function () {

    res.innerText += bt[22].innerText

    console.log(565)

}

bt[23].onclick = function () {

    two = parseFloat(res.innerText)

    switch (close.innerText) {

        case '%':

            //toFixed(11)保留11位小数

            res.innerText = one % two

            k = 0

            break;

        case '+':

            res.innerText = one + two

            k = 0

            break;

        case '-':

            res.innerText = one - two

            k = 0

            break;

        case 'x':

            res.innerText = one * two

            k = 0

            break;

        case '÷':

            res.innerText = one / two

            k = 0

            break;

    }

    // console.log(res.innerText.length)

    fn()

}

bt[1].onclick = function () {

    res.innerText = ''

}

bt[2].onclick = function () {

    res.innerText = '0'

    close.innerText = 'x'

    close.style.display = ''

    one = 0

    two = 0

}

bt[3].onclick = function () {

    res.innerText = res.innerText.slice(0, res.innerText.length - 1)

    if (res.innerText.length === 0) {

        res.innerText = '0'

        return

    }

}

bt[4].onclick = function () {

    res.innerText = 1 / parseFloat(res.innerText)

    fn()

}

bt[5].onclick = function () {

    res.innerText = parseFloat(res.innerText) * parseFloat(res.innerText)

    fn()

}

bt[6].onclick = function () {

    res.innerText = Math.sqrt(parseFloat(res.innerText))

    fn()

}

bt[20].onclick = function () {

    res.innerText = 0 - parseFloat(res.innerText)

    fn()

}

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 新用户604881da > 《待分类》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多