利用JavaScript实现加减乘除运算

最新推荐文章于 2024-08-05 08:30:00 发布

采精小蝴蝶

最新推荐文章于 2024-08-05 08:30:00 发布

阅读量4.5k

点赞数 2

本文链接：https://blog.csdn.net/jrrfgj/article/details/83834803

版权

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

一、问题：利用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>