二十二、篮球积分系统（普通思维）

22.1 DOM

<div class="fen">
    <h2 id="fenA">0</h2>
    <h2>-</h2>
    <h2 id="fenB">0</h2 id="fenA">
</div>
<div class="btns">
    <input type="radio" id="duiA" name="dui" checked>A队
    <input type="radio" id="duiB" name="dui">B队
    <button id="btn1">加1分</button>
    <button id="btn2">加2分</button>
    <button id="btn3">加3分</button>
</div>

22.2 css

<style>
    /* 清楚默认样式 */
    * {
        margin: 0;
        padding: 0;
    }
    .fen {
        overflow: hidden;
    }
    h2 {
        float: left;
        font-size: 100px;
    }
</style>

22.3 jquery

<!-- 引入jquery包 -->
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // 定义变量 用于保存分数
    var fenshuA = 0;
    var fenshuB = 0;
    // 添加点击事件
    $("#btn1").click(function(){
        // 判断是给A队还是B队加分
        if($("#duiA").is(":checked")){
            fenshuA += 1;
            // console.log(fenshuA);
            // 体现在元素身上
            $("#fenA").html(fenshuA);
        }else{
            // B队被选中
            fenshuB += 1;
            // 体现在元素身上
            $("#fenB").html(fenshuB);
        }
    });
    // btn2添加点击事件
    $("#btn2").click(function(){
        // 判断是给A队还是B队加分
        if($("#duiA").is(":checked")){
            fenshuA += 2;
            // console.log(fenshuA);
            // 体现在元素身上
            $("#fenA").html(fenshuA);
        }else{
            // B队被选中
            fenshuB += 2;
            // 体现在元素身上
            $("#fenB").html(fenshuB);
        }
    });
    // btn3添加点击事件
    $("#btn3").click(function(){
        // 判断是给A队还是B队加分
        if($("#duiA").is(":checked")){
            fenshuA += 3;
            // console.log(fenshuA);
            // 体现在元素身上
            $("#fenA").html(fenshuA);
        }else{
            // B队被选中
            fenshuB += 3;
            // 体现在元素身上
            $("#fenB").html(fenshuB);
        }
    });
</script>