溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了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程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
