排球比賽計分系統--原始碼
阿新 • • 發佈：2022-05-14
排球比賽計分系統具體程式碼實現
1.程式比賽計分器初始化程式介面
html原始碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"/> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> <script src="js/function.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="out"> <h1 align="center">排球比賽計分</h1> <div class="context"> <div class="leftName"> <span>鄭州</span> </div> <div class="rightName"> <span>洛陽</span> </div> </div> <div class="context1"> <div class="leftNumber"> <span class="l0">0</span> </div> <div class="rightNumber"> <span class="r0">0</span> </div> </div> <div class="vs"> VS </div> <div class="site"> <span>第一局</span> </div> <div class="lallSite"> <span class="zl">0</span> </div> <div class="rallSite"> <span class="zr">0</span> </div> <div class="leftTeamNames"> <ul id="ts"> </ul> </div> <div class="rightTeamNames"> <ul id="ts2"> </ul> </div> <div class="leftAdd"> <li class="leftUp"><span>+</span></li> <li class="leftDown"><span>-</span></li> </div> <div class="rightAdd"> <li class="rightUp"><span>+</span></li> <li class="rightDown"><span>-</span></li> </div> <div class="time"> <span id="time"></span> </div> </div> </body> <script type="text/javascript" charset="utf-8"> setInterval(fun, 1000) $.get("findAll1", function (result) { $.each(result.data, function (i, field) { var s = "<li>" + field.name + "</a></li>" var s2 = "<li>" + field.name2 + "</a></li>" //新增到id為ts的ul中 $("#ts").append(s); $("#ts2").append(s2); }); }, "json"); var a = $('.zl').text() + 1 $(".zl").bind('DOMNodeInserted', function (e) { $.ajax({ type: 'POST', url: "insert", data: {a} }) }) var b = $('.zr').text() + 1 $(".zr").bind('DOMNodeInserted', function (e) { console.log(b) $.ajax({ type: 'POST', url: "insert2", data: {b} }) }) </script> </html>
2.比賽現場計分
js原始碼
$(document).ready(function () {
//左邊加分
var i = 0;
var j = 0;
var a = 0;
var b = 0;
$(".leftUp").click(function () {
$(".l0").text(++i);
if (i == 25) {
i = 0 - 1;
$(".r0").text(j = 0)
$(".l0").text(i = 0)
$(".zl").text(++a);
}
if (a == 5) {
alert("鄭州隊伍勝利了")
$(".zl").text(a = 0);
$(".zr").text(b = 0);
}
});
$(".leftDown").click(function () {
$(".l0").text(--i);
});
//右邊加分
$(".rightUp").click(function () {
$(".r0").text(++j);
if (j == 25) {
j = 0 - 1;
$(".r0").text(j = 0)
$(".l0").text(i = 0)
$(".zr").text(++b);
}
if (b == 5) {
alert("洛陽隊伍勝利了")
$(".zl").text(a = 0);
$(".zr").text(b = 0);
}
});
$(".rightDown").click(function () {
$(".r0").text(--j);
});
});
//時間
function fun() {
var date = new Date();
document.getElementById("time").innerHTML = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds()
}
3.比賽計分存入資料庫
4.三層架構
1.Dao層
@Mapper @Repository public interface ResultDao { @Insert("insert into results(team1) values(#{team1})") int insert(String team1); @Insert("insert into results2(team2) values(#{team2})") int insert2(String team1); }
@Mapper @Repository public interface TeamDao { @Select("select * from team1") List<Team> findAll(); }
2.Serive層
@Service public class ResultServiceImpl implements ResultsService { @Autowired private ResultDao resultDao; @Override public int insert(String team1) { return resultDao.insert(team1); } @Override public int insert2(String team1) { return resultDao.insert2(team1); } }
@Service public class TeamServiceImpl implements TeamService { @Autowired private TeamDao teamDao; @Override public List<Team> findAll() { return teamDao.findAll(); } }
3.Controller層
@Controller public class ResultController { @Autowired private ResultsService resultsService; @ResponseBody @RequestMapping(value = "/insert", method = RequestMethod.POST) public void insert1(@RequestBody String results) { resultsService.insert(results.substring(3)); } @ResponseBody @RequestMapping(value = "/insert2", method = RequestMethod.POST) public void insert2(@RequestBody String results) { resultsService.insert2(results.substring(3)); } }
@RestController public class TeamController { @Autowired private TeamService teamService; @GetMapping("/findAll1") public String findAll1(HttpServletResponse response) { List<Team> all = teamService.findAll(); JSONObject obj = new JSONObject(); obj.put("code", 0); obj.put("msg", ""); obj.put("count", all.size()); obj.put("data", all); response.setContentType("text/html;charset=utf-8"); return obj.toString(); } }
以上就是原始碼，程式還有些瑕疵。