【DRP】JavaScript小例子值简易计算器

「爱情、让人受尽委屈。」 2022-06-16 00:28 162阅读 0赞

# 前言 #

看DRP视频的时候，老师讲的小例子，实践一番~

# 代码一  #

<html>
    	<head>
    		<title>简易计算器</title>
    		<script language="javascript">
    			function doCal(){
    				
    				
    				var value1 = parseInt(document.getElementById("value1").value);
    				var flag = document.getElementById("flag").value;
    				var value2 = parseInt(document.getElementById("value2").value);
    				
    				var s = 0;
    				switch(flag){
    					case "+":
    					  s= value1 + value2;
    					  break;
    					case "-":
    					  s= value1 - value2;
    					  break;
    					case "*":
    					  s = value1 * value2;
    					  break;
    					case "/":
    					  s = value1 / value2;
    					  
    				}
    				
    				document.getElementById("span_result").innerHTML= "<font color='red'>" + s + "</font>";
    			}
    		</script>
    	</head>
    	<body>
    		<h1>简易计算器第一种方案</h1>
    		<hr>
    		<input type="text" name="value1" id="value1">
    		<select name="flag" id="flag">
    			<option value="+">+</option>
    			<option value="-">-</option>
    			<option value="*">*</option>
    			<option value="/">/</option>
    		</select>
    		<input type="text" name="value2" id="value2">
    		<input type="button" value="=" onClick="doCal()">
    		
    		<span id="span_result"></span>
    	</body>
    </html>

特点：用了好几个case语句

# 效果一 #

![Center][]

# 代码二 #

不用case语句的实现：

<html>
    	<head>
    		<title>简易计算器</title>
    		<script language="javascript">
    			function doCal(){
    				var value1 = parseInt(document.getElementById("value1").value);
    				var flag = document.getElementById("flag").value;
    				var value2 = parseInt(document.getElementById("value2").value);
    			  eval("var s = " + value1 + flag + value2);
    				document.getElementById("span_result").innerHTML= "<font color='red'>" + s + "</font>";
    			}
    		</script>
    	</head>
    	<body>
    		<h1>简易计算器第二种方案</h1>
    		<hr>
    		<input type="text" name="value1" id="value1">
    		<select name="flag" id="flag">
    			<option value="+">+</option>
    			<option value="-">-</option>
    			<option value="*">*</option>
    			<option value="/">/</option>
    		</select>
    		<input type="text" name="value2" id="value2">
    		<input type="button" value="=" onClick="doCal()">
    		
    		<span id="span_result"></span>
    	</body>
    </html>

# 效果二 #

# ![Center 1][]    #

# 总结 #

每一种你想实现效果可以有好几种方法，没有所谓的对与错！

[Center]: /images/20220616/384183142764432198750bedce609928.png
[Center 1]: /images/20220616/2df5e6807dab428fba8e0ab4ca5d3f6c.png