籃球積分系統
數組思維：
將相同類型的元素或者對象存放在數組中，通過下標得到任何一項。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.fen {
overflow: hidden;
}
h2 {
float: left;
font-size: 100px;
}
</style>
</head>
<body>
<div class="fen">
<h2 id="fenA">0</h2>
<h2>-</h2>
<h2 id="fenB">0</h2>
</div>
<div class="btns">
<input type="radio" id="duiA" class="xuan" name="dui" checked>A隊
<input type="radio" id="duiB" class="xuan" name="dui">B隊
<button id="btn1">加1分</button>
<button id="btn2">加2分</button>
<button id="btn3">加3分</button>
</div>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
// 定義分數數組用於保存分數
var scoreArr = [0, 0];
// 定義數組用於保存對象
var h2Arr = [$("#fenA"), $("#fenB")];
// 定義一個信號量
var idx = 0;
// 給A隊和B隊添加點擊事件
$(".xuan").click(function() {
// console.log($(this).index());
idx = $(this).index();
// console.log(idx);
})
// 給btn1添加點擊事件
$("#btn1").click(function() {
// 分數改變
scoreArr[idx] += 1;
// console.log(scoreArr);
// 體現在元素身上
h2Arr[idx].html(scoreArr[idx]);
})
// 給btn2添加點擊事件
$("#btn2").click(function() {
// 分數改變
scoreArr[idx] += 2;
// 體現在元素身上
h2Arr[idx].html(scoreArr[idx]);
})
// 給btn3添加點擊事件
$("#btn3").click(function() {
// 分數改變
scoreArr[idx] += 3;
// 體現在元素身上
h2Arr[idx].html(scoreArr[idx]);
})
</script>
</body>
</html>