排球比賽計分系統——任務實現以及原始碼

阿新 • • 發佈：2022-05-13

任務的實現以及原始碼：

排球比賽計分程式

主頁面

1：滑鼠點選分數加減

頁面展示

原始碼

 1 // 左邊開始
 2 // 第一人
 3 var leftAdd1 = 0;
 4 $(".leftAdd1").click(function () {
 5 $(".leftGrade1").text(++leftAdd1);
 6 var leftSum = leftAdd1 + leftAdd2 + leftAdd3 + leftAdd4 + leftAdd5 +
 7 leftAdd6;
 8 var rightSum = rightAdd1 + rightAdd2 + rightAdd3 + rightAdd4 +
 9 
 rightAdd5 + rightAdd6;
10 $("#leftGrade").text(leftSum);
11 // leftJudge(leftSum, rightSum);
12 judge();
13 })
14 $(".LeftReduce1").click(function () {
15 if (leftAdd1 == 0) {
16 alert("分數不能為負數哦~");
17 return false;
18 }
19 if (leftAdd1 > 0) {
20 var leftSum = leftAdd1 + leftAdd2 + leftAdd3 + leftAdd4 +
21 
 leftAdd5 + leftAdd6;
22 var rightSum = rightAdd1 + rightAdd2 + rightAdd3 + rightAdd4 +
23 rightAdd5 + rightAdd6;
24 $(".leftGrade1").text(--leftAdd1);
25 $("#leftGrade").text(--leftSum);
26 }
27 })

功能描述 leftAdd1是全域性變數負責統計左邊隊伍總體得分，點選+則加一，點選-則減一 leftSum和rightSum是為了將每個隊員的分數加起來，並顯示到頁面的頂端。

2：判斷輸贏

頁面展示

原始碼

 1 var site = 1;
 2 var i = 0,
 3 j = 0,
 4 q = 0; // i==leftSum j==rightSum q==總場數 let var const
 5 function judge(leftSum, rightSum) {
 6 var leftsum = leftAdd1 + leftAdd2 + leftAdd3 + leftAdd4 + leftAdd5 +
 7 leftAdd6;
 8 var rightsum = rightAdd1 + rightAdd2 + rightAdd3 + rightAdd4 + rightAdd5
 9 + rightAdd6;
10 var arr = ["第一場", "第二場", "第三場", "第四場", "第五場"];
11 var leftName = $("#leftNmae").text();
12 var rightName = $("#rightName").text();
13 if (leftsum >= 25 || rightsum >= 25 && ((leftsum - rightsum) >= 2)) {
14 i++;
15 alert("恭喜" + leftName + "獲得了勝利！");
16 $(".leftNumber").text(i);
17 if (i == 3) {
18 alert("恭喜" + leftName + "取得了最終的勝利！！！")
19 getNumber(q);
20 } else {
21 q++;
22 getNumber(q);
23 alert(arr[q] + "開始");
24 $(".site").text(arr[q]);
25 }
26 //修改總比分
27 update();
28 }
29 if (rightsum >= 25 && leftsum >= 25 && ((rightsum - leftsum) >= 2)) {
30 j++;
31 alert("恭喜" + rightName + "獲得了勝利！");
32 $(".rightNumber").text(j);
33 if (j == 3) {alert("恭喜" + rightName + "取得了最終的勝利！！！")
34 getNumber(q);
35 } else {
36 q++;
37 getNumber(q);
38 alert(arr[q] + "開始");
39 $(".site").text(arr[q]);
40 }
41 update();
42 }
43 }

功能描述 獲取每隊的總分根據總分做出相應的判斷，如果雙方任意一方的總分大於25並且超過對方兩份則判定這支隊伍勝利，每局勝利之後下面的總比分則會加一。

3：清空資料

原始碼

 1 //一場比賽之後將所有的比分清零
 2 function update(i) {
 3 $("#leftGrade").text("0");
 4 $(".rightGrade").text("0");
 5 for (var i = 1; i < 6; i++) {
 6 leftAdd1 = 0;
 7 leftAdd2 = 0;
 8 leftAdd3 = 0;
 9 leftAdd4 = 0;
10 leftAdd5 = 0;
11 leftAdd6 = 0;
12 var name = ".leftGrade" + i;
13 $(name).text("0");
14 }
15 for (var j = 1; j < 6; j++) {
16 rightAdd1 = 0;
17 rightAdd2 = 0;
18 rightAdd3 = 0;
19 rightAdd4 = 0;
20 rightAdd5 = 0;
21 rightAdd6 = 0;
22 var name = ".rightGrade" + j;
23 $(name).text("0");
24 }
25 }
26 /**
27 * 刪除表中的資料
28 */
29 @RequestMapping("/delete")
30 public void delete(){
31 usersService.clearTable();
32 }

功能描述每局比賽結束之後無論其中一方是否輸贏都將會清除個人的成績和團隊的成績，歸零。 4：獲取總比分原始碼

 1 function getNumber(i) {
 2 // ? : ? i 是第幾場
 3 var left = $(".leftNumber").text();
 4 var right = $(".rightNumber").text();
 5 var le_ri = left + ":" + right;
 6 //插入後臺資料
 7 console.log(le_ri);
 8 console.log(i++);
 9 // sum : sum
10 var leSum = $("#leftGrade").text();
11 var riSum = $(".rightGrade").text();
12 var leSum_riSum = leSum + ":" + riSum;
13 insert(leSum_riSum);
14 console.log(leSum_riSum);
15 }
16 /**
17 * 查詢比分
18 * @param id
19 * @return
20 */
21 @RequestMapping("/getScore")
22 @ResponseBody
23 public String getSocre(int id){
24 System.out.println(id);
25 Compare compare = usersService.selectScore(id);
26 return compare.getScore();
27 }

功能描述

當每局比賽結束之後並且在沒有清空資料之前獲取到每隊的總分數，並拼接成字串，為後臺插入資料做準備。

5：插入資料庫

頁面展示

原始碼

 1 function insert(le_ri) {
 2 var data = "score=" + le_ri + "&id=" + ++g;
 3 var str=data.replace(/\s+/g,"");
 4 $.ajax({
 5 url: 'insert',
 6 type: 'post',
 7 data: str,
 8 dataType: 'text',
 9 success: function (data) {
10 alert("插入成功");
11 }
12 })
13 }
14 /**
15 * 插入表資料
16 * @param compare 前臺傳來的比分內容
17 */
18 @RequestMapping("/insert")
19 public void insert(Compare compare){
20 usersService.insertInfo(compare);
21 }

功能描述 將前面獲取的兩隊總比分的字串先，拼接成請求字串並且除去其中包含的空格，最後通過ajax請求，請求後臺的insert方法，將資訊傳遞給後臺,後臺呼叫介面中的方法操作資料庫。

6：清除表中的資料

原始碼

1 // 每次重新整理 清空表中的資料
2 function clearAll(){ g = 0;
3 $.ajax({
4 url: 'delete',
5 type: 'post', dataType: 'text',
6 success: function (data) { alert("清除成功");
7 }

功能描述 為了簡單的實現每局比賽並且能夠正常的查詢比分，在頁面剛載入完畢的時候就會發送一個請求給後臺，並執行相應的方法操作資料庫，清除掉儲存比分表的資料。

7：查詢功能

頁面展示

原始碼

 1 // 查詢ajax請求
 2 function one(){
 3 var id = "id=" + 1;
 4 $.ajax({
 5 url: 'getScore',
 6 type: 'post',
 7 data: id,
 8 dataType: 'text',
 9 success: function (data) {
10 $(".show").show();
11 $(".show").text(data);
12 }
13 })
14 }

功能描述 點選查詢第幾局比賽之後傳送ajax請求，並將請求成功的資料通過jquery設定為類名為show的html標籤並使之顯示出來。

8：顯示隊員的名稱

原始碼

 1 @RequestMapping("/begin")
 2 public ModelAndView begin(ModelAndView modelAndView) {
 3 List<UsersOne> userList1 = usersService.queryAllPlayersOne();
 4 List<UsersTwo> userlist2 = usersService.queryAllPlayerTwo();
 5 String[] user1 = new String[6];
 6 int i = 0;
 7 for (UsersOne usersOne : userList1) {
 8 user1[i] = usersOne.getPlayerName();
 9 i++;
10 }
11 String[] user2 = new String[6];
12 int j = 0;
13 for (UsersTwo usersTwo : userlist2) {
14 user2[j] = usersTwo.getPlayerName();
15 j++;
16 }
17 modelAndView.addObject("user1", user1);
18 modelAndView.addObject("user2", user2);
19 modelAndView.setViewName("index");
20 return modelAndView;
21 }
22 <!-- 左邊隊員顯示 -->
23 <div class="leftTeam">
24 <li><span th:text=${user1[0]}></span><span
25 class="leftGrade1">0</span></li>
26 <li><span th:text=${user1[1]}></span><span
27 class="leftGrade2">0</span></li>
28 <li><span th:text=${user1[2]}></span><span
29 class="leftGrade3">0</span></li>
30 <li><span th:text=${user1[3]}></span><span
31 class="leftGrade4">0</span></li>
32 <li><span th:text=${user1[4]}></span><span
33 class="leftGrade5">0</span></li>
34 <li><span th:text=${user1[5]}></span><span
35 class="leftGrade6">0</span></li>
36 </div>

功能描述 前端頁面載入完畢之後就會通過ajax請求begin方法，查詢兩張使用者表中的所有資料封裝到集合裡面，並將每個使用者的姓名通過for迴圈迭代儲存到數組裡面，再將陣列作為資料儲存到modelAndView物件裡。前端通過thymeleaf模板引擎遍歷後臺傳來的集合，最後通過形如th:text=${user1[0]}這種thymeleaf表示式顯示到頁面上。

9：時間顯示

原始碼

1 window.addEventListener('load', function() { function myTime() {
2 const time = new Date(); const hh = time.getHours(); const mm = time.getMinutes();
3 
4 document.querySelector('.time').innerText = Math.floor(hh / 10) + (hh %
5 10 + ' : ') + Math.floor(
6 mm / 10) + mm % 10;
7 }
8 myTime(); setInterval(myTime, 1000);