整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
這個(gè)小練手旨在幫助剛上手學(xué)習(xí)JavaScript的同學(xué)練習(xí)最基本的Js知識(shí)，大神勿噴哈，由于這個(gè)是非常簡(jiǎn)易的計(jì)算器，可以完成的功能有加減乘除和AC（清屏），DEL（退格）等基本運(yùn)算，所以代碼也不復(fù)雜，我會(huì)先放出代碼，然后再講解我的思路，非常簡(jiǎn)單，只要你按照我的思路走，15分鐘不到我保證你也可以敲出同樣的代碼，當(dāng)然主要還是希望可以為入門(mén)的同學(xué)提供一種解決問(wèn)題的思路，各位看完后可以自己動(dòng)手敲一遍哈。
HTML代碼部分
HTML這部分非常簡(jiǎn)單，沒(méi)什么多說(shuō)的，整個(gè)框架我利用<table>搭建的，需要注意的是，由于計(jì)算器屏幕不可輸入，我設(shè)置為了disabled。
CSS代碼部分
CSS也是簡(jiǎn)單設(shè)定了一下寬高，我是在火狐瀏覽器上運(yùn)行的，由于我沒(méi)使用百分比來(lái)設(shè)置寬高，在其他瀏覽器上樣式會(huì)發(fā)生一定程度上的改變，不過(guò)不影響功能就是了。
JavaScript部分
請(qǐng)先不要直接看這部分代碼，先看我的思路講解再看這部分，你絕對(duì)可以輕松理解
思路講解
請(qǐng)先不要看上面的JS代碼，接下來(lái)請(qǐng)?jiān)囍业乃悸纷撸瓿蛇@個(gè)計(jì)算器的功能，我是分成三個(gè)部分來(lái)解決的，第一部分是將除了AC，DEL這兩個(gè)鍵之外的按鍵值獲取到屏幕上，第二部分是計(jì)算屏幕上的表達(dá)式的值，第三部分是添加AC（清屏），DEL（退格）功能，檢查BUG。
第一部分：獲取值到屏幕上
我認(rèn)為解決簡(jiǎn)單的JS問(wèn)題大體都可以分三步：
1.獲取你想操作的元素；
2.保存你想操作的元素；
3.對(duì)元素進(jìn)行（遍歷）操作；
我的第一步目的是將除了AC，DEL這兩個(gè)鍵之外的按鍵值獲取到屏幕上，那么我首先得獲取按鈕元素以及屏幕元素并將它們保存在btn_txt和txt變量里：
獲取并保存了想操作的元素，接下來(lái)就對(duì)他們添加操作：
在進(jìn)行操作的之前請(qǐng)等一下，我們思考一下，btn_txt數(shù)組里存放著0,1,2,3,4,5,6,7,8,9，" . "，" + "，" - "，" * "，" \ "，" = "等一系列東西，我們當(dāng)然要對(duì)數(shù)字和計(jì)算符號(hào)進(jìn)行分開(kāi)操作，所以我們用If……else……來(lái)判斷一下
OK，我們接下來(lái)先考慮用戶輸入的是數(shù)字或者點(diǎn)的情況，首先數(shù)字可以連續(xù)輸入到屏幕里，但是小數(shù)點(diǎn)不應(yīng)該能連續(xù)輸入到屏幕里，小數(shù)點(diǎn)應(yīng)該只有一個(gè)才對(duì)，所以我們應(yīng)該先加一個(gè)判斷條件：屏幕里是否有小數(shù)點(diǎn)存在？如果屏幕里已經(jīng)有小數(shù)點(diǎn)存在，那么我只允許你再輸入數(shù)字，否則屏幕值不會(huì)接收，即是如下代碼：
好了，用戶輸入的是數(shù)字或者點(diǎn)的情況已經(jīng)考慮結(jié)束了，現(xiàn)在考慮用戶輸入的是運(yùn)算符號(hào)的情況！這種情況也分兩部分，一種是用戶按了等號(hào)，一種是按了除等號(hào)之外的其他加減乘除運(yùn)算符號(hào)，因?yàn)榈忍?hào)比較特殊一點(diǎn)，按了就直接應(yīng)該得出結(jié)果了，所以要區(qū)用if……else……分開(kāi)。我這樣的思路你可以理解吧！
還有一個(gè)事情我們要考慮的是，我希望在我按下加減乘除運(yùn)算符號(hào)時(shí)可以清屏，這樣我就可以繼續(xù)鍵入下一數(shù)字了（舉例：我按下數(shù)字“5”，再按下運(yùn)算符“ + ”，按下瞬間屏幕清屏，然后我再鍵入數(shù)字“3”，最后按下“ = ”，最后得出結(jié)果“2”），但是清屏我并不想讓我的數(shù)據(jù)丟失，所以此時(shí)我先新建一個(gè)數(shù)組來(lái)保存這些數(shù)據(jù)（這里的“數(shù)據(jù)”指數(shù)字和運(yùn)算符，也叫“表達(dá)式”），然后再清屏！具體代碼如下：
第二部分：計(jì)算屏幕上的表達(dá)式的值
好了下面我們討論用戶按下等號(hào)鍵的情況，這種比較簡(jiǎn)單，直接對(duì)表達(dá)式（表達(dá)式就是我們之前輸入的數(shù)字與符號(hào)組合）進(jìn)行計(jì)算就可以啦，需要注意的是計(jì)算完成之后要把保存表達(dá)式的數(shù)組way_res清空，因?yàn)楸敬芜\(yùn)算完滿結(jié)束了，如果不清空里面的數(shù)據(jù)會(huì)影響下一次正常計(jì)算；
第三部分：添加AC，DEL功能，檢查BUG
首先，獲取清空按鈕和退格按鈕，然后把它們保存在btn_way變量下；
然后就遍歷進(jìn)行添加功能，這里同樣需要一個(gè)if……else……語(yǔ)句來(lái)判斷用戶按的是AC按鈕還是DEL按鈕
到這里為止，所有功能基本上全部添加完畢，然后我們進(jìn)行調(diào)試，發(fā)現(xiàn)一個(gè)問(wèn)題，就是當(dāng)我們第一次按鍵就按小數(shù)點(diǎn)“ . ”時(shí)，這時(shí)用戶的本意應(yīng)為“ 0. ”,意即用戶是想輸入小數(shù)的，但是懶得按“0”，直接按了小數(shù)點(diǎn)，所以我們應(yīng)該加一個(gè)判斷條件來(lái)幫助用戶，直接按小數(shù)點(diǎn)成為有意義的行為，代碼如下：
好了，最后再加上window.onload = function(){}，代碼，到這里就全部結(jié)束了；大家有不理解的地方歡迎在評(píng)論里問(wèn)我；
再放一遍JavaScript全代碼
一、開(kāi)始吧，先做一個(gè)360*500的盒子。
二、加入輸入框，輸入框給它270寬，再配個(gè)灰色背景。
三、做18個(gè)div，我覺(jué)得這樣子比table標(biāo)簽更直觀，其實(shí)你還是什么都看不見(jiàn)，因?yàn)樽质呛谏模尘昂谏摹?/p>
四、行了，我們給div加樣式吧。
五、我們讓這18個(gè)按鈕浮動(dòng)，它們就不會(huì)獨(dú)占一行了，然后再讓它們外部上下左右距離為5px。
六、把按鍵做成圓的，里面的字居中，然后再把字變大。
七、把計(jì)算器的整體外觀也改改。
八、“=”和“0” 這兩個(gè)一個(gè)是加高，一個(gè)是加寬，我們得再加樣式區(qū)別對(duì)待。
九、我們讓等號(hào)按鈕右浮動(dòng)就可以了。
十、對(duì)按鈕再修飾，做兩個(gè)樣式，一個(gè)是灰白色，一個(gè)是土黃色。
十一、對(duì)輸入框做個(gè)修飾，最終完成界面設(shè)計(jì)。
十二、我們整個(gè)js只用獲取一個(gè)元素對(duì)象，那就是input。
十三、做按鈕點(diǎn)擊事件，把大多數(shù)按鈕的點(diǎn)擊都寫(xiě)進(jìn)去，這里我特意用箭頭函數(shù)，當(dāng)學(xué)習(xí)吧。
幾乎所有的按鈕都調(diào)用這個(gè)clickbt函數(shù)，唯有“=”號(hào)不用。
十四、該是為“=”加函數(shù)的時(shí)候了，這里用了eval()，能把字符串當(dāng)算式運(yùn)算出結(jié)果。
十五、總結(jié)，到此為止，整個(gè)計(jì)算器就做出來(lái)了，大家會(huì)發(fā)現(xiàn)js部分很簡(jiǎn)單，因?yàn)槲覀冎挥幸话愕募訙p乘除計(jì)算，有更多想法的朋友，自己補(bǔ)充吧。
簡(jiǎn)單的用JavaScript實(shí)現(xiàn)計(jì)算器的方法可以使用eval()函數(shù)，該函數(shù)可以計(jì)算字符串中的數(shù)學(xué)表達(dá)式。以下是一個(gè)簡(jiǎn)單的示例：
html復(fù)制代碼運(yùn)行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>簡(jiǎn)單計(jì)算器</title> </head> <body> <input type="text" id="expression" placeholder="請(qǐng)輸入表達(dá)式"> <button onclick="calculate()">計(jì)算</button> <p>結(jié)果：<span id="result"></span></p> <script> function calculate() { var expression = document.getElementById("expression").value; try { var result = eval(expression); document.getElementById("result").innerText = result; } catch (error) { alert("輸入的表達(dá)式有誤，請(qǐng)檢查后重新輸入"); } } </script> </body> </html>
這個(gè)示例中，我們創(chuàng)建了一個(gè)簡(jiǎn)單的HTML頁(yè)面，包含一個(gè)輸入框用于輸入表達(dá)式，一個(gè)按鈕用于觸發(fā)計(jì)算，以及一個(gè)用于顯示結(jié)果的段落。在JavaScript部分，我們定義了一個(gè)名為calculate的函數(shù)，該函數(shù)首先獲取輸入框中的表達(dá)式，然后使用eval()函數(shù)計(jì)算表達(dá)式的結(jié)果，并將結(jié)果顯示在頁(yè)面上。如果輸入的表達(dá)式有誤，我們會(huì)彈出一個(gè)警告框提示用戶檢查輸入。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
