当前位置: 首页 > 编程笔记 >

JavaScript计算器网页版实现代码分享

欧阳狐若
2023-03-14
本文向大家介绍JavaScript计算器网页版实现代码分享,包括了JavaScript计算器网页版实现代码分享的使用技巧和注意事项,需要的朋友参考一下

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";
 
}

关于计算器的精彩文章请查看《计算器专题》 ,更多精彩等你来发现!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍Javascript 实现简单计算器实例代码,包括了Javascript 实现简单计算器实例代码的使用技巧和注意事项,需要的朋友参考一下 效果图: 刚开始做时没考虑到清零和退格两个功能,嘻嘻,后来加的整体与传统计算器比有点小瑕疵。 代码: 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

  • 本文向大家介绍javascript实现简易计算器的代码,包括了javascript实现简易计算器的代码的使用技巧和注意事项,需要的朋友参考一下 今天闲来无聊,想写点什么,突然想到用javascript写一个计算器。程序还存在很多的Bug,先在这里记录一下,以后慢慢更正。 代码如下: 以上这篇javascript实现简易计算器的代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多

  • 本文向大家介绍php网页版聊天软件实现代码,包括了php网页版聊天软件实现代码的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了php匿名聊天室的具体实现代码,供大家参考,具体内容如下 1. index.html    2. action.php 3. chat.sql 4. add.php 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍android计算器简单实现代码,包括了android计算器简单实现代码的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了android计算器的具体实现代码,供大家参考,具体内容如下 java代码: xml: 关于计算器的精彩文章请查看《计算器专题》 ,更多精彩等你来发现! 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍Java计算器核心算法代码实现,包括了Java计算器核心算法代码实现的使用技巧和注意事项,需要的朋友参考一下 在进行一个表达式的计算时,先将表达式分割成数字和字符串然后利用出入栈将分割后的表达式进行中缀转后缀,再将后缀表达式进行计算得到结果(思想在上一篇写过)现在贴下Java语言的代码实现。(学习Java时间不长所以可能会有很多不足的地方,我会改进也欢迎大神可以给我一些意见和建议~谢

  • 本文向大家介绍JQuery的Pager分页器实现代码,包括了JQuery的Pager分页器实现代码的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了JQuery的Pager分页器的具体实现代码,供大家参考,具体内容如下 效果图: 代码: html代码: css代码: pager.js代码 主要思路: 分页器共分为以下4种情况: 情况1,当total < 8 时,所有的页码全部显示。 情