JavaScript Calculator Web Version Realization Code Sharing
- 2021-07-04 17:47:58
- OfStack
JavaScript Web Calculator Code, the calculator is written with DW!
HTML
<html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Calculator </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;
//第1步：获取按键值，并显示在显示框中
function command(num) {
//获取显示框的值
var str = String(document.form1.txt.value);
//对该值进行判断，如果该值不为"0"，且输入状态0，则返回前者，否则为""(双重3目运算)
//两个判断条件：1、显示框中值是否为"0", 2、数的输入状态
str = (str != "0")?((state == 0)?str:""):"";
//给当前值追加字符
str = str + String(num);
//刷新显示
document.form1.txt.value = str;
//按了任意数字键后，数的输入状态变为0
state = 0;
//重置防止重复按键
avoidRepeat = true;
}
//第2步：确保输入的数是合法的，每个数至多只有1个小数点
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;
}
//第3步：处理退格键
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;
}
//第4步：删除所有
function deleteAll() {
//显示框设为"0"
document.form1.txt.value = "0";
//恢复数的初始输入状态
state = 0;
//恢复运算符键，默认为0--等于号
operator = 0;
}
//第5步：加法
function add() {
//调用计算函数
calculate();
//更改数的输入状态
state = 1;
//更改运算符键，1--加号
operator = 1;
}
//第6步：减法
function subtract() {
//调用计算函数
calculate();
//更改数的输入状态
state = 1;
//2--减号
operator = 2;
}
//第7步：乘法
function multiply() {
//调用计算函数
calculate();
//更改数的输入状态
state = 1;
//3--乘号
operator = 3;
}
//第8步：除法
function divide() {
//调用计算函数
calculate();
//更改数的输入状态
state = 1;
//4--除号
operator = 4;
}
//第9步：正负号
function sign() {
//5--正负号
operator = 5;
//调用计算函数
calculate();
//更改数的输入状态
state = 1;
//0--等于号
operator = 0;
//正负号可以连续按
avoidRepeat = true;
}
//第10步：等于
function equal() {
//调用计算函数
calculate();
//更改数的输入状态
state = 1;
//0--等于号
operator = 0;
}
//第101步：计算
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;
}
}
//第102步：清屏函数
function clearScreen() {
document.getElementById("txt").value = "0";
}
Please check "Calculator Special Topics" for wonderful articles about calculators, and more wonderful articles are waiting for you to discover!