原生JavaScript實(shí)現(xiàn)網(wǎng)頁版計(jì)算器

新用戶604881da 2021-11-11

展開全文

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)網(wǎng)頁版計(jì)算器的具體代碼，供大家參考，具體內(nèi)容如下

由于無聊看電腦上的系統(tǒng)軟件翻到了計(jì)算器這個(gè)功能，就簡單寫一下這個(gè)計(jì)算器的功能吧，這個(gè)網(wǎng)頁版計(jì)算器基本功能都有吧，但是不是很完全，僅供參考。

首先是網(wǎng)頁計(jì)算器的樣式部分不想手寫直接復(fù)制即可

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

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

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

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

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

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

<button class="btn square">x2</button>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

</div>

<script src="./計(jì)算機(jī).js"></script>

</body>

</html>

js部分:

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')

//當(dāng)點(diǎn)擊的數(shù)字的時(shí)候

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)

}

//小數(shù)點(diǎn)

//保留結(jié)果小數(shù)

function fn() {

if (res.innerText.length > 8) {

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

}

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

res.innerText = 0

}

//當(dāng)點(diǎn)擊的是運(yùn)算符號的時(shí)候

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)

//運(yùn)算符號

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位小數(shù)

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()

}

本站是提供個(gè)人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：新用戶604881da > 《待分類》

舉報(bào)/認(rèn)領(lǐng)