原生JavaScript實(shí)現(xiàn)網(wǎng)頁版計(jì)算器
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)網(wǎng)頁版計(jì)算器的具體代碼,供大家參考,具體內(nèi)容如下
由于無聊看電腦上的系統(tǒng)軟件翻到了計(jì)算器這個(gè)功能,就簡單寫一下這個(gè)計(jì)算器的功能吧,這個(gè)網(wǎng)頁版計(jì)算器基本功能都有吧,但是不是很完全,僅供參考。
首先是網(wǎng)頁計(jì)算器的樣式部分不想手寫直接復(fù)制即可
<!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="./計(jì)算機(jī).js"></script> </body> </html>
js部分:
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)算符號(hào)的時(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)算符號(hào) 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è)簡單的計(jì)算機(jī)做好了,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
深入理解javascript學(xué)習(xí)筆記(一) 編寫高質(zhì)量代碼
編寫高質(zhì)量JavaScript的一些要素,例如避免全局變量,使用單變量聲明,在循環(huán)中預(yù)緩存length(長度),遵循代碼閱讀,以及更多2012-08-08你必須知道的Javascript知識(shí)點(diǎn)之"深入理解作用域鏈"的介紹
本篇文章小編為大家介紹,你必須知道的Javascript知識(shí)點(diǎn)之"深入理解作用域鏈"的介紹。需要的朋友參考下2013-04-04javascript實(shí)現(xiàn)input file上傳圖片預(yù)覽效果
這篇文章主要介紹了javascript實(shí)現(xiàn)input file上傳圖片預(yù)覽效果,感興趣的小伙伴們可以參考一下2015-12-12JS實(shí)現(xiàn)簡單的右下角彈出提示窗口完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)簡單的右下角彈出提示窗口的方法,可實(shí)現(xiàn)點(diǎn)擊連接右下角彈出提示框的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06java、javascript實(shí)現(xiàn)附件下載示例
在web開發(fā)中,經(jīng)常需要開發(fā)“下載”這一模塊,下面使用java、javascript實(shí)現(xiàn)附件下載,需要的朋友可以參考下2014-08-08基于Turn.js 實(shí)現(xiàn)翻書效果實(shí)例解析
最近項(xiàng)目經(jīng)理我個(gè)項(xiàng)目練練手,其項(xiàng)目需求是要實(shí)現(xiàn)翻書效果,看到這個(gè)需求后,我真是懵了,這咋整,我可是java出身的啊,這個(gè)問題真是難住我了,后來有同事的指導(dǎo),問題順利解決,下面小編把學(xué)習(xí)心得分享,感興趣的朋友可以參考下2016-06-06帶有定位當(dāng)前位置的百度地圖前端web api實(shí)例代碼
這篇文章主要介紹了帶有定位當(dāng)前位置的百度地圖前端web api實(shí)例代碼 的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06對(duì)于防止按鈕重復(fù)點(diǎn)擊的嘗試詳解
這篇文章主要介紹了對(duì)于防止按鈕重復(fù)點(diǎn)擊的嘗試,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04