最容易理解的的JS代码实现计算器
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>Insert title here</title> 6 <style type="text/css"> 7 body{ 8 background-image: url("images/025.jpg"); 9 } 10 11 #cal{ 12 width: 800px; 13 height: 400px; 14 15 16 } 17 18 .resultText { 19 20 width:800px; 21 height: 200px; 22 font-size: 60px; 23 background-color: balck; 24 font-style: italic; 25 background-image: url("images/bg_01.jpg"); 26 } 27 28 #btnClear{ 29 width:208px; 30 height: 206px; 31 background-image: url("images/bg_Clear.jpg"); 32 font-size: 60px; 33 } 34 .btn{ 35 width: 206px; 36 height:70px; 37 font-size: 30px; 38 background-image: url("images/bg_02.jpg"); 39 } 40 .btn:HOVER { 41 42 } 43 44 </style> 45 <script type="text/javascript" src="js/cal.js"></script> 46 </head> 47 <body> 48 <br> 49 <br> 50 <center><font color="red">所谓2015.9.10创作</font></center> 51 <hr> 52 <br> 53 <br> 54 <center> 55 <table id="cal"> 56 <tr> 57 <td colspan="3"> <input type="text" id="numText" class="resultText" /></td> 58 <td><input type="button" value="Clear" id="btnClear" onclick="btnClearAction()"/></td> 59 </tr> 60 61 <tr> 62 <td><input type="button" value="+" class ="btn" id="btnAdd" onclick="btnAddAction()"/></td> 63 <td><input type="button" value="-" class ="btn" id="btnSub" onclick="btnSubAction()"/></td> 64 <td><input type="button" value="*" class ="btn" id="btnMul" onclick="btnMulAction()"/></td> 65 <td><input type="button" value="/" class ="btn" id="btnDiv" onclick="btnDivAction()"/></td> 66 67 </tr> 68 <tr> 69 <td><input type="button" value="9" class ="btn" id="btn9" onclick="btn9Action()"/></td> 70 <td><input type="button" value="8" class ="btn" id="btn8" onclick="btn8Action()"/></td> 71 <td><input type="button" value="7" class ="btn" id="btn7" onclick="btn6Action()"/></td> 72 <td><input type="button" value="6" class ="btn" id="btn6" onclick="btn7Action()"/></td> 73 74 </tr> 75 <tr> 76 77 <td><input type="button" value="5" class ="btn" id="btn5" onclick="btn5Action()"/></td> 78 <td><input type="button" value="4" class ="btn" id="btn4" onclick="btn4Action()"/></td> 79 <td><input type="button" value="3" class ="btn" id="btn3" onclick="btn3Action()"/></td> 80 <td><input type="button" value="2" class ="btn" id="btn2" onclick="btn2Action()"/></td> 81 82 </tr> 83 <tr> 84 <td><input type="button" value="1" class ="btn" id="btn1" onclick="btn1Action()"/></td> 85 <td><input type="button" value="0" class ="btn" id="btn0" onclick="btn0Action()"/></td> 86 <td><input type="button" value="." class ="btn" id="btnPoint" onclick="btnPointAction()"/></td> 87 <td><input type="button" value="=" class ="btn" id="btnResult" onclick="btnResultAction()"/></td> 88 89 </tr> 90 </table> 91 92 </center> 93 <hr> 94 </body> 95 </body> 96 </html>
var b,num1,num2;
var c;
function btnAddAction() {
num1 = document.getElementById("numText").value;
document.getElementById("numText").value="";
c = document.getElementById("btnAdd").value;
}
function btnSubAction() {
num1 = document.getElementById("numText").value;
document.getElementById("numText").value="";
c = document.getElementById("btnSub").value;
}
function btnMulAction() {
num1 = document.getElementById("numText").value;
document.getElementById("numText").value="";
c = document.getElementById("btnMul").value;
}
function btnDivAction() {
num1 = document.getElementById("numText").value;
document.getElementById("numText").value="";
c = document.getElementById("btnDiv").value;
}
function btnPointAction() {
var resultText = document.getElementById("numText").value;
document.getElementById("numText").value=resultText+".";
}
function btnResultAction() {
num2 = document.getElementById("numText").value;
document.getElementById("numText").value="";
switch (c) {
case "+":
add();
break;
case "-":
sub();
break;
case "*":
mul();
break;
case "/":
div();
break;
default:
break;
}
}
function btnClearAction() {
document.getElementById("numText").value="";
}
function btn0Action() {
var resultText = document.getElementById("numText").value;
document.getElementById("numText").value=resultText+"0";
}
function btn1Action() {
var resultText = document.getElementById("numText").value;
document.getElementById("numText").value=resultText+"1";
}
function btn2Action() {
var resultText = document.getElementById("numText").value;
document.getElementById("numText").value=resultText+"2";
}
function btn3Action() {
var resultText = document.getElementById("numText").value;
document.getElementById("numText").value=resultText+"3";
}
function btn4Action() {
var resultText = document.getElementById("numText").value;
document.getElementById("numText").value=resultText+"4";
}
function btn5Action() {
var resultText = document.getElementById("numText").value;
document.getElementById("numText").value=resultText+"5";
}
function btn6Action() {
var resultText = document.getElementById("numText").value;
document.getElementById("numText").value=resultText+"7";
}
function btn7Action() {
var resultText = document.getElementById("numText").value;
document.getElementById("numText").value=resultText+"6";
}
function btn8Action() {
var resultText = document.getElementById("numText").value;
document.getElementById("numText").value=resultText+"8";
}
function btn9Action() {
var resultText = document.getElementById("numText").value;
document.getElementById("numText").value=resultText+"9";
}
function add(){
var result = parseFloat(num1)+parseFloat(num2);
document.getElementById("numText").value=result;
}
function sub(){
var result = parseFloat(num1)-parseFloat(num2);
document.getElementById("numText").value=result;
}
function mul(){
var result = parseFloat(num1)*parseFloat(num2);
document.getElementById("numText").value=result;
}
function div(){
var result = parseFloat(num1)/parseFloat(num2);
document.getElementById("numText").value=result;
}
下面简单说说实现吧:
只要有思路用什么语言都可以实现:
思路: 1: 当用户点击0-9 这9个按钮的时候,需要实现数字的追加.这个不是重点就不解释了;
2: 当用点击加减乘除的时候, 可以在这个时候清空文本框,但是在清空文本框之前需要;得到输入的第一个参数;
3: 当用户点击 = 号按钮的时候,可以得到第二个参数值;然后用switch 语句判断用户点击那个按钮,就执行相应的操作;
完喽....有问题可以找我喽...
