1、需求描述:
運用JavaScript製作一個簡易的四則運算計算器(加減乘除功能)
2、實現思路:
1、製作計算器框架,這裏用表單寫
2、給表單元素起名字(因爲我們需要獲取不同表單元素的內容,並加以運算)
3、寫js函數,實現運算功能。 function calculator(){}
4、使用js函數 οnclick="calculator();"
3、需要掌握的知識點:
- 表單標籤及相關屬性的運用:form、input
- JavaScript定義一個函數的方法
- 函數的使用
4、實現代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>計算器的製作-使用JavaScript製作簡易四則運算器</title>
</head>
<body>
<!--
作者:王迪
時間:2019-08-30
描述:計算器製作流程:
1、製作計算器框架,這裏用表單寫
2、給表單元素起名字(因爲我們需要獲取不同表單元素的內容,並加以運算)
3、寫js函數,實現運算功能。 function calculator(){}
4、使用js函數 onclick="calculator();"
-->
<form method="post" action="">
<input type="text" name="text" id="num1" />
<select id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" name="text" id="num2" />
=
<input type="text" id="result" readonly="true" /><br /><br />
<input type="button" id="btn" value="提交" onclick="calculator();" />
</form>
</body>
<script type="text/javascript">
function calculator(){
//使用document.getElementById(id)方法,獲取某個表單元素
//document.getElementById(id).value,獲取表單元素的值
//parseInt()方法,數據類型轉化爲int
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var opra = document.getElementById("operator").value;
var result = 0;
switch(opra) {//判斷用戶選擇的運算符
case "+":
result = num1 + num2;
break;
case "-":
result = num1 - num2;
break;
case "*":
result = num1 * num2;
break;
case "/":
if(parseInt(num2) != 0){
result = num1 / num2;
}
else{
alert("除數不能爲0");
return;
}
break;
default:
break;
}
document.getElementById("result").value = result;//將計算結果,賦值給表單元素result
}
</script>
</html>
=============這裏是結束分割線=================