是不是看起来很漂亮的呢???
功能详解:
屏幕显示输入的数字和符号实现加减乘除运算回退和清零功能小数的运算结果的输出相信小伙伴们都已经迫不及待的想要知道源码了。
HTML页面代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/com.css" type="text/css" /> </head> <body> <table> <tr> <td colspan="4"><input class="screen" type="text" disabled /></td> </tr> <tr> <td><input class="but_ac but" type="button" value="AC" style="color: orange"></td> <td><input class="but_ac but" type="button" value="<—" style="color: orange"></td> <td><input class="but" type="button" value="+/-"></td> <td><input class="but" type="button" value="/"></td> </tr> <tr> <td><input class="but" type="button" value="7"></td> <td><input class="but" type="button" value="8"></td> <td><input class="but" type="button" value="9"></td> <td><input class="but" type="button" value="*"></td> </tr> <tr> <td><input class="but" type="button" value="4"></td> <td><input class="but" type="button" value="5"></td> <td><input class="but" type="button" value="6"></td> <td><input class="but" type="button" value="-"></td> </tr> <tr> <td><input class="but" type="button" value="1"></td> <td><input class="but" type="button" value="2"></td> <td><input class="but" type="button" value="3"></td> <td><input class="but" type="button" value="+"></td> </tr> <tr> <td colspan="2"><input class="but" type="button" value="0" style="width: 180px"></td> <td><input class="but" type="button" value="."></td> <td><input class="but" type="button" value="=" style="background-color:orange ;color:white"></td> </tr> </table> <script type="text/javascript" src="js/com.js"></script> </body> </html>com.js代码
window.onload = function() { var num = document.getElementsByClassName("but"); var scr = document.getElementsByClassName("screen")[0]; for (var i = 0; i < num.length; i++) { num[i].onclick = function() { if (this.value == "AC") { scr.value = ""; } else if (this.value == "+/-") { if (scr.value == "") { scr.value = ""; } else if (isNaN(scr.value.charAt(scr.value.length - 1)) == false && isNaN(scr.value.charAt(scr.value.length - 2)) == true) { scr.value = scr.value.substr(0, scr.value.length - 1) + "(" + "-" + scr.value.charAt(scr.value.length - 1) + ")"; } } else if (this.value == "<—" && this.value != "") { scr.value = scr.value.substr(0, scr.value.length - 1); } else if (scr.value == "" && this.value == ".") { scr.value = "0."; } else if (this.value == "=") { scr.value = eval(scr.value); } else if (scr.value == "" && (this.value == "+" || this.value == "-" || this.value == "*" || this.value == "/")) { scr.value == ""; } else { scr.value += this.value; } } } }上述代码能完整的实现此多功能计算器,快去完成你的个性计算器吧。
获取更多关注我呦!!!
