JavaScript實現(xiàn)網(wǎng)頁版簡易計算器功能
更新時間:2022年07月21日 17:06:47 作者:Mtreellen
這篇文章主要介紹了JavaScript實現(xiàn)網(wǎng)頁版簡易計算器功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)網(wǎng)頁版計算器功能的具體代碼,供大家參考,具體內(nèi)容如下
運行效果
運行:直接將下面的代碼放到任意文本文件中,文件后綴名改為.html,然后用任意瀏覽器打開即可。
實現(xiàn)思路以及代碼
<!DOCTYPE html> <html> ?? ?<head> ?? ??? ?<meta charset="UTF-8"> ?? ??? ?<title>網(wǎng)頁版的簡易計算器</title> <!--使用js完成,之后可用:jquery--> <!- --> <style> ?? ?/*設(shè)置input的寬度和高度*/ ?? ?input{ ?? ??? ?width: 396px; ?? ??? ?height: 50px; ?? ??? ?font-size: 30px; ?? ?} ?? ? ?? ?/*表格的行文本左右居中*/ ?? ?tr{ ?? ??? ?/*text-align*/ ?? ??? ?text-align: center; ?? ?} ?? ?/*設(shè)置單元格的內(nèi)容寬度和高度以及字體大小*/ ?? ?td{ ?? ??? ?width: 100px; ?? ??? ?height: 119px; ?? ??? ?font-size:30px; ?? ?} ?? ?/*偽類選擇器:hover*/ ?? ?td:hover{ ?? ??? ?/*指定背景色*/ ?? ??? ?background-color: greenyellow; ?? ??? ?/*cursor:pointer ?? ??? ? * 鼠標經(jīng)過的時候,變成小手 ?? ??? ? */ ?? ??? ?cursor:pointer ; ?? ?} </style> ?? ?</head> <body> <!-- cellspacing:單元邊沿和單元格之間的空間 cellpadding:單元格和單元格之間的空間 --> <!--在input上面寫一個div: 指定這個當前系統(tǒng)時間--> <!--禁用文本框的輸入功能:disabled:disabled--> <center><input type="text" value="0" id="show" disabled="disabled" /></center> <table border="1px" cellspacing="0" cellpadding="2" align="center" width="400px"? ?? ?height="600px"> ?? ?<tr> ?? ??? ?<td id="clear">C</td> ?? ??? ?<td id="del">退格</td> ?? ??? ?<td>%</td> ?? ??? ?<td class="operator">/</td> ?? ?</tr> ?? ?<tr> ?? ??? ?<td class="num">7</td> ?? ??? ?<td class="num">8</td> ?? ??? ?<td class="num">9</td> ?? ??? ?<td class="operator">*</td> ?? ?</tr> ?? ?<tr> ?? ??? ?<td class="num">4</td> ?? ??? ?<td class="num">5</td> ?? ??? ?<td class="num">6</td> ?? ??? ?<td class="operator">-</td> ?? ?</tr> ?? ?<tr> ?? ??? ?<td class="num">1</td> ?? ??? ?<td class="num">2</td> ?? ??? ?<td class="num">3</td> ?? ??? ?<td class="operator">+</td> ?? ?</tr> ?? ?<tr> ?? ??? ?<td colspan="2" class="num">0</td> ?? ??? ?<td class="num">.</td> ?? ??? ?<td id="result">=</td> ?? ?</tr> </table> </body> <script> ?? ?/** ?? ? * - ?? ?1.頁面布局 ?? ??? ?要么使用div+css,要么table布局 ?? ??? ?table布局:5行4列的表格 ?? ??? ?div+css布局:大的div ?嵌套兩個字div(輸入框的和鍵盤) ?? ?2.邏輯處理 ?? ??? ?2.1 將數(shù)字鍵和小數(shù)點看成一類:clas="num" ?? ??? ?2.2 將運算符看成一類:class="operator" ?? ??? ?2.3 將清除鍵,退格鍵,=(等號),顯示框,單獨設(shè)置id屬性 ?? ??? ?2.4 獲取顯示框,清除鍵,=號,推格鍵所在的標簽對象 ?? ??? ?2.5 獲取數(shù)字鍵所在的對象并設(shè)置點擊事件 ?? ??? ?2.6 獲取運算符所在的對象并設(shè)置點擊事件 ?? ? */ //獲取顯示框所在的標簽對象 var showResult = document.getElementById("show") ; //獲取清除鍵所在的標簽對象 var clear = document.getElementById("clear") ; //獲取退格鍵所在的標簽對象 var del = document.getElementById("del") ; //獲取等號所在的對象 var result = document.getElementById("result") ; //定義三個變量,分別保存第一個數(shù),第二個數(shù)以及運算符 //第一個數(shù) var numValue1 = "" ; //第二個數(shù) var numValue2 = "" ; //操作符 var oper ="" ; //獲取數(shù)字鍵,包含小數(shù)點,并設(shè)置點擊事件 var nums = document.getElementsByClassName("num") ; //遍歷數(shù)字,分別設(shè)置點擊事件 for(var i = 0 ; i< nums.length ; i++){ ?? ?//設(shè)置點擊事件:使用匿名函數(shù) ?? ?nums[i].onclick = function(){ ?? ??? ? ?? ??? ?//小數(shù)點的問題:只能出現(xiàn)一個: ?? ??? ?/** ?? ??? ? * 如果這個this.innerTest==. ?? ??? ? * ?? ??? ?//小數(shù)點只能出現(xiàn)一個 ?? ??? ? * 否則: ?? ??? ? * ?? ??? ?不是小數(shù)點,就屬于整數(shù)運算 ?? ??? ? * ?? ??? ?numValue1 += this.innerText; ?? ??? ??? ??? ?showResult.value = numValue1*1 ; //去掉首尾無效0 ?? ??? ? */ ?? ??? ? ?? ??? ? ?? ??? ? ?? ??? ?//測試 //?? ??? ?alert("獲取到了每一個數(shù)字對象") ; ?? ??? ?//將點擊的數(shù)字顯示到文本框上 ?? ??? ?//將nums[i]--->看成一個this:代表當前數(shù)字鍵對象的內(nèi)存地址值 ?? ??? ?//var text = this.innerText ; //普通文本 ?? ??? ?//測試 //?? ??? ?alert(tesxt) ; ?? ??? ?//改變顯示框?qū)ο蟮膙alue屬性 ?? ??? ?//showResult.value = text; ?? ??? ? ?? ??? ?//問題1:目前:用戶輸入第一個數(shù)只能是一位數(shù)的 ?? ??? ?//將數(shù)字內(nèi)容賦值給第一個數(shù),然后將第一個數(shù)展示到文本框上 //?? ??? ?numValue1 = this.innerText ; ?? ??? ?numValue1 += this.innerText; //?? ??? ?showResult.value = numValue1*1 ; //去掉首尾無效0 ?? ??? ?showResult.value = numValue1 ; //去掉首尾無效0 ?? ??? ? ?? ??? ?//問題2:小數(shù)點的問題(小數(shù)點只能出現(xiàn)一個) ?? ??? ? ?? ??? ? ?? ?} } //獲取運算符所在的對象并設(shè)置點擊事件 var operators = document.getElementsByClassName("operator") ; //遍歷操作符,設(shè)置點擊事件 for(var i = 0 ; i < operators.length ; i++){ ?? ?//設(shè)置點擊 ?? ?operators[i].onclick = function(){ ?? ??? ? ?? ??? ?/** ?? ??? ? * 判斷numValue2的值是否為空: ?? ? * ?? ??? ?如果是numValue2=="" ?? ? ?? ? * ?? ??? ?如果numValue2不是空字符串 ?? ? * ?? ??? ??? ?用戶可能點擊等號或者運算符 ?? ??? ? */ ?? ??? ?if(numValue2==""){ ?? ??? ??? ??? ?numValue2 = numValue1 ; ?? ??? ??? ??? ?numValue1 = "" ; ?? ??? ??? ??? ?//保存操作符 ?? ??? ??? ??? ?oper = this.innerText ; ?? ??? ?}else{ ?? ??? ??? ?//用戶要么點擊=號要么進行四則運算 ?? ??? ??? ?//問題:應(yīng)該將計算的結(jié)果賦值numValue2,清空numvalue1? ?? ??? ??? ? ?? ??? ??? ?if(numValue1!=""){ ?? ??? ??? ??? ?resultFn() ; ?? ??? ??? ?} ?? ??? ??? ? ?? ??? ??? ?//保留操作符 ?? ??? ??? ?oper = this.innerText ; ?? ??? ?} ?? ??? ? ?? ??? ? ?? ??? ? ?? ??? ?//測試 ?? ??? ?//alert("運算符獲取到了") ; ?? ??? ?//做運算 :思考如何做運算,最終處理 ?? ??? ?//將第二個數(shù)賦值第一個數(shù),然后將第一個數(shù)清空,等待接收用戶下一次輸入的數(shù)據(jù) ?? ?/*?? ?numValue2 = numValue1 ; ?? ??? ?numValue1 = "" ; ?? ??? ?//保存操作符 ?? ??? ?oper = this.innerText ;*/ ?? ?} } //關(guān)于其他的操作:清除鍵 //設(shè)置清除鍵的點擊事件 clear.onclick = function(){ ?? ? ?? ?//將第一個數(shù),第二個數(shù)以及運算符都情況掉 ?? ?//顯示框顯示默認值0 ?? ?numValue1 = "" ; ?? ?numValue2 = "" ; ?? ?oper = "" ; ?? ?showResult.value = "0" ; } //刪除鍵的邏輯,設(shè)置點擊事件 del.onclick = function(){ ?? ? //?? ??? ?alert("abc") ; ?? ?//可以用到String :substring()截取功能 ?? ?if(numValue1.length!=1){ ?? ??? ?//進行截取:從0索引開始截取到當前numValue1.length-1處的位置結(jié)束,將其值 ?? ??? ?//賦值給numValue1 ?? ??? ?//場景:刪除剩余一個數(shù)字即可 ?? ? numValue1 = numValue1.substring(0,numValue1.length-1) ; ?? ??? ?//alert(numValue1) ; ?? ?//將numValue1顯示文本框上 //?? ?showResult.value = numValue1 *1 ; //去掉首位無效0 ?? ?showResult.value = numValue1 ; // } //?? ?else{ //?? ??? ?//自己處理?? ? ?? ??? ?//將第一個數(shù),第二個數(shù),運算符清空掉 //?? ?} } //給等號添加點擊事件,做四則運算 result.onclick = function(){ ?? ? ?? ?//抽取出一個方法 ?? ?resultFn() ; } //具體做四則運算的方法 function resultFn(){ ?? ? ?? ?//定義運算的兩個數(shù)據(jù): one ,two ?? ?//數(shù)據(jù)類型轉(zhuǎn)換 ?? ?var one = new Number(numValue2)?? ?;//實際是第二個數(shù) ?? ?var two = new Number(numValue1) ;//實際第一個數(shù) ?? ?//保存計算結(jié)果 ?? ?var r = null ; ?? ?//根據(jù)運算符進行判斷,switch語句 ?? ?switch(oper){ ?? ?case "+": ?? ??? ?r = one + two ; ?? ??? ?break ; ?? ?case "-": ?? ??? ?r = one - two ; ?? ??? ?break; ?? ?case "*": ?? ??? ?r = one * two ; ?? ??? ?break ; ?? ?case "/": ?? ??? ?//除數(shù)不能為0 ?? ??? ?//判斷 ?? ?/*?? ?if(two==0){ ?? ??? ??? ?//將數(shù)據(jù)情況掉 ?? ??? ??? ?//并且彈框提示;除數(shù)不能為0 ?? ??? ??? ? ?? ??? ??? ?r = 0? ?? ??? ?}else{ ?? ??? ??? ?one /two ; ?? ??? ?}*/ ?? ??? ?r = one /two ; ?? ??? ? ?? ??? ?break ; ?? ?} ?? ? ?? ?//將計算結(jié)果展示到顯示框上 //?? ?showResult.value = r ; ?? ? ?? ?//將計算的結(jié)果進行保留小數(shù)點的有戲位 //?? ?numValue2 = r ; ?? ?numValue2 = new Number(r).toFixed(6) ; ?? ?numValue1 = "" ; //numValue1清空了 ?? ?showResult.value = numValue2*1; // numValue2*1 ?? ?//問題1 :1.2 * 3 = 3.599999996 ?? ?//問題2:去掉首尾無效0?? ?:parseFloat() ?? ?//問題3:在四則元素:判斷用戶如果是點擊等號或者點擊繼續(xù)運算,每一次都將第一個數(shù)清空掉了, ?? ?//判斷第一個數(shù)是否為空 ?? ? ?? ? //問題4:小數(shù)點問題:小數(shù)點只能出現(xiàn)一個 ?? ? //四則運算的問題: ?? ?/** ?? ? * 用戶輸入兩個數(shù)據(jù)目前是直接處理結(jié)果,那么如何判斷用戶是要點擊=號還是繼續(xù)進行四則運算? ?? ? * ?? ?在運算符點擊監(jiān)聽事件中去坐 ?? ? * 判斷numValue2的值是否為空: ?? ? * ?? ??? ?如果是numValue2=="" ?? ? ?? ? * ?? ??? ?如果numValue2不是空字符串 ?? ? * ?? ??? ??? ?用戶可能點擊等號或者運算符 ?? ? * ?? ??? ??? ??? ? ?? ? */ ?? ? } </script> </html>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序?qū)崿F(xiàn)活動報名登記功能(實例代碼)
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)活動報名登記,本篇將介紹使用微信小程序?qū)崿F(xiàn)發(fā)起一個活動報名的設(shè)計,以此為基礎(chǔ),我們可以掌握微信小程序表單的基本用法,進而在諸如疫情信息登記、出入報備等場景中使用小程序進行開發(fā),滿足相關(guān)的需求,需要的朋友可以參考下2022-09-09JavaScript find()方法及返回數(shù)據(jù)實例
這篇文章主要介紹了JavaScript中的find()方法和返回數(shù)據(jù)的內(nèi)存指向,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-04-04typescript使用 ?. ?? ??= 運算符的方法步驟
本文主要介紹了typescript使用 ?. ?? ??= 運算符的方法步驟,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-01-01JavaScript實現(xiàn)頁面定時刷新(定時器,meta)
很多朋友看到定時,很容易想到用js定時器,還有盆友用meta來設(shè)置,下面小編給大家介紹js實現(xiàn)頁面定時刷新的方法,一起看看吧2016-10-10