设计计算器

HTML

<div id="calculator">
    <div id="calcu-head">
        <h6>简单的计算器</h6>
    </div>
    <form name="calculator" action="" method="get">
        <div id="calcu-screen"> 
            <!--配置显示窗口，使用onfocus="this.blur();"避免键盘输入-->
            <input type="text" name="numScreen" class="screen" value="0" onFocus="this.blur();">
        </div>
        <div id="calcu-btn">
            <ul>
                <!--配置按钮-->
                <li onClick="command(7)">7</li>
                <li onClick="command(8)">8</li>
                <li onClick="command(9)">9</li>
                <li class="tool" onClick="del()">←</li>
                <li class="tool" onClick="clearscreen()">C</li>
                <li onClick="command(4)">4</li>
                <li onClick="command(5)">5</li>
                <li onClick="command(6)">6</li>
                <li class="tool" onClick="times()">×</li>
                <li class="tool" onClick="divide()">÷</li>
                <li onClick="command(1)">1</li>
                <li onClick="command(2)">2</li>
                <li onClick="command(3)">3</li>
                <li class="tool" onClick="plus()">+</li>
                <li class="tool" onClick="minus()">-</li>
                <li onClick="command(0)">0</li>
                <li onClick="dzero()">00</li>
                <li onClick="dot()">.</li>
                <li class="tool" onClick="persent()">%</li>
                <li class="tool" onClick="equal()">=</li>
            </ul>
        </div>
    </form>
</div>
    					

JS

var num = 0,
    result = 0,
    numshow = "0";
var operate = 0;
//判断输入状态的标志
var calcul = 0;
//判断计算状态的标志
var quit = 0;
//防止重复按键的标志
function command(num) {
	var str = String(document.calculator.numScreen.value);
	//获得当前显示数据
	str = (str != "0") ? ((operate == 0) ? str : "") : "";
	//如果当前值不是"0"，且状态为0，则返回当前值，否则返回空值;
	str = str + String(num);
	//给当前值追加字符
	document.calculator.numScreen.value = str;
	//刷新显示
	operate = 0;
	//重置输入状态
	quit = 0;
	//重置防止重复按键的标志
}

function dzero() {
	var str = String(document.calculator.numScreen.value);
	str = (str != "0") ? ((operate == 0) ? str + "00" : "0") : "0";
	//如果当前值不是"0"，且状态为0，则返回当str+"00"，否则返回"0";
	document.calculator.numScreen.value = str;
	operate = 0;
}

function dot() {
	var str = String(document.calculator.numScreen.value);
	str = (str != "0") ? ((operate == 0) ? str : "0") : "0";
	//如果当前值不是"0"，且状态为0，则返回当前值，否则返回"0";
	for ( i = 0; i <= str.length; i++) {//判断是否已经有一个点号
		if (str.substr(i, 1) == ".")
			return false;
		//如果有则不再插入
	}
	str = str + ".";
	document.calculator.numScreen.value = str;
	operate = 0;
}

function del() {//退格
	var str = String(document.calculator.numScreen.value);
	str = (str != "0") ? str : "";
	str = str.substr(0, str.length - 1);
	str = (str != "") ? str : "0";
	document.calculator.numScreen.value = str;
}

function clearscreen() {//清除数据
	num = 0;
	result = 0;
	numshow = "0";
	document.calculator.numScreen.value = "0";
}

function plus() {//加法
	calculate();
	//调用计算函数
	operate = 1;
	//更改输入状态
	calcul = 1;
	//更改计算状态为加
}

function minus() {//减法
	calculate();
	operate = 1;
	calcul = 2;
}

function times() {//乘法
	calculate();
	operate = 1;
	calcul = 3;
}

function divide() {//除法
	calculate();
	operate = 1;
	calcul = 4;
}

function persent() {//求余
	calculate();
	operate = 1;
	calcul = 5;
}

function equal() {
	calculate();
	//等于
	operate = 1;
	num = 0;
	result = 0;
	numshow = "0";
}

//
function calculate() {
	numshow = Number(document.calculator.numScreen.value);
	if (num != 0 && quit != 1) {//判断前一个运算数是否为零以及防重复按键的状态
		switch(calcul) {//判断要输入状态
		case 1:
			result = num + numshow;
			break;
		//计算"+"
		case 2:
			result = num - numshow;
			break;
		//计算"-"
		case 3:
			result = num * numshow;
			break;
		case 4:
			if (numshow != 0) {
				result = num / numshow;
			} else {
				document.getElementById("note").innerHTML = "被除数不能为零！";
				setTimeout(clearnote, 4000)
			}
			break;
		case 5:
			result = num % numshow;
			break;
		}
		quit = 1;
		//避免重复按键
	} else {
		result = numshow;
	}
	numshow = String(result);
	document.calculator.numScreen.value = numshow;
	num = result;
	//存储当前值
}

function clearnote() {//清空提示
	document.getElementById("note").innerHTML = "";
}
    					

CSS

body {
    font-size: 12px;
    font-family: Arial, Georgia, "Times New Roman", Times, serif;
    color: #555;
    text-align: center;
    background-color: #e2e2e2;
}
h6 {
    margin: 0;
    font-size: 12px;
}
#calculator {
    width: 240px;
    height: auto;
    overflow: hidden;
    margin: 10px auto;
    border: #fff 1px solid;
    padding-bottom: 10px;
    background-color: #f2f2f2;
}
#calculator div { clear: both; }
#calculator ul {
    padding: 0;
    margin: 5px 14px;
    border: #fff 1px solid;
    height: auto;
    overflow: hidden
}
#calculator li {
    list-style: none;
    float: left;
    width: 32px;
    height: 32px;
    margin: 5px;
    display: inline;
    line-height: 32px;
    font-size: 14px;
    background-color: #eaeaea;
}
#calculator li.tool { background-color: #e2e2e2; }
#calculator li:hover {
    background-color: #f9f9f9;
    cursor: pointer;
}
#calculator li:active {
    background-color: #fc0;
    cursor: pointer;
}
#calculator li.tool:active {
    background-color: #d8e8ff;
    cursor: pointer;
}
#calcu-head {
    text-align: left;
    padding: 10px 15px 5px;
}
span.imyeah {
    float: right;
    color: #ccc;
}
span.imyeah a { color: #ccc; }
.screen {
    width: 200px;
    height: 24px;
    line-height: 24px;
    padding: 4px;
    border: #e6e6e6 1px solid;
    border-bottom: #f2f2f2 1px solid;
    border-right: #f2f2f2 1px solid;
    margin: 10px auto;
    direction: ltr;
    text-align: right;
    font-size: 16px;
    color: #999;
}
#calcu-foot {
    text-align: left;
    padding: 10px 15px 5px;
    height: auto;
    overflow: hidden;
}
span#note {
    float: left;
    width: 210px;
    height: auto;
    overflow: hidden;
    color: red;
}
span.welcome {
    clear: both;
    color: #999;
}
span.welcome a {
    float: right;
    color: #999;
}