1 css代码
2 html,body{
3 height: 100%;
4 width: 100%;
5 margin:0px;
6 padding:0px;
7 /*background-color: red;*/
8 }
9 #bgDiv{
10 width:100%;
11 height:323px;
12 background-image: url("img/bg.jpg");
13 text-align: right;
14 position: relative;
15 }
16 #bg_regBtn{
17 position:absolute;
18 bottom: 110px;
19 right: 10px;
20 }
21 #bg_kanBtn{
22 position:absolute;
23 bottom: 10px;
24 left:100px;
25 }
26 #progress_bar{
27 height: 50px;
28 width: 70%;
29 margin: 0 auto;
30 }
1 前端页面HTML代码
2 <div id="mybody">
1 ServiceAPI001.jsp代码
2 <%@ page language="java" contentType="text/html; charset=UTF-8"
3 pageEncoding="UTF-8"%><%
4
5 int price2 = 4;
6 Integer price = (Integer)application.getAttribute("price");
7 if(price==null){
8 price = 20;
9 }
10 if (price!=price2){
11 price--;
12 %>{"oldPrice":20,"newPrice":<%=price%>,"kan":1}<%
13 }
14 else{
15 %>{"oldPrice":20,"newPrice":<%=price%>,"kan":0}<%
16 }
17 application.setAttribute("price",price);
18 %>
19 ServiceAPI002.jsp代码
20 <%@ page language="java" contentType="text/html; charset=UTF-8"
21 pageEncoding="UTF-8"%><%
22
23 int price2 = 4;
24 Integer price = (Integer)application.getAttribute("price");
25 if(price==null){
26 price = 20;
27 }
28 %>{"oldPrice":20,"newPrice":<%=price%>,"kan":0,"userList":[]}
29 <%
30
31 application.setAttribute("price",price);
32 %>
3 <div id="bgDiv" v-if="results">
4 <div id="bg_regBtn">
5 <img src="img/8.png">
6 </div>
7 <div id="bg_kanBtn">
8 <img src="img/888.png" @click="kanMethod">
9 </div>
10 </div>
11 <div id="progress_bar" v-if="results">
12 <img src="img/7.png" height="30px" v-bind:width="width" >
13 </div>
14 <div id="showsuccesDiv" v-if="succes">
15 <img src="img/777.gif">
16 </div>
17 </div>
1 <script src="js/jquery-3.2.1.min.js"></script>
2 <script src="js/vue.js"></script>
3 <script type="text/javascript">
4
5 var myModel={oldPrice:0,newPrice:0,kan:0,width:"250px",succes:false,results:true};
6 var myViewModel = new Vue({
7 el:'#mybody',
8 data:myModel,
9 methods:{
10 kanMethod:function(){
11
12 $.ajax({
13 url:'ServiceAPI001.jsp',
14 type:'GET',
15 //data:clientInput,
16 dataType:'json',
17 timeout:3000,
18 success:function(result){
19 myModel.oldPrice=result.oldPrice;
20 myModel.newPrice=result.newPrice;
21 myModel.kan=result.newPrice;
22 myModel.width=250*(result.newPrice/result.oldPrice);
23 if(result.kan==0){
24 myModel.succes=true;
25 myModel.results = false ;
26 alert("你已经砍到最低价位了，不能再砍了") ;
27 }
28 },
29 error:function(XMLHttpRequest, textStatus, errorThrown){
30 alert('服务器忙，请不要说脏话，理论上大家都是文明人');
31 alert(textStatus+XMLHttpRequest.status);
32 }
33 });
34
35 }
36 }
37 });
38 function getData(){
39 $.ajax({
40 url:'ServiceAPI002.jsp',
41 type:'GET',
42 //data:clientInput,
43 dataType:'json',
44 timeout:3000,
45 success:function(result){
46 myModel.oldPrice=result.oldPrice;
47 myModel.newPrice=result.newPrice;
48 myModel.kan=result.newPrice;
49 myModel.width=250*(result.newPrice/result.oldPrice);
50 },
51 error:function(XMLHttpRequest, textStatus, errorThrown){
52 alert('服务器忙，请不要说脏话，理论上大家都是文明人');
53 alert(textStatus+XMLHttpRequest.status);
54 }
55 });
56 }
57 getData();
58 </script>
运行后的效果图：
