【jQuery】第二課:案例實踐——運用JavaScript製作一個簡易的四則運算計算器

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" />&nbsp;&nbsp;
	    <select  id="operator">
	        <option value="+">+</option>
	        <option value="-">-</option>
	        <option value="*">*</option>
	        <option value="/">/</option>
	    </select>&nbsp;&nbsp;
	    <input type="text" name="text" id="num2"  />&nbsp;&nbsp;
	    =&nbsp;&nbsp;
	    <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>

 

 

 

 

 

 

=============這裏是結束分割線=================

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章