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

最新推荐文章于 2022-01-24 17:58:57 发布

alice s

最新推荐文章于 2022-01-24 17:58:57 发布

阅读量617

点赞数

本文链接：https://blog.csdn.net/sms15732621690/article/details/71034496

版权

——DRP 专栏收录该内容

8 篇文章 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语句

效果一

代码二

不用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>

效果二

总结

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

alice s

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
17
评论
【DRP】JavaScript小例子值简易计算器

前言看DRP视频的时候，老师讲的小例子，实践一番~代码一简易计算器 function doCal(){ var value1 = parseInt(document.getElementById("value1").value); var flag = document.getElementById("flag").val
复制链接

扫一扫