虽然不是特别好看,emm,慢慢改吧

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" href="./css/my.css">
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    </head>
    <body>
        <script src="js/vue.min.js"></script>
        <div class="body_large" id="app">
            <div class="banner_large">
                <p class="text">1.0测试版本</p>
            </div>
            <div class="input_large">
                <label >起始等级:</label><br>
                <div class="now_index">
                    <select v-model="now.index" class="now_index_select">
                        <option v-for="(item,index) in up" :value="index">{{item.max}}</option>
                    </select>
                </div>    
                <div class="now_lev">
                    <select v-model="now.lev" class="now_index_select">
                        <option v-for="item in list" :value="item.lev" v-show="item.lev<=up[now.index].lev">等级{{item.lev}} 经验{{item.exp}}</option>
                    </select>
                </div> 
                <div class="now_exp">
                    <input type="text" v-model="now.exp" class="now_input" placeholder="输入目前经验">
                </div>
                <br><br><br>
                <label>目标等级:</label><br>
                <div class="goal_index">
                    <select v-model="goal.index" class="goal_index_select">
                        <option v-for="(item,index) in up" :value="index">{{item.max}}</option>
                    </select>
                </div>
                <div class="goal_lev">
                    <select v-model="goal.lev" class="goal_index_select">
                        <option v-for="item in list" :value="item.lev" v-show="item.lev<=up[goal.index].lev">等级{{item.lev}} 经验{{item.exp}}</option>
                    </select>
                </div>    
                <div class="goal_exp">
                    <input type="text" v-model="goal.exp" class="goal_input" placeholder="输入目标经验">
                </div>
                <div @click="compute1" class="btn_caculate btn btn-primary btn-lg active">计算</div>
            </div>    
            <div class="result_large">
                <div class="result_show" v-show="show">
                    经验: <span>{{result.exp}}</span> <br>
                    紫蛋: <span>{{Math.ceil(result.egg)}}</span> <br>
                    体力: <span>{{ result.power}}</span> <br>
                    进化丹: <span>{{result.evolution}}</span> 
                    转生丹: <span>{{result.Reincarnation}}</span>                                    
                </div>
            </div>
        </div>
        <script>
            var json=[{"lev":1,"exp":"500","aexp":0},{"lev":"2","exp":"750","aexp":500},{"lev":"3","exp":"1000","aexp":1250},{"lev":"4","exp":"1250","aexp":2250},{"lev":"5","exp":"1500","aexp":3500},{"lev":"6","exp":"1750","aexp":5000},{"lev":"7","exp":"2000","aexp":6750},{"lev":"8","exp":"2250","aexp":8750},{"lev":"9","exp":"2500","aexp":11000},{"lev":"10","exp":"2750","aexp":13500},{"lev":"11","exp":"3000","aexp":16250},{"lev":"12","exp":"3250","aexp":19250},{"lev":"13","exp":"3500","aexp":22500},{"lev":"14","exp":"3750","aexp":26000},{"lev":"15","exp":"4000","aexp":29750},{"lev":"16","exp":"4250","aexp":33750},{"lev":"17","exp":"4500","aexp":38000},{"lev":"18","exp":"4750","aexp":42500},{"lev":"19","exp":"5000","aexp":47250},{"lev":"20","exp":"5250","aexp":52250},{"lev":"21","exp":"5500","aexp":57500},{"lev":"22","exp":"5750","aexp":63000},{"lev":"23","exp":"6000","aexp":68750},{"lev":"24","exp":"6250","aexp":74750},{"lev":"25","exp":"0","evolution":1,"aexp":81000},{"lev":"26","exp":"9500","aexp":81000},{"lev":"27","exp":"10000","aexp":90500},{"lev":"28","exp":"10500","aexp":100500},{"lev":"29","exp":"11000","aexp":111000},{"lev":"30","exp":"11500","aexp":122000},{"lev":"31","exp":"12000","aexp":133500},{"lev":"32","exp":"12500","aexp":145500},{"lev":"33","exp":"13000","aexp":158000},{"lev":"34","exp":"13500","aexp":171000},{"lev":"35","exp":"14000","aexp":184500},{"lev":"36","exp":"14500","aexp":198500},{"lev":"37","exp":"15000","aexp":213000},{"lev":"38","exp":"15500","aexp":228000},{"lev":"39","exp":"16000","aexp":243500},{"lev":"40","exp":"16500","aexp":259500},{"lev":"41","exp":"17000","aexp":276000},{"lev":"42","exp":"17500","aexp":293000},{"lev":"43","exp":"18000","aexp":310500},{"lev":"44","exp":"18500","aexp":328500},{"lev":"45","exp":"19000","aexp":347000},{"lev":"46","exp":"19500","aexp":366000},{"lev":"47","exp":"20000","aexp":385500},{"lev":"48","exp":"20500","aexp":405500},{"lev":"49","exp":"21000","aexp":426000},{"lev":"50","exp":"0","evolution":"4","aexp":447000},{"lev":"51","exp":"27300","aexp":447000},{"lev":"52","exp":"28250","aexp":474300},{"lev":"53","exp":"29200","aexp":502550},{"lev":"54","exp":"30150","aexp":531750},{"lev":"55","exp":"31100","aexp":561900},{"lev":"56","exp":"32050","aexp":593000},{"lev":"57","exp":"33000","aexp":625050},{"lev":"58","exp":"33950","aexp":658050},{"lev":"59","exp":"34900","aexp":692000},{"lev":"60","exp":"35850","aexp":726900},{"lev":"61","exp":"36800","aexp":762750},{"lev":"62","exp":"37750","aexp":799550},{"lev":"63","exp":"38700","aexp":837300},{"lev":"64","exp":"39650","aexp":876000},{"lev":"65","exp":"40600","aexp":915650},{"lev":"66","exp":"41550","aexp":956250},{"lev":"67","exp":"42500","aexp":997800},{"lev":"68","exp":"43450","aexp":1040300},{"lev":"69","exp":"44400","aexp":1083750},{"lev":"70","exp":"45350","aexp":1128150},{"lev":"71","exp":"46300","aexp":1173500},{"lev":"72","exp":"47250","aexp":1219800},{"lev":"73","exp":"48200","aexp":1267050},{"lev":"74","exp":"49150","aexp":1315250},{"lev":"75","exp":"0","evolution":"9","aexp":1364400},{"lev":"76","exp":"67500","aexp":1364400},{"lev":"77","exp":"69350","aexp":1431900},{"lev":"78","exp":"71200","aexp":1501250},{"lev":"79","exp":"73050","aexp":1572450},{"lev":"80","exp":"74900","aexp":1645500},{"lev":"81","exp":"76750","aexp":1720400},{"lev":"82","exp":"78600","aexp":1797150},{"lev":"83","exp":"80450","aexp":1875750},{"lev":"84","exp":"82300","aexp":1956200},{"lev":"85","exp":"84150","aexp":2038500},{"lev":"86","exp":"86000","aexp":2122650},{"lev":"87","exp":"87850","aexp":2208650},{"lev":"88","exp":"89700","aexp":2296500},{"lev":"89","exp":"91550","aexp":2386200},{"lev":"90","exp":"93400","aexp":2477750},{"lev":"91","exp":"95250","aexp":2571150},{"lev":"92","exp":"97100","aexp":2666400},{"lev":"93","exp":"98950","aexp":2763500},{"lev":"94","exp":"100800","aexp":2862450},{"lev":"95","exp":"102650","aexp":2963250},{"lev":"96","exp":"104500","aexp":3065900},{"lev":"97","exp":"106350","aexp":3170400},{"lev":"98","exp":"108200","aexp":3276750},{"lev":"99","exp":"110050","aexp":3384950},{"lev":"100","exp":"111900","aexp":3495000}];
            var up=[{max:"e",exp:5000,rei:1,evo:0,lev:5},{max:"d",exp:57500,rei:1,evo:0,lev:20},{max:"c",exp:276000,rei:3,evo:1,lev:40},{max:"b",exp:762750,rei:6,evo:5,lev:60},{max:"a",exp:1720400,rei:10,evo:14,lev:80},{max:"s",exp:3606900,rei:0,evo:14,lev:100}];
            var app=new Vue({
                el: '#app',
                data:{
                    list:json,
                    show:false,
                    now: {
                        index:0,
                        exp:0,
                        lev:0
                    },
                    goal: {
                        index:1,
                        exp:0,
                        lev:0
                    },
                    result: {
                        exp:0,
                        evolution:0,
                        Reincarnation:0,
                        egg:0,
                        power:0
                    }
                },
                methods:{
                    compute1:function(){    
                        console.log(this.now);
                        console.log(this.goal);
                        this.show=true;
                        var now=this.now;
                        var goal=this.goal;
                        var result={
                            exp:0,
                            evolution:0,
                            Reincarnation:0,
                            egg:0,
                            power:0,
                        }
                        if(now.index>goal.index){
                            result.exp=0;
                            result.lev=0;
                            console.log('小')
                        }else if(now.index==goal.index){
                            result.exp=result.exp*1-now.exp*1+goal.exp*1;
                            result.exp=result.exp*1+this.list[goal.lev-1].aexp*1-this.list[now.lev-1].aexp*1;        
                        }else{
                            console.log('大');
                            console.log(result.exp);
                            for(var i=now.index;i<goal.index;i++){
                                result.Reincarnation+=up[i].rei*1;
                                result.evolution+=up[i].evo*1;
                                result.exp+=up[i].exp*1;
                            }
                            console.log(result.exp);
                            result.exp=result.exp*1-now.exp*1+goal.exp*1;
                            result.exp=result.exp*1+this.list[goal.lev-1].aexp*1-this.list[now.lev-1].aexp*1;
                        }
                        for(var j=now.lev-1;j<goal.lev;j++){
                            if(this.list[j].exp=="0")
                                result.evolution=result.evolution*1+this.list[j].evolution*1;
                        }
                        result.egg=Math.ceil(result.exp/1000);
                        result.power=Math.ceil(result.exp/1700);
                        this.result=result;
                        console.log(result);
                    }
                },
            })
        </script>
    </body>
</html>
body{
    margin:0px; background: url(https://wx2.sbimg.cn/2020/05/17/QQ20200517-183352.png) no-repeat; background-size:100% 100%; background-attachment:fixed;
}

.goal_index_select{
    width: 100%;
}
.now_index_select{
    width: 100%;
}
.body_large{
    border: #000000;
    width: 50%;
    height: 100%;
    float: left;
    margin-left: 25%;
}
.banner_large{
    width: 100%;
    height: 100px;
    float: left;
}
.text{
    width: 300px;
    height: 50px;
    font-size: 30px;
    float: left;
    margin-left: 30%;
    margin-top: 10%;
}
.input_large{
    width: 100%;
    height: 300px;
    float: left;
    margin-top: 40px;
    
}
.result_large{
    width: 100%;
    height: 200px;
    float: left;
    margin-top: 40px;
    background-color: white;
}
.now_index{
    width: 20%;
    height: 30px;
    float: left;
    margin-left: 2%;
}
.now_lev{
    width: 25%;
    height: 30px;
    float: left;
    margin-left:2%;

}
.now_exp{
    width: 25%;
    height: 30px;
    float: left;
    margin-left:2%;

}
.now_input{
    float: left;
    margin-top: 0px;
    width: 100%;
}


.goal_index{
    width: 20%;
    height: 30px;
    float: left;
    margin-left: 2%;

}
.goal_lev{
    width: 25%;
    height: 30px;
    float: left;
    margin-left:2%;

}
.goal_exp{
    width: 25%;
    height: 30px;
    float: left;
    margin-left:2%;

}
.goal_input{
    float: left;
    margin-top: 0px;
    width: 100%;
}
.btn_caculate{
    height: 40px;
    width:30%;
    float: left;
    margin-top: 20%;
    margin-left: 35%;

}
.result_show{
    float: left;
    height: 94%;
    width: 94%;
    font-size: 20px;
    color: #8A6D3B;
    margin-left: 3%;
    margin-top: 3%;
}

最后修改:2021 年 04 月 28 日 07 : 38 AM