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