js计算器小例子

最新推荐文章于 2021-11-19 07:50:12 发布

戏子张

最新推荐文章于 2021-11-19 07:50:12 发布

阅读量635

点赞数 1

分类专栏： js 文章标签： js计算器

本文链接：https://blog.youkuaiyun.com/qq_44767162/article/details/88539243

版权

js 专栏收录该内容

7 篇文章

订阅专栏

	<meta charset="utf-8" />
	<title></title>
	<script>
		function jisuan()
		{
			// 1.获取第一个文本的值
			var firstInput = 	document.getElementById("first");
			var a =	firstInput.value;
			
			
			//2.获取第二个文本框的值
			var secondInput = document.getElementById("second");
			var b = secondInput.value;
			
			//3.获取用户选择的计算符号
			var fuhaoSelect =   document.getElementById("fuhao");
			var c = fuhaoSelect.value;
			
			//4.计算整个结果
				
			//alert(a+c+b);//使用+ 将 a  b  c 的值拼接成字符串,并使用eval进行计算
			var r =  eval(a+c+b);
			
			//5.将计算的结果放到第三个文本框中
			var thirdInput = document.getElementById("third");
			thirdInput.value = r;
			
		}
		
		
		
	</script>
</head>
<body>
	<!--
    	作者：offline
    	时间：2019-03-12
    	描述：
    	
    	
    	变量：
    		
    		
    	运算符：
    		
    		1.算数运算符
    			
    	
    	
    	事件：
    		
    		点击事件：  onclick
    	
    	
    	id:
    		是每一个元素在页面中的唯一标识
    		
    	
    	
    	value:
    		表示的是元素的值
    -->
    <input id="first" style="width: 50px;" type="text" />
    <select id="fuhao">
    	<option>+</option>
    	<option>-</option>
    	<option>*</option>
    	<option>/</option>
    </select>
    <input id="second" style="width: 50px;" type="text" />
    <input type="button" value="=" onclick="jisuan()"/> 
    <input id="third" style="width: 100px;" type="text" readonly="readonly"/>
</body>