这篇文章主要为大家详细介绍了 JavaScript 计算器网页版实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
JavaScript 网页计算器代码,该计算器是用 DW 写的!
html 篇
- <html <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- 计算器
- </title>
- <link href="style/calculator.CSS" rel="stylesheet" type="text/css" />
- <script src="JavaScript/calculator.js">
- </script>
- >
- </head>
- <body>
- <form id="form1" name="form1" method="post" action="">
- <table width="320" border="1" cellpadding="0" cellspacing="0" class="trb"
- id="calculator">
- <tr>
- <td height="100" colspan="4" align="left" valign="top">
- <label for="txt">
- </label>
- <input name="txt" type="text" class="txt" id="txt" value="0" onfocus="this.blur();"
- />
- </td>
- </tr>
- <tr>
- <td width="80" height="40" align="center" valign="middle" onclick="deleteAll();">
- C
- </td>
- <td width="80" height="40" align="center" valign="middle" onclick="Backspace();">
- ←
- </td>
- <td width="80" height="40" align="center" valign="middle" onclick="sign();">
- ±
- </td>
- <td width="80" height="40" align="center" valign="middle" class="operator"
- onclick="add();">
- +
- </td>
- </tr>
- <tr>
- <td width="80" height="40" align="center" valign="middle" onclick="command(7);">
- 7
- </td>
- <td width="80" height="40" align="center" valign="middle" onclick="command(8);">
- 8
- </td>
- <td width="80" height="40" align="center" valign="middle" onclick="command(9);">
- 9
- </td>
- <td width="80" height="40" align="center" valign="middle" class="operator"
- onclick="subtract();">
- -
- </td>
- </tr>
- <tr>
- <td width="80" height="40" align="center" valign="middle" onclick="command(4);">
- 4
- </td>
- <td width="80" height="40" align="center" valign="middle" onclick="command(5);">
- 5
- </td>
- <td width="80" height="40" align="center" valign="middle" onclick="command(6);">
- 6
- </td>
- <td width="80" height="40" align="center" valign="middle" class="operator"
- onclick="multiply();">
- ×
- </td>
- </tr>
- <tr>
- <td width="80" height="40" align="center" valign="middle" onclick="command(1);">
- 1
- </td>
- <td width="80" height="40" align="center" valign="middle" onclick="command(2);">
- 2
- </td>
- <td width="80" height="40" align="center" valign="middle" onclick="command(3);">
- 3
- </td>
- <td width="80" height="40" align="center" valign="middle" class="operator"
- onclick="divide();">
- ÷
- </td>
- </tr>
- <tr>
- <td width="80" height="40" align="center" valign="middle" onclick="command(0);">
- 0
- </td>
- <td width="80" height="40" align="center" valign="middle" onclick="dot();">
- ▪
- </td>
- <td height="40" colspan="2" align="center" valign="middle" bgcolor="#CC6600"
- onclick="equal();">
- =
- </td>
- </tr>
- </table>
- <p>
- </p>
- <p>
- </p>
- </form>
- </body>
- </html>
CSS 篇
- @charset "utf-8";
- /* CSS Document */
- .trb {
- font - family: Georgia,
- "Times New Roman",
- Times,
- serif;
- font - size: 24px;
- color: #FFF;
- background - color: #333;
- text - align: center;
- border: 1px solid#999;
- }.operator {
- background - color: #333;
- font - size: 18px;
- color: #C60;
- font - family: Verdana,
- Geneva,
- sans - serif;
- }
- td: hover {
- font - size: 28px;
- cursor: pointer;
- }.txt {
- height: 100px;
- width: 320px;
- background - color: #333;
- text - align: left;
- vertical - align: bottom;
- color: #FFF;
- font - size: 30px;
- }
JavaScript 篇
- //实现计算器功能
- //结果
- var result = 0;
- //显示框中的数(默认为"0")
- var screenNum = "0";
- //数的初始输入状态,默认为0;当按了任意运算符键后,数的输入状态变为1
- var state = 0;
- //防止重复按运算符键
- var avoidRepeat = true;
- //运算符键(默认为0--等于号)
- var operator = 0;
- //第一步:获取按键值,并显示在显示框中
- function command(num) {
- //获取显示框的值
- var str = String(document.form1.txt.value);
- //对该值进行判断,如果该值不为"0",且输入状态0,则返回前者,否则为""(双重三目运算)
- //两个判断条件:1、显示框中值是否为"0", 2、数的输入状态
- str = (str != "0")?((state == 0)?str:""):"";
- //给当前值追加字符
- str = str + String(num);
- //刷新显示
- document.form1.txt.value = str;
- //按了任意数字键后,数的输入状态变为0
- state = 0;
- //重置防止重复按键
- avoidRepeat = true;
- }
- //第二步:确保输入的数是合法的,每个数至多只有一个小数点
- function dot() {
- var str = String(document.form1.txt.value);
- //若该数前面未接运算符,则返回前值,否则为"0";
- str = (state == 0)?str:"0";
- //Java里String有length()方法,而JS里String有length属性
- for(i=0;i<=str.length;i++) {
- //substr()获取下标从i开始,个数为1个的子串
- if(str.substr(i,1)==".") {
- //当存在小数点时,则程序终止
- return;
- }
- }
- //若无小数点,则在该数后面加上
- str = str+".";
- //刷新显示
- document.form1.txt.value = str;
- //恢复数的初始输入状态
- state = 0;
- }
- //第三步:处理退格键
- function Backspace() {
- var str= String(document.form1.txt.value);
- //若显示框中数不等于"0",则返回str,否则返回""
- str = (str != "0")?str:"";
- //获取子串
- str = str.substr(0,str.length-1);
- //若str不为"",则返回子串str,否则str="0"
- str = (str != "")?str:"0";
- //刷新显示
- document.form1.txt.value = str;
- }
- //第四步:删除所有
- function deleteAll() {
- //显示框设为"0"
- document.form1.txt.value = "0";
- //恢复数的初始输入状态
- state = 0;
- //恢复运算符键,默认为0--等于号
- operator = 0;
- }
- //第五步:加法
- function add() {
- //调用计算函数
- calculate();
- //更改数的输入状态
- state = 1;
- //更改运算符键,1--加号
- operator = 1;
- }
- //第六步:减法
- function subtract() {
- //调用计算函数
- calculate();
- //更改数的输入状态
- state = 1;
- //2--减号
- operator = 2;
- }
- //第七步:乘法
- function multiply() {
- //调用计算函数
- calculate();
- //更改数的输入状态
- state = 1;
- //3--乘号
- operator = 3;
- }
- //第八步:除法
- function divide() {
- //调用计算函数
- calculate();
- //更改数的输入状态
- state = 1;
- //4--除号
- operator = 4;
- }
- //第九步:正负号
- function sign() {
- //5--正负号
- operator = 5;
- //调用计算函数
- calculate();
- //更改数的输入状态
- state = 1;
- //0--等于号
- operator = 0;
- //正负号可以连续按
- avoidRepeat = true;
- }
- //第十步:等于
- function equal() {
- //调用计算函数
- calculate();
- //更改数的输入状态
- state = 1;
- //0--等于号
- operator = 0;
- }
- //第十一步:计算
- function calculate() {
- //获取显示框中的值
- screenNum = Number(document.form1.txt.value);
- if(avoidRepeat) {
- switch(operator){
- case 1:
- result = result + screenNum;
- document.form1.txt.value = result;
- break;
- case 2:
- result = result - screenNum;
- document.form1.txt.value = result;
- break;
- case 3:
- result = result * screenNum;
- document.form1.txt.value = result;
- break;
- case 4:
- if(screenNum == 0){
- //设置显示框的值
- document.getElementById("txt").value="除数不能为0";
- //3s后,执行清屏函数
- setTimeout(clearScreen,3000);
- }else{
- result = result/screenNum;
- document.form1.txt.value = result;
- }
- break;
- case 5:
- result = (-1)*screenNum;
- document.form1.txt.value = result;
- break;
- case 0:
- result = screenNum;
- document.form1.txt.value = result;
- break;
- }
- //当按了运算符键后,不能再按
- avoidRepeat = false;
- }
- }
- //第十二步:清屏函数
- function clearScreen() {
- document.getElementById("txt").value = "0";
- }
来源: http://www.phperz.com/article/17/0314/264267.html