JavaScript网页计算器代码，该计算器是用DW写的！

HTML篇

计算器

>

C	←	±	＋
7	8	9	－
4	5	6	×
1	2	3	÷
0	▪	＝

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

}

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。