JavaScript函数(方法)与HTML结合运用：制作极简计算器

我大受震撼

已于 2023-12-25 10:35:16 修改

阅读量2.4k

点赞数 4

分类专栏： JavaScript 文章标签： javascript html 前端 html5

于 2022-03-12 18:38:56 首次发布

本文链接：https://blog.csdn.net/m0_58875335/article/details/123446753

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.JavaScript代码部分

注：在本文JS代码虽与HTML分开写，但是须结合两者观看，如JS中从id获取的内容，即需要结合HTML标签的id分析。

	<script type="text/javascript">

		
		function computer(){
//首先创建一个函数，不需要形参，computer为自定义的函数名称。
//函数用于将所有过程存储在函数中，成为一个运算的方法，在HTML中用鼠标点击的方式调用

			var inum1 = document.getElementById(num1);
			var jg = document.getElementById(iy)
			var inum2 = document.getElementById(num2);
			var inum3 = document.getElementById(num3);
//先创建变量用于获取并保存用户在浏览器界面通过HTML标签输入的元素
//document.getElementById（）;即从id获取元素

			
			if(num1.value == ''||num2.value == ''){//判断输入的内容是否为空
				alert('内容为空，请重新输入');
				return;	
			}
			else if(iy.value == "+"){
				num3.value = parseInt(num1.value) + parseInt(num2.value);
			}
//在id是num3的input输入框中，如果用户选择了加号，就将num1和num2内的内容相加
//计算结果输出在num3的输入框(value，显示的值)中
			else if(iy.value == "-"){
				num3.value = parseInt(num1.value) - parseInt(num2.value);
			}
//在id是num3的input输入框中，如果用户选择了减号，就将num1和num2内的内容相减
//计算结果显示在num3的输入框（value，显示的值）中。下面的乘法与除法类推
			else if(iy.value == "*"){
				num3.value = parseInt(num1.value) * parseInt(num2.value);
			}else{
				num3.value = parseInt(num1.value) / parseInt(num2.value);
			}//if else if后面无论有多少个if，最终都是用else结束，不应出现if结束的情况
			

		}
		
	
	</script>

2.HTML标签部分

<body>
		<form>
		<h1>简易计算器</h1>
		<p>

        <input type="text" style="width:60px;"  name="" id="num1" value="" />
		//设置一个文本输入框，style为宽度，可无视，下同。id设置为num1，与js代码搭配使用
        //这是第一个值的输入框

		<select id="iy" name="">
			<option value="+">+</option>
			<option value="-">-</option>
			<option value="*">x</option>
            //注意乘法运算符与常用的乘号不同
			<option value="/">/</option>
		</select>
		//下拉列表，用于进行运算符的选择，id搭配js，用于存储用户选择的运算符
        //并在js中选择需要进行的运算

		<input type="text" style="width:60px;" name="" id="num2" value="" />
        //第二个文本输入框，与第一个作用相同，不多赘述。

        <input type="button" value="=" onclick="computer()" />
        //用于显示一个等号按钮，用鼠标点击（onclick）来进行js运算函数的调用，实现输出结果
        
        <input type="text" style="width:60px;" name="" id="num3" value="" />
        //第三个文本框，用于显示运算结果，js通过id来实现结果在这的输出

		</p>
		</form>

		
</body>