溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“javascript怎么實現簡易的計算器功能”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
javascript實現簡易計算器，只有兩個input輸入框，簡單實現加減乘除：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>簡易計算器</title>
</head>
<style>
body{
border: 2px #00FFFF;
}
</style>
<body background="img/2.jpg" >
<p>
<h2>簡易計算器</h2>
<input type="text" id="num1" width="50px" />
<select id="select">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="num2" width="50px"/>
<br />
<input type="button" value="計算" onclick="cal()" />
<input id="result"></input>
</p>
</body>
<script type="text/javascript">
function cal(){
var num1=document.getElementById("num1").value;
var num2=document.getElementById("num2").value;
var c = document.getElementById("select").value;
num1=parseFloat(num1);
num2=parseFloat(num2);
switch(c){
case "+":
document.getElementById("result").value=parseInt(num1)+parseInt(num2);
break;
case "-":
document.getElementById("result").value=parseInt(num1)-parseInt(num2);
break;
case "*":
document.getElementById("result").value=parseInt(num1)-parseInt(num2);
break;
case "/":
document.getElementById("result").value=parseInt(num1)/parseInt(num2);
break;
}
}
</script>
</html>效果截圖：
JavaScript eval() 函數實現計算器：只有一個input輸入框：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>簡易計算器</title>
</head>
<body background="img/2.jpg" >
<h2>簡易計算器</h2>
<p>
<input type="text" id="num1"/>
<input type="button" value="計算" onclick="cal()" />
</p>
<p>
<span id="result" >計算結果：</span>
</p>
</body>
<script type="text/javascript">
function cal(){
var num1=document.getElementById("num1").value;
var result=document.getElementById("result");
try{
//有值就計算
var res=eval("("+num1+")");
result.innerHTML=res;
}catch(e){
console.log(e);
result.innerHTML="表達式異常";
}
}
</script>
</html>實現效果：
body里面的背景圖片設置：
background-repeat: no-repeat;圖片原大小
background-size:100%; 圖片全鋪滿
“javascript怎么實現簡易的計算器功能”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
