vue+vuex实现一个计算器效果代码
代码语言:html
所属分类:其他
代码描述:vue+vuex实现一个计算器效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vuex.min.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/ionicons.css">
<style>
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,400italic,600,700,900,200");
html {
box-sizing:border-box;
color:#222;
font-size:1rem;
font-family:Source Sans Pro;
line-height:1.5;
text-rendering:optimizeLegibility
}
*,*:before,*:after {
box-sizing:inherit
}
body {
background-size:cover;
background-repeat:no-repeat;
background-color:#B6B2AB;
background-image:linear-gradient(135deg,#B6B2AB 0,#B3AFA7 25%,#B8B5AF 25%,#78736B 50%,#6F6862 50%,#58504B 75%,#5F574E 75%,#625A51 100%);
min-height:100vh
}
.App {
opacity:0;
transition:opacity .3s
}
.Calculator {
box-shadow:12px 18px 45px 0 rgba(0,0,0,0.25);
cursor:default;
margin:0 auto;
transform:translate(-50%,-50%);
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
position:absolute;
top:50%;
left:50%;
width:260px
}
.Calculator-header {
background:white;
overflow:hidden;
padding:20px 20px;
position:relative;
text-align:right
}
.Calculator-expressions {
color:rgba(158,158,158,0.76);
display:block;
float:right;
font-size:15px;
line-height:22px;
min-height:22px;
position:relative;
white-space:nowrap;
width:100%;
word-wrap:normal
}
.Calculator-expressionsList {
display:block;
float:right
}
.Calculator__expressionsOverflow {
color:#333;
box-shadow:5px 0 20px 4px rgba(0,0,0,0.3);
font-weight:700;
opacity:0;
padding-right:0;
text-align:center;
transition:opacity .5s;
transform:translate(0,-50%);
position:absolute;
top:50%;
left:-24px;
height:17px;
width:2px
}
.Calculator__expressionsOverflow:before {
content:""
}
.Calculator__expressionsOverflow.is-showing {
opacity:1
}
.Calculator-operands {
color:#151515;
font-size:60px;
font-weight:200;
line-height:1.1;
clear:both
}
.Calculator-currentOperand {
display:block;
overflow:visible;
min-height:60px;
line-height:60px;
float:right;
transition-duration:.2s;
transition-property:font-size
}
.Calculator-currentOperand.has-error {
color:#ef5334
}
.Calculator-body {
background:white
}
.Calculator-buttonsContainer {
display:flex;
flex-wrap:wrap;
overflow:visible;
position:relative
}
.Calculator-buttonsContainer:before {
background-color:rgba(90,95,114,0.76);
background-image:linear-gradient(to bottom,rgba(90,95,114,0.76),rgba(29,32,37,0.8));
box-shadow:17px 27px 72px 1px rgba(0,0,0,0.3);
filter:drop-shadow(0px 0 7px rgba(0,0,0,0.2));
content:"";
position:absolute;
top:0;
right:-18px;
bottom:0;
left:-18px
}
.Calculator-button {
color:rgba(255,255,255,0.8);
cursor:pointer;
font-size:24px;
font-weight:300;
flex:25%;
line-height:70px;
text-align:center;
position:relative;
z-index:1
}
.Calculator-button {
cursor:pointer;
transition:box-shadow .2s,background-color .15s;
text-shadow:1px 1px 2px rgba(0,0,0,0.15)
}
.Calculator-button:hover {
background:rgba(0,0,0,0.08)
}
.Calculator-button:active,.Calculator-button.is-active {
box-shadow:inset 0 3px 15px 0 rgba(0,0,0,0.3)
}
.Calculator-button.has-children:hover,.Calculator-button.has-children:active {
background:initial;
box-shadow:none;
cursor:default
}
.Calculator-button>span {
display:block
}
.Calculator-button--negation,.Calculator-button--modulo {
font-size:18px
}
.Calculator-button--square {
font-size:16px
}
.Calculator-button--division {
font-size:20px
}
.Calculator-button--multiplication {
font-size:30px
}
.Calculator-button--addition {
font-size:26px
}
.Calculator-button--subtraction {
font-size:25px
}
.Calculator-button--paren {
display:flex;
font-size:18px
}
.Calculator-button--paren:hover,.Calculator-button--paren:active {
background:initial!important;
box-shadow:none!important;
cursor:default!important
}
.Calculator-button--paren>span {
flex:50%
}
.Calculator-button--paren>span {
cursor:pointer;
transition:box-shadow .2s,background-color .15s;
text-shadow:1px 1px 2px rgba(0,0,0,0.15)
}
.Calculator-button--paren>span:hover {
background:rgba(0,0,0,0.08)
}
.Calculator-button--paren>span:active,.Calculator-button--paren>span.is-active {
box-shadow:inset 0 3px 15px 0 rgba(0,0,0,0.3)
}
.Calculator-button--paren>span.has-children:hover,.Calculator-button--paren>span.has-children:active {
background:initial;
box-shadow:none;
cursor:default
}
.Calculator-equals {
background-color:#FF8D4B;
background-image:linear-gradient(to right,#FF8D4B,#FF542E);
cursor:pointer;
padding:26px 0;
position:relative;
z-index:-1
}
.Calculator-equalsLine {
background:white;
display:block;
margin:0 auto 6px;
box-shadow:0 0 2px rgba(0,0,0,0.4);
height:1px;
width:20px
}
.Calculator-equalsLine:last-child {
margin-bottom:0
}
</style>
</head>
<body>
<!-- partial:index.partial.html --><template data-template="calculatorbutton"><div class="Calculator-button" v-bind:class="className"><span v-bind:class="['btest', button.icon ? button.icon : '']" v-if="button.children == null" v-text="button.text" @click.stop="emitAction($event, button)"></span><span v-for="childButton in button.children" v-bind:class="[childButton.className || ' btest ', 'btest']" v-text="childButton.text" @click.stop="emitAction($event, childButton)"></span></div></template>
<div
class="App js-app" v-bind:style="{ opacity: appLoaded ? 1 : 0 }">
<div class="Calculator">
<header class="Calculator-header">
<div class="Calculator-expressions"><span class="Calculator-expressionsOverflow"></span><span class="Calculator-expressionsList">{{expressionList}}</span></div>
<div class="Calculator-operands"><span class="Calculator-currentOperand" v-bind:class="{ 'has-error': error }" v-bind:style="{ 'font-size': font..........完整代码请登录后点击上方下载按钮下载查看
网友评论0