简易版网页计算器
来源:互联网 发布:wifi攻击软件 编辑:程序博客网 时间:2024/04/29 05:18
需求:
通过用鼠标点击数字按钮和运算符按钮,实现现实中计算器的功能,能够做加减乘除及取余运算。并能够清零和取消上一次错误输入。
1、简单界面的实现:
首先建一个表单,在表单里插入一个表格。此界面的实现可以通过代码框中通过用表单<form></form>与表格<table></table>各标签功能实现,也可以在设计框中通过插入的方式实现。
2、鼠标点击数字键在窗口中相应数字显现的实现:
在每一个数字按键button定义一个带相对应参数的触发事件,然后在第一行第一列定义一个总的接收参数的函数,从而调用JS中定义的相应函数,将参数传给函数,进行相应的值的输出(为达到第二个触发键的数字不覆盖第一个触发键的数字,进行相应的数字加操作~数字在此是字符串性质的)。
3、鼠标点击字符键后再点相应的字符时,之前的数字被清除,显示当前的数字。
在符号键上定义一个总的触发事件,调用JS中的方法,接收相应的字符并进行标识,然后清空值。
4、点击等号时,显示相应的结果。
在等号按钮设一个触发事件,调用相应的函数。此时所要操作的两个数都已操作,然后根据符号的标识在调用等号的函数中进行相应的加减乘除取余运算并进行相应结果的输出。
5、C是清零键,点击文本显示框清空。
在C按钮上设置一个触发事件,点击此按钮调用JS中设置的函数,将文本框中的内容都变为空。
6、CE清除上一次错误的输入。如:第一次输入231,点击CE后,数值显示变为23
在CE按钮上设置一个触发事件,调用JS中设置的String中substring();方法在显示的数从第一个数开始到倒数第二个数结束,将此数显示。
负数的设置:
7、若想让按钮变的更丰富美观点,可以在CSS中进行相应字体颜色大小的设置或背景颜色的设置等。
整体代码实现:
untitle.html代码:
<!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=utf-8" /><title>无标题文档</title><script src="t.js"></script><style>#button19,#CE{ width:50px; height:30px; color:#6f3;}.c{width:50px;height:30px;color:#6f3;}</style></head><body><form id="form1" name="form1" method="post" action=""> <table width="429" height="229" border="1" align="center"> <tr> <td colspan="3"><input type="text" name="firstNumber" min="10" id="Accept(input)" width="255"/></td> <td width="85" align="center"><input type="button" class="c" name="C" value="C" onclick="AcceptClear(clear);" /></td> <td width="70" align="center"><input type="button" name="CE" id="CE" value="CE" onclick="ce();" /></td> </tr> <tr> <td width="75" height="43" align="center"><input type="button" name="button" value="7" onclick="Accept(7);"/></td> <td width="90" align="center"><input type="button" name="button2" value="8" onclick="Accept(8);" /></td> <td width="75" align="center"><input type="button" name="button3" value="9" onclick="Accept(9);"/></td> <td align="center"><input type="button" name="button4" value="+/-" onclick="fushu();" /></td> <td align="center"><input type="button" name="button5" value="%" onclick="AcceptChar('%');" /></td> </tr> <tr> <td align="center"><input type="button" name="button6" value="4" onclick="Accept(4);" /></td> <td align="center"><input type="button" name="button7" value="5" onclick="Accept(5);" /></td> <td align="center"><input type="button" name="button8" value="6" onclick="Accept(6);"/></td> <td align="center"><input type="button" name="button9" value="+" onclick="AcceptChar('+');" /></td> <td align="center"><input type="button" name="button10" value="-" onclick="AcceptChar('-');" /></td> </tr> <tr> <td align="center"><input type="button" name="button11" value="1" onclick="Accept(1);"/></td> <td align="center"><input type="button" name="button12" value="2" onclick="Accept(2);"/></td> <td align="center"><input type="button" name="button13" value="3" onclick="Accept(3);"/></td> <td align="center"><input type="button" name="button14" value="*" onclick="AcceptChar('*');" /></td> <td align="center"><input type="button" name="button15" value="/" onclick="AcceptChar('/');" /></td> </tr> <tr> <td align="center"><input type="button" name="button16" value="0" onclick="Accept(0);" /></td> <td align="center"><input type="button" name="button17" value="." onclick="Accept('.');" /></td> <td> </td> <td align="center"><input type="button" name="button18" value="=" onclick="Result();" /></td> <td align="center"><input type="button" id="button19" value="返回" onclick="AcceptClear(clear);" /></td> </tr> </table></form></body></html>t.js代码:
// JavaScript Document var sum1 =""; var opp = ""; var result= ""; var f = ""; var first = "";function Accept(input){ var sum = input; sum1 = sum1 + sum; Show();} function AcceptChar(opp){result = parseFloat(sum1);Char(opp);sum1 =""; }function fushu(){sum1=-sum1;Show();result = parseFloat(-sum1);Char(opp);}function Char(opp){ switch(opp){ case "+": f = 1;break; case "-": f = 2;break; case "*": f = 3; break; case "/": f = 4; break; case "%": f = 4; break; }}function Result(res){if(f==1){result += parseFloat(sum1); sum1 = result; Show();}else if(f==2){result = result - parseFloat(sum1); sum1 = result; Show();}else if(f== 3){result = result * parseFloat(sum1);sum1 = result; Show();}else if(f== 4){result = result / parseFloat(sum1);sum1 = result; Show();}else if(f== 5){result = result % parseFloat(sum1);sum1 = result; Show();}}function AcceptClear(cler){ sum1 =""; Show();}function ce(){if(sum1=="" ){return null;}else{var n=document.getElementById("Accept(input)").value;var m=n.substring(0,n.length-1);document.getElementById("Accept(input)").value=m;sum1=m;}} function Show(){ document.getElementById("Accept(input)").value= sum1; }
0 0
- 网页简易版计算器
- 简易版网页计算器
- 简易版网页版计算器
- JS版简易网页计算器
- 简易版网页计算器js代码页面
- 简易版网页计算器html页面
- 简易版网页计算器css页面
- 制作网页版简易计算器(Calculator)
- js网页简易计算器
- 【C#】简易网页计算器实现
- JavaScript版简易计算器
- 简易计算器完美版
- 简易计算器java版
- java版简易计算器
- Java版简易计算器 PK Scala版简易计算器
- javaweb作业制作网页版简易计算器(3种方式)
- 05-wp7版简易计算器
- Java版四则运算简易计算器
- jdk安装与卸载
- Merge Two Sorted Lists
- Java反射获取属性、方法、构造器
- HTTPS那些事(一)HTTPS原理
- ios网络编程01
- 简易版网页计算器
- 自定义spring schema简化与canal集成
- error C4703: 使用了可能未初始化的本地指针变量
- 几何点线面模板
- 【学习笔记】Linux的符号链接和硬链接
- hdu1081dp
- Python教程:读取txt内容
- Spring--IOC原理
- AndroidManifest.xml文件详解(supports-screens)