排球比赛计分系统--源码

排球比赛计分系统具体代码实现

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();
    }
}