前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JS-计算器制作

JS-计算器制作

作者头像
xing.org1^
发布2018-05-17 16:53:29
4.2K0
发布2018-05-17 16:53:29
举报
文章被收录于专栏:前端说吧前端说吧

不完善,接下来想着把运算符分开成一个一个的按钮...

代码语言:javascript
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>自制计算器</title>
		<style type="text/css">
		input{
				border: 1px solid #4169E1;
				-webkit-border-radius: 12px;
				-moz-border-radius: 12px;
				border-radius: 12px;
				padding: 10px;
			}
			select{
				border: 1px solid #4169E1;
				-webkit-border-radius: 12px;
				-moz-border-radius: 12px;
				border-radius: 12px;
				padding: 10px;
			}
			input[type='button']{
				padding: 10px 30px;
			}
		</style>
	</head>
	<body>
		<input type="text" id="n1" placeholder="请输入第一个数" />
		<input type="text" id="n2" placeholder="请输入第二个数" />
		<select name="" id="fh">
			<option value="+">加</option>
			<option value="-">减</option>
			<option value="*">乘</option>
			<option value="/">除 </option>
			<option value="%">取余 </option>
		</select>
		<input type="button" id="s" value="求值" onclick="s()"/>
	</body>
	<script type="text/javascript">
		function s(){
			var num1 = parseInt(document.getElementById('n1').value);
			var num2 = parseInt(document.getElementById('n2').value);
			var fh = document.getElementById('fh').value;
			var sum;
			switch(fh){
				case '+':
					sum = num1 + num2;
					document.write(num1+'+'+num2+'='+sum);
				break;
				case '-':
					sum = num1 - num2;
					document.write(num1+'-'+num2+'='+sum);
				break;
				case '*':
					sum = num1 * num2;
					document.write(num1+'*'+num2+'='+sum);
				break;
				case '/':
					sum = num1 / num2;
					document.write(num1+'/'+num2+'='+sum);
				break;
				case '%':
					sum = num1 % num2;
					document.write(num1+'%'+num2+'='+sum);
				break;
			}
		}
	</script>
</html>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016-09-08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档