溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了使用JavaScript實現簡單計算器功能的案例，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
1.實現基本計算器功能，如圖
2.邏輯代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>計算器</title>
<!--設置樣式-->
<style>
.showdiv{
text-align: center;
margin:auto;/*設置居中*/
border: solid 1px;
width: 400px;
height: 500px;
border-radius: 10px;/*設置邊框角度*/
}
input[type="text"]{
margin-top: 10px;
width: 380px;
height: 40px;
font-size: 40px;
}
input[type="button"]{
margin: 10px;
margin-top: 20px;
width: 60px;
height: 80px;
font-size: 40px;
font-weight: bold;
}
</style>
<!--設置js代碼-->
<script type="text/javascript">
/*將按鈕的值賦值給輸入框*/
function num(btn){
//把不能為零去掉
if(document.getElementById("inp").value.match("除數")){
document.getElementById("inp").value = "";
}
//獲取button按鈕的value
var num = btn.value;
console.log(num +" " +typeof(num))
//將值賦值給text文本框
switch(num){
case "c":
document.getElementById("inp").value = "";
break;
case "=":
if(document.getElementById("inp").value.match("/")){
if(document.getElementById("inp").value.split("/")[1] == "0"){
document.getElementById("inp").value = "除數不能為零";
}else{
document.getElementById("inp").value = eval(document.getElementById("inp").value);
}
break;
}else{
document.getElementById("inp").value = eval(document.getElementById("inp").value);
break;
}
default:
document.getElementById("inp").value = document.getElementById("inp").value+num;
break;
}
}
</script>
</head>
<body>
<div class = "showdiv">
<input type="text" name="" id="inp" value="" readonly="readonly"/><br />
<input type="button" name="" id="" value="0" onclick="num(this)"/>
<input type="button" name="" id="" value="1" onclick="num(this)"/>
<input type="button" name="" id="" value="2" onclick="num(this)"/>
<input type="button" name="" id="" value="3" onclick="num(this)"/><br />
<input type="button" name="" id="" value="4" onclick="num(this)"/>
<input type="button" name="" id="" value="5" onclick="num(this)"/>
<input type="button" name="" id="" value="6" onclick="num(this)"/>
<input type="button" name="" id="" value="7" onclick="num(this)"/><br />
<input type="button" name="" id="" value="8" onclick="num(this)"/>
<input type="button" name="" id="" value="9" onclick="num(this)"/>
<input type="button" name="" id="" value="+" onclick="num(this)"/>
<input type="button" name="" id="" value="-" onclick="num(this)"/><br />
<input type="button" name="" id="" value="*" onclick="num(this)"/>
<input type="button" name="" id="" value="/" onclick="num(this)"/>
<input type="button" name="" id="" value="=" onclick="num(this)"/>
<input type="button" name="" id="" value="c" onclick="num(this)"/>
</div>
</body>
</html>感謝你能夠認真閱讀完這篇文章，希望小編分享的“使用JavaScript實現簡單計算器功能的案例”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
