用js实现简单计算器

最新推荐文章于 2024-04-27 05:36:48 发布

Haolijuan_123

最新推荐文章于 2024-04-27 05:36:48 发布

阅读量106

点赞数

文章标签： javascript html

本文链接：https://blog.csdn.net/Haolijuan_123/article/details/116169914

版权

用js实现简单计算器

一、所用方法

1、如何获取元素

	var input1 = document.getElementById('one');

2、如何获取表单元素的值

   sum = Number(input1.value) + Number(input2.value);

3.如何绑定点击事件

input4.onclick = function(){
}

二、计算器代码

下面展示一些 内联代码片。

<!DOCTYPE html>
<html>
<head>
	<title>计算器</title>
	<meta charset="utf-8">
</head>
<body>
	<input type="text" id="one" name="">
	<select id="three">
		<option>+</option>
		<option>-</option>
		<option>*</option>
		<option>/</option>
	</select>
	<input type="text" id="two" name="">
	<button id="four">提交</button>
	<input type="text" id="result" name="">
</body>

</html>

<script type="text/javascript">
	var input1 = document.getElementById('one');
	var input2 = document.getElementById('two');
	var input3 = document.getElementById('three');
	var input4 = document.getElementById('four');
	
	input4.onclick = function(){
		if(input3.value === '+'){

			sum = Number(input1.value) + Number(input2.value);
			document.getElementById("result").value = sum;
		}else if(input3.value === '-'){
			jian = Number(input1.value) - Number(input2.value);
			document.getElementById("result").value = jian;
		}else if(input3.value === '*'){
			cheng = Number(input1.value) * Number(input2.value);
			document.getElementById("result").value = cheng;
		}else if(input3.value === '/'){
			cheng = Number(input1.value) / Number(input2.value);
			document.getElementById("result").value = cheng;
			
		}
	}
	



</script>

Haolijuan_123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用js实现简单计算器

用js实现简单计算器一、所用方法1、如何获取元素 var input1 = document.getElementById('one');2、如何获取表单元素的值 sum = Number(input1.value) + Number(input2.value);3.如何绑定点击事件input4.onclick = function(){}二、计算器代码下面展示一些内联代码片。<!DOCTYPE html><html><head&gt
复制链接

扫一扫