vue+vuex实现一个计算器效果代码

代码语言:html

所属分类:其他

代码描述:vue+vuex实现一个计算器效果代码

代码标签: 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