一个砍价游戏

今天做了一个砍价游戏，当然，并不是真的，只是限于前端的砍价，不涉及后台技术

这里是正文

<div id="mybody">
    <div id="bgDiv">
        <div id="bg_regBtn">
            <img src="img/8.png">
        </div>
        <div id="bg_kanBtn">
            <img src="img/888.png" @click="kanMethod">
        </div>
    </div>
    <div id="progress_bar">
        <img src="img/7.png" height="30px" v-bind:width="width" >
    </div>
    <div id="showsuccesDiv" v-if="succes">
        <img src="img/777.gif">
    </div>
</div>

这里是样式

<style type="text/css">
html,body{
    height: 100%;
    width: 100%;
    margin:0px;
    padding:0px;
    /*background-color: red;*/
}
#bgDiv{
    width:100%;
    height:323px;
    background-image: url("img/bg.jpg");
    text-align: right;
    position: relative;
}
#bg_regBtn{
    position:absolute;
    bottom: 110px;
    right: 10px;
}
#bg_kanBtn{
    position:absolute;
    bottom: 10px;
    left:100px;
}
#progress_bar{
    height: 50px;
    width: 70%;
    margin: 0 auto;
}
</style>

这里是JavaScript

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/vue.js"></script>
<script type="text/javascript">

var myModel={oldPrice:0,newPrice:0,kan:0,width:"250px",succes:false};
var myViewModel = new Vue({
    el:'#mybody',
    data:myModel,
    methods:{
        kanMethod:function(){
            $.ajax({
                url:'ServiceAPI001.jsp',
                type:'GET',
                //data:clientInput,
                dataType:'json',
                timeout:3000,
                success:function(result){
                    $.ajax({
                        url:'ServiceAPI001.jsp',
                        type:'GET',
                        //data:clientInput,
                        dataType:'json',
                        timeout:3000,
                        success:function(result){
                            myModel.oldPrice=result.oldPrice;
                            myModel.newPrice=result.newPrice;
                            myModel.kan=result.newPrice;
                            myModel.width=250*(result.newPrice/result.oldPrice);
                            if(result.kan==0){
                                myModel.succes=true;
                            }
                        },
                        error:function(XMLHttpRequest, textStatus, errorThrown){
                            alert('服务器忙，请不要说脏话，理论上大家都是文明人');
                            alert(textStatus+XMLHttpRequest.status);
                        }
                    });
                },
                error:function(XMLHttpRequest, textStatus, errorThrown){
                    alert('服务器忙，请不要说脏话，理论上大家都是文明人');
                    alert(textStatus+XMLHttpRequest.status);
                }
            });
        }
    }
});
function getData(){
    $.ajax({
        url:'ServiceAPI002.jsp',
        type:'GET',
        //data:clientInput,
        dataType:'json',
        timeout:3000,
        success:function(result){
            myModel.oldPrice=result.oldPrice;
            myModel.newPrice=result.newPrice;
            myModel.kan=result.newPrice;
            myModel.width=250*(result.newPrice/result.oldPrice);
        },
        error:function(XMLHttpRequest, textStatus, errorThrown){
            alert('服务器忙，请不要说脏话，理论上大家都是文明人');
            alert(textStatus+XMLHttpRequest.status);
        }
    });
}
getData();
</script>

然后还要再写两个jsp文件

分别是ServiceAPI001.jsp和ServiceAPI002.jsp

首先是ServiceAPI001.jsp

这个写的是每砍一下就减少20，等减到一定程度就不再往下减了。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%><%
    
    int price2 = 4;
    Integer price = (Integer)application.getAttribute("price");
    if(price==null){
        price = 20;
    }
    if (price!=price2){
        price--;
%>{"oldPrice":20,"newPrice":<%=price%>,"kan":1}<%
    }
    else{
%>{"oldPrice":20,"newPrice":<%=price%>,"kan":0}<%    
    }
    application.setAttribute("price",price);
%>

其次是ServiceAPI002.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%><%
    
    int price2 = 4;
    Integer price = (Integer)application.getAttribute("price");
    if(price==null){
        price = 20;
    }
%>{"oldPrice":20,"newPrice":<%=price%>,"kan":0,userList:[]}
<%    

    application.setAttribute("price",price);
%>

这样就完成了一个砍价的小游戏