一个漂亮的计算器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> <style type="text/css"> @charset "utf-8"; /**Public Begin**/ /*@font-face { font-family: 'Transponder'; src: url('fonts/transponder.eot'); src: url('fonts/transponder.ttf') format('truetype'), url('fonts/transponder.woff') format('woff'), url('fonts/transponder.svg') format('svg'); font-weight: normal; font-style: normal;}*/ body{color:#000;background-color:#FFF;margin:0 auto;font: .8em MuseoSans100,"Lucida Grande", Tahoma, Verdana, Arial, "微软雅黑","华文细黑", "黑体", "宋体";} p{margin:0;} /**Public End **/ #screen{width:310px;margin:50px auto;/*height:350px;margin:-175px -150px;position: absolute;top: 50%;left: 50%;*/} #formula{font-family: Menlo,Monaco,Consolas,"Courier New",monospace;text-align: right;white-space: normal;padding: 5px 0;border-bottom: 1px dashed #000;margin: 0 5px;height: 0.8em;} #result{font-size: 2.1em;text-align: right;padding: 0 5px;/*font-family:Transponder;*/} .square,.horect,.verect{font-size: 100%;color: #FFF;border: 0;background-color: #0078e7;text-decoration: none;border-radius: 2px;text-align: center;margin: 6px 3px;*margin: 6px 4px;display:inline-block;*float:left;} .square:hover,.horect:hover,.verect:hover{background-image: linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));cursor:pointer} .square:active,.horect:active,.verect:active{box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset,0 0 6px rgba(0,0,0,.2) inset;} .square{width:50px;height:50px;line-height: 50px;} .horect{width:110px;*width:107px;height:50px;line-height: 50px;} .verect{width:50px;height: 112px;line-height: 112px;} #number{width:180px;/* margin-left: -3px; */} #operator{width:60px;margin-left: -4px;} #other{width:60px;margin-left: -3px;} #number,#operator,#other{display:inline-block;*float:left;vertical-align: top;} #header{margin: 3px;border: 1px solid #129FEA;width: 282px;box-shadow: inset 0 1px 3px #ddd;border-radius: 4px;padding: 3px;} #Lbrackets{*margin-left:6px;} </style> </head> <body> <div id="screen"> <div id="header"> <div id="formula"> <p></p> </div> <div id="result"> <p>0</p> </div> </div> <div id="fbutton"> <div id="control"> <div id="backspace" class="square" title="←">←</div> <div id="cancel" class="square" title="delete">CE</div> <div id="clear" class="square" title="Esc">C</div> <div id="Lbrackets" class="square" title="[">(</div> <div id="Rbrackets" class="square" title="]">)</div> </div> <div id="number"> <div id="num1" class="square">1</div> <div id="num2" class="square">2</div> <div id="num3" class="square">3</div> <div id="num4" class="square">4</div> <div id="num5" class="square">5</div> <div id="num6" class="square">6</div> <div id="num7" class="square">7</div> <div id="num8" class="square">8</div> <div id="num9" class="square">9</div> <div id="num0" class="horect">0</div> <div id="point" class="square">.</div> </div> <div id="operator"> <div id="except" class="square">÷</div> <div id="multiply" class="square">×</div> <div id="minus" class="square">-</div> <div id="plus" class="square">+</div> </div> <div id="other"> <div id="negative" class="square">±</div> <div id="surplus" class="square">%</div> <div id="equal" class="verect">=</div> </div> </div> </div> <script type="text/javascript"> keyCalc = function(key){ var formula = document.getElementById("formula").getElementsByTagName("p")[0]; var result = document.getElementById("result").getElementsByTagName("p")[0]; var lastfla = formula.innerHTML.charAt(formula.innerHTML.length - 1); if(formula.innerHTML.indexOf("=") >= 0) { formula.innerHTML = ""; if(!isNaN(key) || key == ".") result.innerHTML = "0"; } if(key == ")") { var fma = formula.innerHTML; if(fma.split("(").length - fma.split(")").length <= 0) return false; } if(key == "(") { if(formula.innerHTML.length > 0 && formula.innerHTML.charAt(formula.innerHTML.length - 1) == ")" ) formula.innerHTML = ""; } if(key == "CL") { formula.innerHTML = ""; result.innerHTML = "0"; } else if(key == "CE") { result.innerHTML = "0"; } else if(key == "SQRT") { formula.innerHTML = formula.innerHTML + "sqrt(" + result.innerHTML + ")"; result.innerHTML = "0"; } else if(key == "1/x") { if(result.innerHTML != "0") formula.innerHTML = formula.innerHTML + "1/" + result.innerHTML; result.innerHTML = "0"; } else if(key == "←") { if(result.innerHTML.length > 1) result.innerHTML = result.innerHTML.substr(0, result.innerHTML.length - 1); else result.innerHTML = "0"; } else if(key == "=") { if(result.innerHTML.length > 0 && result.innerHTML.charAt(result.innerHTML.length - 1) == "." ) result.innerHTML = result.innerHTML.substr(0, result.innerHTML.length - 1); formula.innerHTML = formula.innerHTML + ((isNaN(lastfla) && lastfla != ")") || formula.innerHTML.length <= 0 ? result.innerHTML : ""); try { result.innerHTML = eval(formula.innerHTML.replace(/sqrt/, "Math.sqrt")); } catch(err) { result.innerHTML = "错误的算式!!!"; } formula.innerHTML = formula.innerHTML + key; } else if(key == "±") { if(result.innerHTML.charAt(0) != "-" ) result.innerHTML = "-" + result.innerHTML; else result.innerHTML = result.innerHTML.substr(1, result.innerHTML.length - 1); } else if(key == ".") { if(result.innerHTML.indexOf(".") < 0) result.innerHTML = result.innerHTML + key; } else if(key == "(") { if(formula.innerHTML == "") result.innerHTML = "0"; formula.innerHTML = formula.innerHTML + key; } else if(!isNaN(key)) { if((key != "0" && parseInt(result.innerHTML) != 0) || (key == 0 && parseInt(result.innerHTML) != 0) || result.innerHTML.indexOf(".") >= 0) { result.innerHTML = result.innerHTML + key; } else { result.innerHTML = key; } } else { if(result.innerHTML.length > 0 && result.innerHTML.charAt(result.innerHTML.length - 1) == "." ) result.innerHTML = result.innerHTML.substr(0, result.innerHTML.length - 1); formula.innerHTML = formula.innerHTML + ((isNaN(lastfla) && lastfla != ")") || formula.innerHTML.length <= 0 ? result.innerHTML : "") + key; result.innerHTML = "0"; } } window.onload = function(){ var body = document.getElementsByTagName("html")[0]; var KeyEvent = function(ev){ ev = ev || window.event; switch(ev.keyCode) { case 96: case 97: case 98: case 99: case 100: case 101: case 102: case 103: case 104: case 105: keyCalc(ev.keyCode - 96); break; // 0-9 case 111: keyCalc("/"); break; case 106: keyCalc("*"); break; case 109: keyCalc("-"); break; case 107: keyCalc("+"); break; case 189: keyCalc("±"); break; case 110: keyCalc("."); break; case 187: if(ev.shiftKey == 1) keyCalc("+"); else keyCalc("="); break; // + or = case 48: if(ev.shiftKey == 1) { keyCalc(")"); break;} // 0 or ) case 49: case 50: case 51: case 52: if(ev.shiftKey == 1) break; // 0-4 case 53: if(ev.shiftKey == 1) { keyCalc("%"); break;} // 5 or % case 54: case 55: if(ev.shiftKey == 1) break; // 6-7 case 56: if(ev.shiftKey == 1) { keyCalc("*"); break;} // 8 or * case 57: if(ev.shiftKey == 1) { keyCalc("("); break;} else keyCalc(ev.keyCode - 48); break; // 9 or ( case 219: keyCalc("("); break; // [ case 221: keyCalc(")"); break; // ] case 13: keyCalc("="); break; // enter case 27: keyCalc("CL"); break; // Esc case 46: keyCalc("CE"); break; // Delete case 8: keyCalc("←"); return false; // backspace default: console.log(ev.keyCode); } }; if(body.addEventListener != null) body.addEventListener('keydown', KeyEvent, false); else body.attachEvent('onkeydown', KeyEvent); var ClickEvent = function(ev){ ev = ev || window.event; var target = ev.target || ev.srcElement; switch(target.id) { case "num0": keyCalc("0"); break; case "num1": keyCalc("1"); break; case "num2": keyCalc("2"); break; case "num3": keyCalc("3"); break; case "num4": keyCalc("4"); break; case "num5": keyCalc("5"); break; case "num6": keyCalc("6"); break; case "num7": keyCalc("7"); break; case "num8": keyCalc("8"); break; case "num9": keyCalc("9"); break; case "point": keyCalc("."); break; case "except": keyCalc("/"); break; case "multiply": keyCalc("*"); break; case "minus": keyCalc("-"); break; case "plus": keyCalc("+"); break; case "negative": keyCalc("±"); break; case "surplus": keyCalc("%"); break; case "equal": keyCalc("="); break; case "backspace": keyCalc("←"); break; case "cancel": keyCalc("CE"); break; case "clear": keyCalc("CL"); break; case "Lbrackets": keyCalc("("); break; case "Rbrackets": keyCalc(")"); break; } }; if(body.addEventListener != null) body.addEventListener('click', ClickEvent, false); else body.attachEvent('onclick', ClickEvent); } </script> </body> </html>

提示：你可以先修改部分代码再运行。

下面是vue版本

<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <title>vue.js - Calculator</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script> <style type="text/css"> body { height: 100vh; width: 100vw; background: #1939f6; overflow: hidden; } * { box-sizing: border-box; } #app { width: 100%; height: 100%; display: flex; font-family: "Roboto", sans-serif; font-weight: 300; font-size: 24px; } #app #calculator { opacity: 0; -webkit-animation: 1s bounceIn; animation: 1s bounceIn; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; margin: 10px; border-radius: 8px; color: #ffffff; box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.5); margin: auto; height: 540px; width: 300px; background: #191b1d; } #app #calculator .screen-container { width: 100%; height: 38%; display: flex; flex-direction: column; position: relative; justify-content: center; text-align: right; } #app #calculator .screen-container .calculation, #app #calculator .screen-container .result { width: 100%; height: 50%; padding-right: 15px; } #app #calculator .screen-container .result { display: flex; align-items: flex-end; color: #1939f6; justify-content: flex-end; } #app #calculator .screen-container .result .number { font-size: 50px; font-weight: 800; } #app #calculator .btn-container { width: 100%; height: 62%; display: flex; flex-direction: column; position: relative; } #app #calculator .btn-container .oper-container { z-index: 10; opacity: 0; -webkit-animation: 1s bounceIn; animation: 1s bounceIn; -webkit-animation-delay: .5s; animation-delay: .5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; position: absolute; width: 50px; left: -25px; box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.5); top: -100px; } #app #calculator .btn-container .oper-container .btn { position: static; width: 50px; height: 50px; background: #1939f6; color: #1939f6; background: #ffffff; display: flex; cursor: pointer; } #app #calculator .btn-container .oper-container .btn .number { margin: auto; } #app #calculator .btn-container .oper-container .btn#clear.animate { -webkit-animation: fade 0.12s ease-in-out; animation: fade 0.12s ease-in-out; animation-direction: reverse; } #app #calculator .btn-container .oper-container .btn#clear { cursor: pointer; height: 50px; width: 50px; display: flex; background: #1e2022; border-radius: 8px 0px 0 0; font-size: 16px; box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.5); } #app #calculator .btn-container .oper-container .btn#clear .number { margin: auto; color: #ffffff; } #app #calculator .btn-container .row { position: relative; display: flex; flex-direction: row; width: 100%; height: 25%; } #app #calculator .btn-container .row .btn { cursor: pointer; width: 100%; height: 100%; text-align: center; display: flex; border: 0.5px solid #191b1d; background: #1e2022; } #app #calculator .btn-container .row .btn .number { opacity: 0; -webkit-animation: 1s fadeIn; animation: 1s fadeIn; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; margin: auto; } #app #calculator .btn-container .row .btn:nth-child(1) { border-left: none; } #app #calculator .btn-container .row .btn:nth-child(3) { border-right: none; } #app #calculator .btn-container .row .btn.animate { -webkit-animation: fade 0.12s ease-in-out; animation: fade 0.12s ease-in-out; } #app #calculator .btn-container .row .btn#result { position: absolute; right: -12px; bottom: -12px; width: calc(33% * 1.25); height: calc(100% * 1.25); background: #1939f6; border-bottom-right-radius: 8px; border: 0.5px rgba(0, 0, 0, 0.0001); } #app #calculator .btn-container .row .btn#result:not(.resetappearanim) { opacity: 0; -webkit-animation: 1s bounceIn; animation: 1s bounceIn; -webkit-animation-delay: .5s; animation-delay: .5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } #app #calculator .btn-container .row .btn#result.animate { -webkit-animation: fade 0.12s ease-in-out; animation: fade 0.12s ease-in-out; animation-direction: reverse; } #app #calculator .btn-container .row .btn#dot { border-bottom-left-radius: 8px; } #app #calculator .btn-container .row:last-child .btn { border-bottom: none; } #app #calculator .btn-container .btn.operations.animate { -webkit-animation: fadeThird 0.12s ease-in-out; animation: fadeThird 0.12s ease-in-out; animation-direction: reverse; } #app #calculator .btn-container .btn.operations.divide { left: calc(33% - 25px); top: calc(25% - 25px); } #app #calculator .btn-container .btn.operations.multiplication { left: calc(66% - 25px); top: calc(25% - 25px); } #app #calculator .btn-container .btn.operations.plus { left: calc(66% - 25px); top: calc(50% - 25px); } #app #calculator .btn-container .btn.operations.less { left: calc(33% - 25px); top: calc(50% - 25px); border-radius: 0 0 8px 0; } @-webkit-keyframes fade { from { background: #1e2022; } to { background: #1939f6; } } @keyframes fade { from { background: #1e2022; } to { background: #1939f6; } } @-webkit-keyframes fadeThird { from { background: #ffffff; } to { background: #1e2022; } } @keyframes fadeThird { from { background: #ffffff; } to { background: #1e2022; } } @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-webkit-keyframes bounce { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounce { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .slide-fade-enter-active { transition: all 0.3s ease; } .slide-fade-enter, .slide-fade-leave-to { -webkit-transform: translateX(10px); transform: translateX(10px); opacity: 0; } *:focus { outline: none; } @media screen and (max-width: 500px) { #app { -webkit-transform: scale(0.8) translateY(-50px); transform: scale(0.8) translateY(-50px); } } *::-moz-selection { background: #1939f6; color: #ffffff; } *::selection { background: #1939f6; color: #ffffff; } [v-cloak] { display: none; } </style> </head> <body> <div id="app" v-cloak> <div id="calculator"> <div class="screen-container"> <div class="result"> <transition name="slide-fade"> <div class="number" :style="{fontSize : fontSize + 'px'}" v-if="tempResult !== ''" v-cloak>{{ tempResult | number | hugeNumber }}</div> </transition> </div> <div class="calculation"> <div class="number" v-cloak>{{ calculation | number | calculation}}</div> </div> </div> <div class="btn-container"> <div class="oper-container"> <div class="btn" id="clear" @click="clear()"> <div class="number">AC</div> </div> <div class="btn operations divide" @click="append('/')"> <div class="number">÷</div> </div> <div class="btn operations multiplication" @click="append('*')"> <div class="number">×</div> </div> <div class="btn operations plus" @click="append('+')"> <div class="number">+</div> </div> <div class="btn operations less" @click="append('-')"> <div class="number">-</div> </div> </div> <div class="row"> <div class="btn" @click="append('7')"> <div class="number">7</div> </div> <div class="btn" @click="append('8')"> <div class="number">8</div> </div> <div class="btn" @click="append('9')"> <div class="number">9</div> </div>  </div> <div class="row"> <div class="btn" @click="append('4')"> <div class="number">4</div> </div> <div class="btn" @click="append('5')"> <div class="number">5</div> </div> <div class="btn" @click="append('6')"> <div class="number">6</div> </div>  </div> <div class="row"> <div class="btn" @click="append('1')"> <div class="number">1</div> </div> <div class="btn" @click="append('2')"> <div class="number">2</div> </div> <div class="btn" @click="append('3')"> <div class="number">3</div> </div>  </div> <div class="row"> <div class="btn" id="dot" @click="append('.')"> <div class="number">.</div> </div> <div class="btn" @click="append('0')"> <div class="number">0</div> </div> <div class="btn"> <div class="number"></div> </div> <div class="btn" id="result" @click="getResult()"> <div class="number">=</div> </div>  </div> </div> </div> </div> </body>  <script type="text/javascript"> String.prototype.replaceAll = function(search, replacement) { var target = this; return target.split(search).join(replacement); }; new Vue({ el: '#app', data: { // calculation:'15*98', // tempResult:'1470', calculation:'', tempResult:'', }, mounted() { let btns = document.querySelectorAll('.btn') for (btn of btns) { btn.addEventListener('click',function() { this.classList.add('animate') this.classList.add('resetappearanim') }) btn.addEventListener('animationend',function() { this.classList.remove('animate') }) } }, methods: { append(value) { this.calculation += value.toString() }, clear() { this.calculation = '' this.tempResult = '' }, getResult() { if(this.tempResult != ''){ this.calculation = this.tempResult //this.tempResult = '' } }, backspace() { this.calculation = this.calculation.slice(0,-1) } }, watch: { calculation() { if(this.calculation !== '' && !isNaN(this.calculation.slice(-1)) && this.calculation != this.result ){ this.tempResult = this.result.toString() } } }, computed: { result() { if(!isNaN(this.calculation.slice(-1))) return eval(this.calculation) else return eval(this.calculation.slice(0, -1)) }, fontSize() { return this.fontSize = 50-(this.tempResult.length*1.25) } }, filters: { hugeNumber: (value) => { let parts = value.toString().split("."); parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, " "); return parts.join("."); }, number: (value) => { return value.replaceAll('*','x') }, calculation: (value) => { return value.replaceAll('x',' x ').replaceAll('/',' / ').replaceAll('+',' + ').replaceAll('-',' - ') } } }) </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 一个漂亮的计算器