vue实现一款黑色计算器效果代码
代码语言:html
所属分类:其他
代码描述:vue实现一款黑色计算器效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> body { background: linear-gradient(to right, #85D8CE, #085078); } #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; display: flex; flex-wrap: wrap; justify-content: center; align-item: center; } .calculator { width: 440px; padding: 20px; border-radius: 5px; margin: 20px auto; font-size: 16px; background-color: #333333; } .input { width: 420px; height: 50px; border-radius: 0px; border: 1px solid black; background-color: #333333; color: #d9d9d9; padding: 0 5px 0 5px; margin: 0 0px 10px 0px; font-size: 30px; } .input:focus, .input:active { border-color: #03a9f4; box-shadow: 0 0 4px #03A9F4; outline: none 0; } .button { margin: 3px; width: 63px; border: 1px solid #0d0d0d; height: 30px; border-radius: 4px; color: #d9d9d9; background-color: #1a1a1a; cursor: pointer; outline: none; } .mode { display: flex; flex-wrap: wrap; justify-content: space-evenly; } .equal-sign { background-color: green; width: 133px; } .toggle-button { border: none; background-color: #333333; cursor: pointer; outline: none; font-size: 1rem; color: #fff; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.35); } p { margin-top: 0; } button::-moz-focus-inner { border-color: transparent; } </style> </head> <body> <div id="app"> <div class="calculator"> <button @click="changeModeEvent" class="toggle-button"> <p v-if="changeMode">Show Advanced Mode ⚈</p> <p v-else>Show Basic Mode ⚆</p> </button> <div class="results"> <input class="input" v-model="current" /> </div> <div class="mode" v-if="changeMode"> <button class="button" @click="press">7</button> <button class="button" @click="press">8</button> <button class="button" @click="press">9</button> <button class="button" @click="press">*</button> <button class="button" @click="press"><=</button> <button class="button" @click="press">C</button> <button class="button" @click="press">4</button> <button class="button" @click="press($event)">5</button> <button class="button" @click="press">6</button> <button class="button" @click="press">/</button> <button class="button" @click="press">(</button> <button class="button" @click="press">)</button> <button class="button" @click="press">1</button> <button class="button" @click="press">2</button> <button class="button" @click="press">3</button> <button class="button" @click="press">-</button> <button class="button" @click="press">x ²</button> <button class="button" @click="press">±</button> <button class="button" @click="press">0</button> <button class="button" @click="press">.</button> <button class="button" @click="press">%</button> <button class="button" @click="press">+</button> <button class="button equal-sign" @click="press">=</button> </div> <div class="mode" v-else> <button class="button" @click="press">sin</button> <button class="button" @click="press">cos</button> <button class="button" @click="press">tan</button> <button class="button" @click="press">x^</button> <button class="button" @click="press"><=</button> <button class="button" @click="press">C</button> <button class="button" @click="press">log</button> <button class="button" @click="press">ln</button> <button class="button" @click="press">e</button> <button class="button" @click="press">∘</button> <button class="button" @click="press">rad</button> <button class="button" @click="press">√</button> <button class="button" @click="press">7</button> <button class="button" @click="press">8 </button> <button class="button" @click="press">9</button> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0