這篇文章主要介紹了怎么使用JavaScript實現網頁版簡易計算器功能的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇怎么使用JavaScript實現網頁版簡易計算器功能文章都會有所收獲，下面我們一起來看看吧。
運行效果
運行：直接將下面的代碼放到任意文本文件中，文件后綴名改為.html，然后用任意瀏覽器打開即可。
實現思路以及代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網頁版的簡易計算器</title>
<!--使用js完成,之后可用:jquery-->
<!-
-->
<style>
/*設置input的寬度和高度*/
input{
width: 396px;
height: 50px;
font-size: 30px;
}
/*表格的行文本左右居中*/
tr{
/*text-align*/
text-align: center;
}
/*設置單元格的內容寬度和高度以及字體大小*/
td{
width: 100px;
height: 119px;
font-size:30px;
}
/*偽類選擇器:hover*/
td:hover{
/*指定背景色*/
background-color: greenyellow;
/*cursor:pointer
* 鼠標經過的時候,變成小手
*/
cursor:pointer ;
}
</style>
</head>
<body>
<!--
cellspacing:單元邊沿和單元格之間的空間
cellpadding:單元格和單元格之間的空間
-->
<!--在input上面寫一個div: 指定這個當前系統時間-->
<!--禁用文本框的輸入功能: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 將數字鍵和小數點看成一類:clas="num"
2.2 將運算符看成一類:class="operator"
2.3 將清除鍵,退格鍵,=(等號),顯示框,單獨設置id屬性
2.4 獲取顯示框,清除鍵,=號,推格鍵所在的標簽對象
2.5 獲取數字鍵所在的對象并設置點擊事件
2.6 獲取運算符所在的對象并設置點擊事件
*/
//獲取顯示框所在的標簽對象
var showResult = document.getElementById("show") ;
//獲取清除鍵所在的標簽對象
var clear = document.getElementById("clear") ;
//獲取退格鍵所在的標簽對象
var del = document.getElementById("del") ;
//獲取等號所在的對象
var result = document.getElementById("result") ;
//定義三個變量,分別保存第一個數,第二個數以及運算符
//第一個數
var numValue1 = "" ;
//第二個數
var numValue2 = "" ;
//操作符
var oper ="" ;
//獲取數字鍵,包含小數點,并設置點擊事件
var nums = document.getElementsByClassName("num") ;
//遍歷數字,分別設置點擊事件
for(var i = 0 ; i< nums.length ; i++){
//設置點擊事件:使用匿名函數
nums[i].onclick = function(){
//小數點的問題：只能出現一個：
/**
* 如果這個this.innerTest==.
* //小數點只能出現一個
* 否則：
* 不是小數點，就屬于整數運算
* numValue1 += this.innerText;
showResult.value = numValue1*1 ; //去掉首尾無效0
*/
//測試
// alert("獲取到了每一個數字對象") ;
//將點擊的數字顯示到文本框上
//將nums[i]--->看成一個this:代表當前數字鍵對象的內存地址值
//var text = this.innerText ; //普通文本
//測試
// alert(tesxt) ;
//改變顯示框對象的value屬性
//showResult.value = text;
//問題1:目前:用戶輸入第一個數只能是一位數的
//將數字內容賦值給第一個數,然后將第一個數展示到文本框上
// numValue1 = this.innerText ;
numValue1 += this.innerText;
// showResult.value = numValue1*1 ; //去掉首尾無效0
showResult.value = numValue1 ; //去掉首尾無效0
//問題2:小數點的問題(小數點只能出現一個)
}
}
//獲取運算符所在的對象并設置點擊事件
var operators = document.getElementsByClassName("operator") ;
//遍歷操作符,設置點擊事件
for(var i = 0 ; i < operators.length ; i++){
//設置點擊
operators[i].onclick = function(){
/**
* 判斷numValue2的值是否為空：
* 如果是numValue2==""
* 如果numValue2不是空字符串
* 用戶可能點擊等號或者運算符
*/
if(numValue2==""){
numValue2 = numValue1 ;
numValue1 = "" ;
//保存操作符
oper = this.innerText ;
}else{
//用戶要么點擊=號要么進行四則運算
//問題：應該將計算的結果賦值numValue2,清空numvalue1
if(numValue1!=""){
resultFn() ;
}
//保留操作符
oper = this.innerText ;
}
//測試
//alert("運算符獲取到了") ;
//做運算 :思考如何做運算,最終處理
//將第二個數賦值第一個數,然后將第一個數清空,等待接收用戶下一次輸入的數據
/* numValue2 = numValue1 ;
numValue1 = "" ;
//保存操作符
oper = this.innerText ;*/
}
}
//關于其他的操作:清除鍵
//設置清除鍵的點擊事件
clear.onclick = function(){
//將第一個數,第二個數以及運算符都情況掉
//顯示框顯示默認值0
numValue1 = "" ;
numValue2 = "" ;
oper = "" ;
showResult.value = "0" ;
}
//刪除鍵的邏輯,設置點擊事件
del.onclick = function(){
// alert("abc") ;
//可以用到String :substring()截取功能
if(numValue1.length!=1){
//進行截取:從0索引開始截取到當前numValue1.length-1處的位置結束,將其值
//賦值給numValue1
//場景:刪除剩余一個數字即可
numValue1 = numValue1.substring(0,numValue1.length-1) ;
//alert(numValue1) ;
//將numValue1顯示文本框上
// showResult.value = numValue1 *1 ; //去掉首位無效0
showResult.value = numValue1 ; //
}
// else{
// //自己處理
//將第一個數,第二個數,運算符清空掉
// }
}
//給等號添加點擊事件,做四則運算
result.onclick = function(){
//抽取出一個方法
resultFn() ;
}
//具體做四則運算的方法
function resultFn(){
//定義運算的兩個數據: one ,two
//數據類型轉換
var one = new Number(numValue2) ;//實際是第二個數
var two = new Number(numValue1) ;//實際第一個數
//保存計算結果
var r = null ;
//根據運算符進行判斷，switch語句
switch(oper){
case "+":
r = one + two ;
break ;
case "-":
r = one - two ;
break;
case "*":
r = one * two ;
break ;
case "/":
//除數不能為0
//判斷
/* if(two==0){
//將數據情況掉
//并且彈框提示；除數不能為0
r = 0
}else{
one /two ;
}*/
r = one /two ;
break ;
}
//將計算結果展示到顯示框上
// showResult.value = r ;
//將計算的結果進行保留小數點的有戲位
// 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：在四則元素：判斷用戶如果是點擊等號或者點擊繼續運算，每一次都將第一個數清空掉了，
//判斷第一個數是否為空
//問題4：小數點問題：小數點只能出現一個
//四則運算的問題：
/**
* 用戶輸入兩個數據目前是直接處理結果，那么如何判斷用戶是要點擊=號還是繼續進行四則運算？
* 在運算符點擊監聽事件中去坐
* 判斷numValue2的值是否為空：
* 如果是numValue2==""
* 如果numValue2不是空字符串
* 用戶可能點擊等號或者運算符
*
*/
}
</script>
</html>關于“怎么使用JavaScript實現網頁版簡易計算器功能”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“怎么使用JavaScript實現網頁版簡易計算器功能”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
