标签：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> <style type="text/css"> *{ margin: 0; padding: 0; } #wrap{ height: 400px; width: 400px; border: 1px solid #ccc; margin: 100px auto; position: relative; background-color: #ccc; border-radius: 5%; border: 2px solid black; } input{ background-color: rgb(119, 103, 103); font-size: 20px; color: white; } #txt{ width: 300px; height: 50px; position: absolute; left: 12.5%; top: 2.5%; text-align: right; } #content{ width: 390px; height: 320px; position: absolute; left: 1.25%; bottom: 2.5%; background-color: white; border-radius: 2%; } #content>input{ width: 380px; height: 40px; margin-top: 5px; margin-left: 5px; border-radius: 5%; } .con_left{ width: 290px; height: 260px; position: absolute; bottom: 5px; left: 5px; overflow: hidden; } .con_left>input{ height: 60px; margin-left: 0px; margin-top: 5px; margin-right: 0px; float：left; border-radius: 15%; } #con_right{ width: 80px; height: 260px; position: absolute; bottom: 5px; right: 5px; } #con_right>input{ width: 60px; height: 250px; margin-top: 5px; margin-left: 10px; border-radius: 10%; } </style> <script type="text/javascript"> window.onload = function(){ var aNumber = document.getElementsByName("number"); var oTxt = document.getElementById("txt"); var aSym = document.getElementsByName("symbol"); var oEqual = document.getElementById("equal"); var oZero = document.getElementById("zero"); var oClear = document.getElementById("clear"); var str = ""; //用于存储第一个数值 var str2 = ""; //用于存储第二个数值 var operator = ""; //用于存储运算符 var bol = true; //用于判断 //part1.清空 oClear.onclick = function(){ oTxt.value = ""; str = ""; str2 = ""; operator = ""; bol = true; } //part2.输入数值 for(var i=0; i < aNumber.length; i++){ aNumber[i].onclick = function(){ if(bol){ oTxt.value = oTxt.value+this.value;//显示 str = str + this.value; } else{ oTxt.value = oTxt.value+this.value;//显示 str2 = str2 + this.value; } } } //part3.输入运算符号 for(var i =0; i < aSym.length; i++){ aSym[i].onclick = function(){ oTxt.value = oTxt.value+this.value; operator = this.value; bol = false; } } //part4.运算 oEqual.onclick = function(){ switch(operator){ case "+": oTxt.value = parseInt(str) + parseInt(str2); break; case "-": oTxt.value = parseInt(str) - parseInt(str2); break; case "*": oTxt.value = parseInt(str) * parseInt(str2); break; case "/": oTxt.value = parseInt(str) / parseInt(str2); break; } bol = true; str2 = ""; str = oTxt.value; } //part5.关于0的判断 oZero.onclick = function(){ if(str != ""&& bol == true){ str = str + "0"; oTxt.value = oTxt.value + "0"; } else if(str2 != "" && bol == false){ str2 = str2 + "0"; oTxt.value = oTxt.value + "0"; } } } </script> </head> <body> <div id="wrap"> <input type="text" value="" id="txt" style="background-color:white; color:black;"> <div id="content"> <input type="button" value="c" style="" id="clear"> <div class="con_left" id="sent"> <input type="button" value="7" style="width:65px;" name="number"> <input type="button" value="8" style="width:65px;" name="number"> <input type="button" value="9" style="width:65px;" name="number"> <input type="button" value="/" style="width:65px;" name="symbol"> <input type="button" value="4" style="width:65px;" name="number"> <input type="button" value="5" style="width:65px;" name="number"> <input type="button" value="6" style="width:65px;" name="number"> <input type="button" value="*" style="width:65px;" name="symbol"> <input type="button" value="1" style="width:65px;" name="number"> <input type="button" value="2" style="width:65px;" name="number"> <input type="button" value="3" style="width:65px;" name="number"> <input type="button" value="-" style="width:65px;" name="symbol"> <input type="button" value="0" style="width:210px;" name="number" id="zero"> <input type="button" value="+" style="width:65px;" name="symbol"> </div> <div id="con_right"> <input type="button" value="=" id="equal"> </div> </div> </div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/pan-hello/p/4562954.html
