jquery+css实现逆波兰表达式 (RPN) 计算器效果代码
代码语言:html
所属分类:其他
代码描述:jquery+css实现逆波兰表达式 (RPN) 计算器效果代码
代码标签: jquery css 逆波兰 表达式 RPN 计算器
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet"> <style> body { background: gray; font-family: Orbitron; } div { padding: 0; margin: 0; } .center-horizontal { float: none; margin: 0 auto; } .center-vertical { min-height: 100%; display: flex; align-items: center; } .chassis { height: 480px; width: 384px; border: 2px solid black; padding: 0; } .title { padding: 0; margin: 1% 10%; } .display { height: 22%; width: 90%; border: 2px solid black; margin: 0px auto 20px auto; empty-cells: show; border-collapse: separate; border-spacing: 3px; } .display-line{ font-size: 200%; padding: 0; margin: 0; vertical-align: middle; } td { width: 20%; height: 20%; padding: 0; } .buttonArea { padding: 0; margin: 0 3.5%; width: 93.6%; height: 66%; empty-cells: show; border-collapse: separate; border-spacing: 3px; } .button { width: 100%; height: 100%; margin: 0; padding: 0; -webkit-appearance: none; -webkit-border-radius: 0; } .button > p { padding: 0 0; margin: 0; font-size: 100%; vertical-align: middle; font-family: Orbitron; } /* .size11 { width: 100%; height: 100%; padding: 0; margin: 0; } .size12 { width: 100%; height: 100%; margin: 0; } */ .superscript { position: relative; top: -9px; } .subscript { position: relative; top: 9px; } .hamburger { width: 24px; margin: 3px auto; border: 1px solid black; } #plusmn > p { font-size: 200%; position: relative; top: -2px; } .blank { font-size: 0; } @media screen and (max-height: 480px) { .body { font-size: 0.5em; } .chassis { height: 100vh; width: 80vh; border: 2px solid black; padding: 0; } } </style> </head> <body> <div class="chassis center-horizontal"> <p class="title">RPN CALCULATOR</p> <table class="display"> <tr> <td> <p class="display-line">Y: <span id="topOfStack">0</span></p> </td> </tr> <tr> <td> <p class="display-line">X: <span id="tempNumber">0</span></p> </td> </tr> </table> <table class="buttonArea"> <tr id="row1"> <td> <button id="bksp" class="button size11"><p><---</p></button> </td> <td> <button id="ac" class="button size11"><p>AC</p></button> </td> <td> <button id="ce" class="button size11"><p>CE</p></button> </td> <td> <button id="divide" class="button size11"><p>/</p></button> </td> <td> <button id="multiply" class="button size11"><p>X</p></button> </td> </tr> <tr id="row2"> <td> <button id="sqrt" class="button size11"><p>√x</p></button> </td> <td> <button id="seven" class="button size11"><p>7</p></button> </td> <td> <button id="eight" class="button size11"><p>8</p></button> </td> <td> <button id="nine" class="button size11"><p>9</p></button> </td> <td> <button id="subtract" class="button size11"><p>−</p></button> </td> </tr> <tr id="row3"> <td> <button id="power" class="button size11"><p>y<span class="superscript">x</span></p></button> </td> <td> <button id="four" class="button size11"><p>4</p></button> </td> <td> <button id="five" class="button size11"><p>5</p></button> </td> <td> <button id="six" class="button size11"><p>6</p></button> </td> <td> <button id="add" class="button size11"><p>+</p></button> </td> </tr> <tr id="row4"> <td> <button id="invert" class="button size11"><p><span class="superscript">1 </span>/<span class="subscript">x</span></p></button> </td> <td> <button id="one" class="button size11"><p>1</p></button> </td> <td> <button id="two" class="button size11"><p>2</p></button> </td> <td> <button id="three" class="button size11"><p>3</p></button> </td> <td rowspan="2"> <button id="enter" class="button size12"><p>E</p><p>N</p><p>T</p><p>E</p><p>R</p></button> </td> </tr> <tr id="row5"> <td> <button id="menu" class="button size11"><p>N/A</p></button> </td> <td> <button id="plusmn" class="button size11"><p>±</p></button> </td> <td> <button id="zero" class="b.........完整代码请登录后点击上方下载按钮下载查看
网友评论0