js 實現的計算器
阿新 • • 發佈:2019-01-07
一、HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="hw5"> <meta name="author" content="le"> <title>221600219_hw5</title> <link rel="stylesheet" type="text/css" href="./test.css" charset="utf-8"> <script src="https://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="./test.js" charset="utf-8"></script> </head> <body> <hr /> <h1>(1)一個JavaScript 計算器</h1> <hr /> <form id="calculator" action=""> <p> <input type="text" name="box" value="" id="result" disabled="disabled" /> </p> <p id="bce"> <input type="button" value="del" id="backspace" /> <input type="button" value="CE" id="CE" /> <input type="button" value="C" id="C" /> <input type="button" value="(" id="le" /> <input type="button" value=")" id="ri" /> </p> <p id="nums"> <input type="button" value="7" id="num7" /> <input type="button" value="8" id="num8" /> <input type="button" value="9" id="num9" /> <br/> <input type="button" value="4" id="num4" /> <input type="button" value="5" id="num5" /> <input type="button" value="6" id="num6" /> <br /> <input type="button" value="1" id="num1" /> <input type="button" value="2" id="num2" /> <input type="button" value="3" id="num3" /> <br /> <input type="button" value="0" id="num0" /> <input type="button" value="%" id="mod" /> <input type="button" value="." id="point" /> </p> <p id="operation"> <input type="button" value="+" id="add" /> <input type="button" value="-" id="sub" /> <input type="button" value="*" id="mul" /> <input type="button" value="/" id="div" /> </p> <p id="get-result"> <input type="button" value=" sin " id="sin" /> <input type="button" value=" cos " id="cos" /> <input type="button" value=" tan " id="tan" /> <input type="button" value=" ln " id="ln" /> <br /> <input type="button" value=" 2²" id="square" /> <input type="button" value=" √ " id="sqrt" /> <input type="button" value="1/x" id="recip" /> <input type="button" value=" = " id="calculate" /> </p> </form> <hr /> </body> </html>
二、CSS
body{ width: 1000px; margin: 0 auto; padding: 100px 0; } /* 計算器: */ #calculator{ width: 620px; margin: 0 auto; } #calculator input{ font-size: 20px; padding: 25px; } #result{ width: 560px; } #bce input{ width: 118px; } #nums input{ width: 200px; } #operation input{ width: 150px; } #get-result input{ width: 150px; }
三、js
$(document).ready(function(){ load1() }) var result = "" var str = "" function load1(){ //實現計算器事件監聽 bceIt() addIt() showResult() } function bceIt(){ $("#backspace").click(function(){ str = $("#result").val().substr(0, str.length - 1) $("#result").val(str) }) $("#CE").click(function(){ $("#result").val("") }) $("#C").click(function(){ $("#result").val("") }) } function addIt(){ var jqs = ["#le", "#ri", "#nums input", "#operation input"] for (i in jqs){ $(jqs[i]).click(function(){ str = $("#result").val() + $(this).val() $("#result").val(str) }) } } function showResult(){ $("#get-result input").click(function(){ var type = $(this).attr("id") try{ result = eval(str) }catch(e){ alert("請按正確格式輸入運算!") } switch(type){ case "sin": result = Math.sin(result) break case "cos": result = Math.cos(result) break case "tan": result = Math.tan(result) break case "ln": result = Math.log(result) break case "square": result = Math.pow(result, 2) break case "sqrt": result = Math.sqrt(result) break case "recip": result = 1.0 / result break } str = result $("#result").val(str) }) }