篮球积分系统数组思维制作方法_as篮球积分代码-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36982349/article/details/83005217

篮球积分系统

数组思维：
将相同类型的元素或者对象存放在数组中，通过下标得到任何一项。

<!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>