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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: