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