`
niulanshan
  • 浏览: 565417 次
文章分类
社区版块
存档分类
最新评论

利用JavaScript实现加减乘除运算

 
阅读更多

一、问题:利用JavaScript写一个加减乘除运算,输入两个数,判断下拉列框的运算符号,进行相应的运算


二、首先,我利用JavaScript实现简单加法运算,代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>实现加法运算</title>
<style type="text/css">
    body{
	  font-size:12px;
	}
	#one,#two{
	  width:30px;
	  background-color:#CCCCFF;
	}
	#three{
	  border:none;
	  background:#CCCCCC;
	}
	label{
	  font-size:12px;
	  font-weight:bold;
	}
</style>
<script type="text/javascript">
   function addNumber(){
       //第一个加数
      var a = parseInt(document.getElementById("one").value);
      //第二个加数
      var b = parseInt(document.getElementById("two").value);
      //求和
      var c = a + b;
      //将结果赋给button中的Value
      document.getElementById("three").value = c;   
   }
</script>
</head>

<body>
   <input type="text" id="one"/>
   <label> + </label>
   <input type="text" id="two"/>
   <label> = </label>
   <input type="button" value="?" id="three"  onclick="addNumber()"/>
</body>
</html>
三、显示结果如下图所示:

(1)未输入数字时

(2)输入数字后,点击“?”按钮求和


四、由以上加法运算,我想进一步实现加减乘除运算。这个加号就得根据相应的条件,进行改变,并且由符号判断运 算,其实现的源码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>实现加减乘除</title>
<script type="text/javascript">
    function operation(){
	    //第一个数
	    var oneNumber =  parseInt(document.getElementById("one").value);
		alert(oneNumber);
		
		//第二个数
		var twoNumber =  parseInt(document.getElementById("two").value);
		alert(twoNumber);
		
		//运算符
		var calculate = document.getElementById("select").value;
		alert(calculate);
		
		//计算结果
		var result = parseInt(document.getElementById("select").value);
		
		/**
		*计算符号的判断
		*/
		switch(calculate)
		{
		    case'+':result = oneNumber + twoNumber;
			     break;
			
			case'-':result = oneNumber - twoNumber;
			     break;
			
			case'*':result = oneNumber * twoNumber;
			     break;
			
			case'/':result = oneNumber / twoNumber;
			    break;
				
			default:alert("错误");
			    break;
		}
	}
</script>
</head>

<body>
   <input type="text" id="one" size="12" style="width:40px; "/>
    <select id="select">
	   <option value="+">+</option>
	   <option value="-">-</option>
	   <option value="*">*</option>
	   <option value="/">/</option>
	</select>
   <input type="text" id="two" size="12" style="width:40px; "/>=
   <input type="button" id="three" value="?" style="border:none; background-color:#FFFFFF;" onclick="operation();"/>
</body>
</html>

五、结果如下图:

分享到:
评论

相关推荐

    小学加减乘除运算测试

    总之,《小学加减乘除运算测试》利用JavaScript技术,为小学生创造了一个寓教于乐的学习环境。它将传统课堂的知识点融入到数字化的互动练习中,使学习变得更加有趣且高效。同时,其潜在的个性化分析功能,有助于提升...

    MathTask_单元测试_加减乘除运算_

    接下来,我们将深入探讨单元测试以及加减乘除运算是如何在编程中实现和验证的。 首先,单元测试是软件开发过程中的一个关键环节,它用于验证软件中的最小可测试单元——通常是函数或方法——是否按照预期工作。通过...

    解决JS浮点数(小数)计算加减乘除的BUG

    在JavaScript中,浮点数(小数)的计算可能会出现一些看似奇怪的结果,这主要是由于计算机内部表示浮点数的方式导致的。这个问题是许多开发者在编写JavaScript代码时可能遇到的一个常见陷阱。本文将深入探讨这个问题...

    小学加减乘除运算测试.rar

    总结来说,这个“小学加减乘除运算测试”应用是利用JavaScript和可能的JSP技术构建的,提供了一种互动的方式帮助小学生练习基本的算术运算,同时也展示了如何在有限的资源下开发高效、实用的应用程序。

    计算器运算逻辑实现(带括号,求余,乘方,加减乘除),不使用eval函数-前端JavaScript 源码实现-括号匹配与初等运算

    在前端开发中,实现一个计算器功能是一项常见的任务,特别是当这个计算器需要处理复杂的运算,如括号、求余、乘方以及加减乘除时。本文将深入探讨如何使用JavaScript来实现这样的计算器逻辑,不依赖于`eval`函数,...

    vue + 计算器 实现 加减乘除

    在本项目中,我们主要探讨如何使用Vue.js框架来实现一个基本的计算器功能,包括加、减、乘、除四种运算。Vue.js是一款轻量级的前端JavaScript框架,以其组件化开发模式、响应式数据绑定和易用性而受到开发者们的广泛...

    小学加减乘除运算测试 v0.2版.rar

    《小学加减乘除运算测试 v0.2版》是一个基于JSP技术开发的在线教育应用,主要针对小学生进行基础数学运算能力的测试。在这个版本v0.2中,开发者对原有功能进行了优化和增强,增加了计时和计分功能,以提升软件的互动...

    小学加减乘除运算测试 v0.2 版本

    《小学加减乘除运算测试 v0.2 版本》是一个专为小学生设计的在线数学练习平台,采用JavaScript编程语言开发。这个测试系统旨在帮助孩子们巩固基础的数学运算技能,包括加法、减法、乘法和除法。通过交互式的方式,...

    js 加减乘除

    3. **自定义函数法**:编写专门的函数来处理加减乘除运算,确保结果的准确性。 下面详细介绍每种方法的具体实现。 #### 三、自定义函数实现 1. **加法**:`accAdd` ```javascript function accAdd(arg1, arg2...

    加减乘除的web页面

    4. **加减乘除运算**:JavaScript提供了基本的数学运算符(+,-,*,/)来实现这些功能。例如,`result = num1 + num2` 对两个数进行相加操作,结果存储在`result`变量中。 5. **MyEclipse**:MyEclipse是一款集成...

    js加减乘除计算器代码.zip

    在JavaScript编程语言中,创建一个加减乘除的计算器是一个基础但实用的练习。这个"js加减乘除计算器代码.zip"文件包含了一个简单的计算器应用的源代码,它具有扁平化设计,使得用户界面简洁易用。我们将深入探讨这个...

    javascrpt的加减乘除运算

    ### JavaScript中的精确加减乘除运算 在JavaScript中进行数学计算时,经常会出现精度丢失的问题,尤其是在处理小数运算时尤为明显。这是因为JavaScript中的数字是以双精度浮点数(64位)形式存储的,遵循IEEE 754...

    JS-加减乘除运算.zip

    带小数点的加法、减法、乘法、除法的计算...当然你也可以改为一个方法,只传入数值参数和计算类型(加、减、乘、除)就能得到结果。 代码有优化,请前往查看:https://blog.csdn.net/yyl262/article/details/107139817

    扁平风格加减乘除网页计算器js代码.zip

    在描述中提到,“简洁的兼容手机移动端的加减乘除运算计算器网页特效”意味着这个计算器不仅在桌面端工作良好,还针对手机移动端进行了优化,确保在小屏幕设备上也能提供良好的用户体验。其“特效”可能包括交互反馈...

    小学生作业随机加减乘除运算计算习题答案html源码.zip

    该压缩包文件“小学生作业随机加减乘除运算计算习题答案html源码.zip”包含的是一个用于小学生作业练习的HTML源代码。这个源码设计的目的主要是帮助小学生进行加减乘除的基础运算训练,随机生成习题以增加学习的趣味...

    使用HTML5、CSS3和JavaScript实现简易四则运算

    此外,还可以利用Flexbox或Grid布局来实现响应式设计,确保计算器在不同设备上都能正常显示。 **JavaScript** JavaScript是实现交互性的关键。我们将使用JavaScript来处理用户输入,捕获按钮点击事件,并执行相应的...

    用javascript编写的一个简单的计算器

    用于简单的加减乘除运算 运用javascript技术实现简单的加减乘除运算。。。

    原生js简单的加减乘除计算器样式代码

    在JavaScript(JS)中创建一个简单的加减乘除计算器是一个基础但实用的实践项目,它可以帮助初学者理解事件处理、DOM操作以及基本的数学运算。本项目主要涉及到以下几个知识点: 1. **HTML 结构**:首先,我们需要...

    实现计算器加减乘除的功能

    在计算机编程领域,实现一...总之,实现一个包含加减乘除、平方和退格功能的计算器涉及了基础的算术运算、数据结构(如栈)、表达式解析以及用户交互处理。这个过程既锻炼了编程技巧,也是理解计算机科学原理的好实践。

    百位内加减乘除算法大赛php版.rar

    标题中的“百位内加减乘除算法大赛php版.rar”揭示了这是一个使用PHP编程语言开发的项目,主要涉及数学运算,尤其是基础算术运算,包括加法、减法、乘法和除法,且计算范围限定在百位以内。这个项目可能是一个在线...

Global site tag (gtag.js) - Google Analytics