【java web】--JavaScript讓計算器無需Switch和if else

ZeroWM發表於2015-11-06

  

  JavaScript視訊結尾有一個課後題,感覺出的很妙,用JavaScript做一版沒有Switch或者if else的計算器,自己寫了一版略粗糙的答案,希望能跟大家分享。





wm程式碼:


<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
	 <script language="javascript">
            function sum(){
				//獲取第一個數
                var first=document.getElementById("first").value;
				//獲取第二個數
                var second=document.getElementById("second").value;
            	var e;
            	
				//獲取運算子號e
                var se=document.getElementById("sel");//根據id獲得se的文字
                //根據元素標籤名稱,獲取標籤內容
				var option=se.getElementsByTagName("option");
				                
                for(var i=0;i<option.length;++i)
                {
					//如果標籤被選中,就把文字付給e
                    if(option[i].selected)
                    {
                         e=option[i].text;
                    }
                }
                
				//計算
                var summery=first+e+second;
                var changeSummery=eval(summery);//eval函式,將字串作為表示式來執行
				
				//給最後一個文字框賦值
                document.getElementById("total").value=changeSummery;
            }
            
            
            
        </script>
</head>

<body>
~~~~~~~小美牌無Switch,無if else 計算器~~~~~~~
<p>
<input type="text" name="first"  id="first"/>
    <p>
    <select name="sel" id="sel" >
        <option value="1">+</option>
        <option value="2">-</option>
        <option value="3">*</option>
        <option value="4">/</option>
    </select>
    <p>
    <input type="text" name="second" id="second" />
    <p>
   
    <input type="button" name="equals" value="=" onclick="sum()" />
    <p>
    <input type="text" name="total" id="total" />
</body>
</html>



</span>


執行結果



感受

         之前不做課後練習,現在慢慢的喜歡上實踐了~so interesting ,so great, so wonderful!



相關文章