Vue拟态风格计算器特效代码下载


Vue拟态风格计算器特效代码下载
Vue拟态风格计算器特效代码下载以及拟态风格计算器等js/jquery网页特效代码下载。

1. 引入JS

<script type="text/javascript" src="js/vue.js"></script>

2. HTML代码

    <div id="app">
        <div class="calculator">
            <div class="result"  v-bind:class="[isSmall ? 'changeResult' : '', isTooSmall ? 'changeResultSmall' : '']">{{equation}}</div>
            <button style="grid-area :ac" @click="clear">AC</button>
            <button style="grid-area :plus-minus" @click="calculateToggle">±</button>
            <button style="grid-area :percent" @click="calculatePercentage">%</button>
            <button style="grid-area :add" @click="append('+')">+</button>
            <button style="grid-area :subtract" @click="append('-')">-</button>
            <button style="grid-area :multiply" @click="append('×')">×</button>
            <button style="grid-area :divide" @click="append('÷')">÷</button>
            <button style="grid-area :equal" @click="calculate">=</button>
            <button style="grid-area :number-1" @click="append(1)">1</button>
            <button style="grid-area :number-2" @click="append(2)">2</button>
            <button style="grid-area :number-3" @click="append(3)">3</button>
            <button style="grid-area :number-4" @click="append(4)">4</button>
            <button style="grid-area :number-5" @click="append(5)">5</button>
            <button style="grid-area :number-6" @click="append(6)">6</button>
            <button style="grid-area :number-7" @click="append(7)">7</button>
            <button style="grid-area :number-8" @click="append(8)">8</button>
            <button style="grid-area :number-9" @click="append(9)">9</button>
            <button style="grid-area :number-0" @click="append(0)">0</button>
            <button style="grid-area :dot" @click="append('.')">.</button>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>	
    <script type="text/javascript">
        new Vue({
            el: "#app",
            data: {
                equation: '0',
                isDecimalAdded: false,//判断是否输入小数点,用来防止输入超过一个的小数点
                isOperatorAdded: false,//判断是否点击加减乘除,防止点击超过一次运算符号
                isStarted: false,//判断计算器是否开始输入数字,也会用于正负数、百分比计算时作出一些判断
                isSmall:false,//判断结果框的内容过长的时候字符缩小
                isTooSmall:false,//判断更小的时候
            },
            methods: {
                //判断charracter是否为加减乘除
                isOperator(character) {
                    return ['+', '-', '×', '÷'].indexOf(character) > -1;
                },
                //点击加减乘除、数字、小数点的时候
                append(character) {
                    if (this.equation === '0' && !this.isOperator(character)) {//判断是否输入数字
                        if (character === '.') {//判断是否输入小数点
                            this.equation += '' + character;//如果输入的是0,则在后面拼接
                            this.isDecimalAdded = true;
                        } else {
                            this.equation = '' + character;//如果不为0的,直接替换原来数字
                        }
                        this.isStarted = true;
                        return;
                    }
                    if (!this.isOperator(character)) {//如果输入的是数字
                        if (character === '.' && this.isDecimalAdded) {//只能输入一个小数点,如果遇到小数点则返回
                            return
                        }
                        if (character === '.') {//如果输入小数点
                            if (this.isOperatorAdded) {//如果在输入了运算符号的时候,输入小数点会自动加0在前面
                                this.equation += '0';
                            }
                            this.isDecimalAdded = true;
                            this.isOperatorAdded = true;
                        } else {
                            this.isOperatorAdded = false;
                        }
                        this.equation += '' + character;//拼接数字
                        this.showResult();
                    }
                    if (this.isOperator(character) && !this.isOperatorAdded) {//当输入运算符号的时候,
                        this.equation += '' + character;
                        this.isDecimalAdded = false;
                        this.isOperatorAdded = true;
                        this.showResult();
                    }
                    this.showResult();
                },
                //点击等于符号的时候
                calculate() {
                    let result = this.equation.replace(new RegExp('×', 'g'), '*').replace(new RegExp('÷', 'g'), '/');
                    this.equation = parseFloat(eval(result).toFixed(9)).toString();
                    this.isDecimalAdded = false;
                    this.isOperatorAdded = false;
                    this.showResult();
                },
                //点击正负号的时候
                calculateToggle() {
                    if (this.isOperatorAdded || !this.isStarted) {
                        return;
                    }
                    this.equation = this.equation + '* -1';
                    this.calculate();
                },
                //点击百分号的时候
                calculatePercentage() {
                    if (this.isOperatorAdded || !this.isStarted) {
                        return;
                    }
                    this.equation = this.equation + '* 0.01';
                    this.calculate();
                },
                //点击清除符号的时候
                clear() {
                    this.equation = '0';
                    this.isDecimalAdded = false;
                    this.isOperatorAdded = false;
                    this.isStarted = false;
                    this.isSmall = false;
                    this.isTooSmall = false;
                },
                //当结果框的显示问题
                showResult(){
                    //当输入内容宽度大于实际输入框宽度的时候,字体缩小适应输入框要求
                    // console.log(this.equation.length);
                    if(this.equation.length > 11){
                        this.isSmall = true;
                        if(this.equation.length >17){
                            this.isSmall = false;
                            this.isTooSmall = true;
                            if(this.equation.length > 27){
                                // this.equation = "无法显示";
                                alert("已超出输入最大值,将强行执行内容清空操作");
                                this.clear();
                            }
                        }
                    }
                }
            }
        })
    </script>

相关推荐

发表评论

相关文章