排球比赛计分系统——任务实现以及源码
作者：互联网
任务的实现以及源代码：
排球比赛计分程序
主页面
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);
功能描述 先获取data()日期，之后获取小时和分钟，并通过计算向下取整拼接成字符串然后通过id选择器的innerTest属性设置内容并封装到一个函数里面，最后启动定时器每一秒执行一下。
标签：function,10,计分,text,leftAdd1,源码,var,源代码,排球比赛 来源： https://www.cnblogs.com/jyxz/p/16268117.html