企业管理系统定制开发JavaScript实现简单计算器

一、企业管理系统定制开发两个输入框输入数值计算

步骤

1、编写html代码，企业管理系统定制开发实现计算器页面视图效果

2、编写js，企业管理系统定制开发实现点击输入数字和符企业管理系统定制开发号输出结果

1、编写html

1.1定义两个输入框和一个隐藏框。

1.2定义加减乘除四个按钮，并在里面设置一个单击事件onclick，单击后调用clac()函数，并将运算符号传递给函数。

1.3定义0-9十个按钮，并在里面设置一个单击事件onclick，单击后调用click1()函数，并将数字传递给函数。

1.4定义一个计算按钮，并在里面设置一个单击事件onclick，单击后调用result()函数，计算出结果。

1.5定义一个清空按钮，并在里面设置一个单击事件onclick，单击后调用click2()函数，将输入框的内容清空。

在<body></body>主体中编写html以下代码：

  1. 第一个数:<input type="number" name="num1" id="num1" /><br />
  2. 第二个数:<input type="number" name="num2" id="num2" /><br />
  3. <input type="hidden" name="num3" id="num3" />//隐藏框，type="hidden"
  4. <input type="button" value="加" onclick="clac('+')" />
  5. <input type="button" value="减" onclick="clac('-')" />
  6. <input type="button" value="乘" onclick="clac('*')" />
  7. <input type="button" value="除" onclick="clac('/')" />
  8. <br />
  9. <input type="button" value="1" onclick="click1(1)" />
  10. <input type="button" value="2" onclick="click1(2)" />
  11. <input type="button" value="3" onclick="click1(3)" />
  12. <input type="button" value="4" onclick="click1(4)" />
  13. <input type="button" value="5" onclick="click1(5)" />
  14. <br />
  15. <input type="button" value="6" onclick="click1(6)" />
  16. <input type="button" value="7" onclick="click1(7)" />
  17. <input type="button" value="8" onclick="click1(8)" />
  18. <input type="button" value="9" onclick="click1(9)" />
  19. <input type="button" value="0" onclick="click1(0)" /><br />
  20. <input type="button" value="计算" onclick="result()" />
  21. <input type="button" value="清空" onclick="click2()" />

2、编写js

2.1定义一个flag标志，并赋值为true，当点击计算符号之后，改变flag的值为false。

2.2创建click1函数，判断flag的值，如果是true就定位到第一个输入框，如果是false就定位到第二个输入框，将点击传过来的值与输入框里面的字符串拼接到一起。

document.querySelector()，进行，如果是用class属性来定位，定位时class属性值前面要加点号(.)，如果是用id属性来定位，定位时id属性值前面要加#。

可以使用.value取出这个属性的value值。

  1. function click1(num){
  2.     if(flag){
  3.         var num1=document.querySelector("#num1");
  4.         num1.value+=num;
  5.     }else{
  6.         var num2=document.querySelector("#num2");
  7.         num2.value+=num;
  8.     }			
  9. }

2.3创建clac函数，定位到隐藏框，将点击传过来的符号放入输入框，并将flag值改为false。

  1. function clac(s){
  2. 	var d=document.querySelector("#num3");
  3. 	d.value=s;
  4. 	flag=false;
  5. }

2.4定义result函数，定位到两个输入框，取出其中的值并转成整数，定位到隐藏输入框，取出里面的符号，然后判断是什么符号，进行相应的运算，弹出运算结果。

  1. function result(){
  2. 	var num1=parseInt(document.querySelector("#num1").value);
  3. 	var num2=parseInt(document.querySelector("#num2").value);
  4. 	var d=document.querySelector("#num3").value;
  5. 	switch (d){
  6. 		case '+':
  7. 			alert(num1+num2);
  8. 			break;
  9. 		case '-':
  10. 		    alert(num1-num2);
  11. 			break;
  12. 		case '*':
  13. 			alert(num1*num2);
  14. 			break;
  15. 		case '/':
  16. 			alert(num1/num2);
  17. 			break;
  18. 		default:
  19. 			alert("输入有误")
  20. 			break;
  21. 	}
  22. }

2.5创建click2函数，定位三个输入框，并复制为空。

  1. function click2(){
  2. 	document.querySelector("#num1").value="";
  3. 	document.querySelector("#num2").value="";
  4. 	document.querySelector("#num3").value="";
  5. }

在<script></script>标签中编写以下JavaScript代码 ：

  1. <script type="text/javascript">
  2. 	var flag=true;
  3. 	function clac(s){
  4. 		var d=document.querySelector("#num3");
  5. 		d.value=s;
  6. 		flag=false;
  7. 	}
  8. 	function click1(num){
  9. 		if(flag){
  10. 			var num1=document.querySelector("#num1");
  11. 			num1.value+=num;
  12. 		}else{
  13. 			var num2=document.querySelector("#num2");
  14. 			num2.value+=num;
  15. 		}
  16. 		
  17. 	}
  18. 	
  19. 	function result(){
  20. 		var num1=parseInt(document.querySelector("#num1").value);
  21. 		var num2=parseInt(document.querySelector("#num2").value);
  22. 		var d=document.querySelector("#num3").value;
  23. 		switch (d){
  24. 			case '+':
  25. 				alert(num1+num2);
  26. 				break;
  27. 			case '-':
  28. 				alert(num1-num2);
  29. 				break;
  30. 			case '*':
  31. 				alert(num1*num2);
  32. 				break;
  33. 			case '/':
  34. 				alert(num1/num2);
  35. 				break;
  36. 			default:
  37. 				alert("输入有误")
  38. 				break;
  39. 		}
  40. 	}
  41. 	function click2(){
  42. 		document.querySelector("#num1").value="";
  43. 	    document.querySelector("#num2").value="";
  44. 	    document.querySelector("#num3").value="";
  45. 	}
  46. </script>

效果图如下 

 二、一个输入框输入数值和符号并计算

页面html代码如下：

  1. <input type="text" id="num1" />
  2. <br/>
  3. <input type="button" value="+" onclick="click2('+')"/>
  4. &nbsp;
  5. <input type="button" value="-" onclick="click2('-')"/>
  6. &nbsp;
  7. <input type="button" value="*" onclick="click2('*')"/>
  8. &nbsp;
  9. <input type="button" value="/" onclick="click2('/')"/>
  10. &nbsp;
  11. <br/>
  12. <input type="button" value="1" onclick="click1(1)"/>
  13. &nbsp;
  14. <input type="button" value="2" onclick="click1(2)"/>
  15. &nbsp;
  16. <input type="button" value="3" onclick="click1(3)"/>
  17. &nbsp;
  18. <input type="button" value="4" onclick="click1(4)"/>
  19. &nbsp;
  20. <input type="button" value="5" onclick="click1(5)"/>
  21. &nbsp;
  22. <br/>
  23. <input type="button" value="6" onclick="click1(6)"/>
  24. &nbsp;
  25. <input type="button" value="7" onclick="click1(7)"/>
  26. &nbsp;
  27. <input type="button" value="8" onclick="click1(8)"/>
  28. &nbsp;
  29. <input type="button" value="9" onclick="click1(9)"/>
  30. &nbsp;
  31. <input type="button" value="0" onclick="click1(0)"/>
  32. &nbsp;
  33. <br/>
  34. <br/>
  35. <input type="button" value="计算" onclick="eq()"/>
  36. &nbsp;
  37. <input type="button" value="清空" onclick="reset()"/>

JavaScript代码如下： 

  1. <script type="text/javascript">
  2. 	var num1;
  3. 	function click1(num){
  4. 		num1=document.querySelector("#num1");
  5. 		num1.value+=num;
  6. 	}
  7. 	function click2(s){
  8. 		num1=document.querySelector("#num1");//定位到输入框
  9. 		var lasts=num1.value.charAt(num1.value.length-1);//取出输入框中字符串的最后一个字符，即运算符
  10. 		var ss=(lasts=='+'||lasts=='-'||lasts=='*'||lasts=='/');
  11. 		if(num1.value!=""&&!ss){
  12. 			num1.value+=s;
  13. 		}
  14. 	}
  15. 	function eq(){
  16. 		var n1="";
  17. 		var n2="";
  18. 		var s1=""
  19. 		num1=document.querySelector("#num1");
  20. 		num1.value+="=";
  21. 	
  22. 		var j=0;
  23.         //循环遍历字符串
  24. 		for(i in num1.value){
  25. 			var m=num1.value[j];
  26. 			if(m=="+"||m=="-"||m=="*"||m=="/"){//判断是否是运算符，是的话执行以下语句
  27. 				n1=num1.value.substring(0,j);//截取运算符前面的字符串
  28. 				s1=num1.value[j];//获取运算符
  29. 				n2=num1.value.substring(j+1,num1.value.length-1);//获取运算符后面的字符串
  30. 				break;
  31. 			}
  32. 			j++;
  33. 		}
  34.         //将截取的字符串转成整数
  35. 		n1=parseInt(n1);
  36. 		n2=parseInt(n2);
  37. 		switch (s1){
  38. 			case "+":
  39. 				num1.value+=(n1+n2);
  40. 				break;
  41. 			case "-":
  42. 				num1.value+=(n1-n2);
  43. 				break;
  44. 			case "*":
  45. 				num1.value+=(n1*n2);
  46. 				break;
  47. 			case "/":
  48. 				num1.value+=(n1/n2);
  49. 				break;
  50. 			default:
  51. 				break;
  52. 		}
  53. 	}
  54.     function reset(){
  55. 		num1=document.querySelector("#num1");
  56. 		num1.value="";
  57. 	}
  58. 	
  59. </script>

效果图如下 

三、 两个数值、符号、结果分别一个输入框

html代码如下：

  1. 第一个值：<input type="number" class="clear" id="num1" /><br />
  2. <input type="button" value="1" onclick="click1(1)" />
  3. <input type="button" value="2" onclick="click1(2)" />
  4. <input type="button" value="3" onclick="click1(3)" />
  5. <input type="button" value="4" onclick="click1(4)" />
  6. <input type="button" value="5" onclick="click1(5)" />
  7. <input type="button" value="6" onclick="click1(6)" />
  8. <input type="button" value="7" onclick="click1(7)" />
  9. <input type="button" value="8" onclick="click1(8)" />
  10. <input type="button" value="9" onclick="click1(9)" />
  11. <input type="button" value="0" onclick="click1(0)" />
  12. <input type="button" value="清除" onclick="reset1()" />
  13. <hr /> 运算方法：
  14. <input type="text" id="num3" /><br />
  15. <input type="button" value="加" onclick="calc('+')" />
  16. <input type="button" value="减" onclick="calc('-')" />
  17. <input type="button" value="乘" onclick="calc('*')" />
  18. <input type="button" value="除" onclick="calc('/')" />
  19. <hr /> 第二个值：
  20. <input type="number" class="clear" id="num2" /><br />
  21. <input type="button" value="1" onclick="click2(1)" />
  22. <input type="button" value="2" onclick="click2(2)" />
  23. <input type="button" value="3" onclick="click2(3)" />
  24. <input type="button" value="4" onclick="click2(4)" />
  25. <input type="button" value="5" onclick="click2(5)" />
  26. <input type="button" value="6" onclick="click2(6)" />
  27. <input type="button" value="7" onclick="click2(7)" />
  28. <input type="button" value="8" onclick="click2(8)" />
  29. <input type="button" value="9" onclick="click2(9)" />
  30. <input type="button" value="0" onclick="click2(0)" />
  31. <input type="button" value="清除" onclick="reset2()" />
  32. <hr />
  33. <input type="button" value="计算" class="result" onclick="result()" />
  34. <input type="text" name="res1" id="res1" value="" />

 JavaScript代码如下：

  1. <script type="text/javascript">
  2.     //第一个输入框输入数字
  3. 	function click1(num) {
  4. 		var num1 = document.querySelector("#num1");
  5. 		num1.value += num;
  6. 	}
  7.     //第一个输入框输重置
  8. 	function reset1() {
  9. 		var num1 = document.querySelector("#num1");
  10. 		num1.value = "";
  11. 	}
  12.     //第三个输入框输入数字
  13. 	function click2(num) {
  14. 		var num1 = document.querySelector("#num2");
  15. 		num1.value += num;
  16. 	}
  17.     //第三个输入框重置
  18. 	function reset2() {
  19. 		var num2 = document.querySelector("#num2");
  20. 		num2.value = "";
  21. 	}
  22.     //第二个输入框输入运算符
  23. 	function calc(s) {
  24. 		var num3 = document.querySelector("#num3");
  25. 		num3.value = s;
  26. 	}
  27.     //第四个输入框输出结果
  28. 	function result() {
  29. 		var num1 = parseInt(document.querySelector("#num1").value);
  30. 		var num2 = parseInt(document.querySelector("#num2").value);
  31. 		var s = document.querySelector("#num3").value;
  32. 		var res = document.querySelector("#res1");
  33. 		switch(s) {
  34. 			case '+':
  35. 				res.value = num1 + num2;
  36. 				break;
  37. 			case '-':
  38. 				res.value = num1 - num2;
  39. 				break;
  40. 			case '*':
  41. 				res.value = num1 * num2;
  42. 				break;
  43. 			case '/':
  44. 				res.value = num1 / num2;
  45. 				break;
  46. 			default:
  47. 				break;
  48. 		}
  49. 	}
  50. </script>

效果图如下：

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发