JS實現基本的網頁計算器功能示例
本文例項講述了JS實現基本的網頁計算器功能。分享給大家供大家參考，具體如下：
<html>
<head>
<title>網頁計算機</title>
<meta charset="UTF-8"/>
<style type="text/css">
#jsjdiv{
border: solid 1px black;
border-radius: 5px;
width: 200px;
/*height: 400px;*/
text-align: center; /*設定div內部居中*/
margin: auto; /*設定計算機居中*/
background-color: darkgrey;
}
input[type=text]{
width: 190px; /*設定大小*/
height: 35px;
margin-top: 10px; /*設定邊框*/
margin-bottom: 5px;
}
input[type=button]{
width: 44px;
height: 44px;
/*margin-left: 5px;
margin-right: 5px;*/
margin-top: 5px;
margin-bottom: 10px;
font-size: 25px; /*設定text的字型大小及深度*/
font-weight: 600;
}
</style>
<script type="text/javascript">
function cal(btn){
var num=btn.value;
switch (num){ // 利用eval可以把string的內容轉化成程式碼,在程式碼中輸入可以直接進行計算
case "=":
document.getElementById("inp").value=eval(document.getElementById("inp").value);
break;
case "c":
document.getElementById("inp").value="";
break;
default: //進行輸入資料的拼接
document.getElementById("inp").value=document.getElementById("inp").value + num;
break;
}
}
</script>
</head>
<body>
<div id="jsjdiv">
<input type="text" name="" id="inp" value="" /><br />
<input type="button" name="" id="btn" value="1" onclick="cal(this)"/>
<input type="button" name="" id="" value="2" onclick="cal(this)"/>
<input type="button" name="" id="" value="3" onclick="cal(this)"/>
<input type="button" name="" id="" value="4" onclick="cal(this)"/><br />
<input type="button" name="" id="" value="5" onclick="cal(this)"/>
<input type="button" name="" id="" value="6" onclick="cal(this)"/>
<input type="button" name="" id="" value="7" onclick="cal(this)"/>
<input type="button" name="" id="" value="8" onclick="cal(this)"/><br />
<input type="button" name="" id="" value="9" onclick="cal(this)"/>
<input type="button" name="" id="" value="+" onclick="cal(this)"/>
<input type="button" name="" id="" value="-" onclick="cal(this)"/>
<input type="button" name="" id="" value="*" onclick="cal(this)"/><br />
<input type="button" name="" id="" value="0" onclick="cal(this)"/>
<input type="button" name="" id="" value="/" onclick="cal(this)"/>
<input type="button" name="" id="" value="c" onclick="cal(this)"/>
<input type="button" name="" id="" value="=" onclick="cal(this)" />
</div>
</body>
</html>
執行效果：
網頁計算機：
利用css進行div的佈局設定基本的計算機的基本的框架，
在其內部設定text進行顯示，利用button新增按鈕。
一個主要的點：我們要在按按鈕的時候，把資料輸出到text文字上。我們利用了function新增一個函式，在進行按按鈕時，利用onclick,連線到函式，在函式中實現文字的顯示。但是我們在函式中只能對某個id進行呼叫，這樣就表示有多少按鈕就要有多少函式，而且內容相同。所以我們引用了this（當前物件）進行呼叫。
另一方面，我們要實現計算，我們利用eval()把其中的內容轉化為程式碼，就相當於程式碼執行。所以可以直接進行運算輸出。
當我們輸入“=”和“c"就要進行計算操作，相應的我們利用了switch進行區分。
感興趣的朋友可以使用線上HTML/CSS/JavaScript前端程式碼除錯執行工具：http://tools.jb51.net/code/WebCodeRun測試上述程式碼執行效果。
PS：這裡再為大家推薦幾款計算工具供大家進一步參考借鑑：
線上一元函式（方程）求解計算工具：
http://tools.jb51.net/jisuanqi/equ_jisuanqi
科學計算器線上使用_高階計算器線上計算：
http://tools.jb51.net/jisuanqi/jsqkexue
線上計算器_標準計算器：
http://tools.jb51.net/jisuanqi/jsq
更多關於JavaScript相關內容還可檢視本站專題：《JavaScript數學運算用法總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript陣列操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript操作DOM技巧總結》及《JavaScript字元與字串操作技巧總結》
希望本文所述對大家JavaScript程式設計有所幫助。