鼠标点击谁谁变色

最新推荐文章于 2024-07-19 17:13:16 发布

原创最新推荐文章于 2024-07-19 17:13:16 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

web前端学习专栏收录该内容

301 篇文章

订阅专栏

这是一个使用HTML、CSS和JavaScript实现的BINGO游戏页面，页面中包含一个可交互的表格，表格中的数字由JavaScript随机生成并在点击单元格时改变背景色。

<!DOCTYPE html>
<html>

	<head>

		<meta charset="utf-8" />
		<title>BINGO</title>
		<script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
		<style type="text/css">
			body,
			html {
				background: white;
				padding: 0px;
				margin: 0px;
				font-size: 45px;
				color: red;
				text-align: center;
			}
			
			table {
				border-collapse: collapse;
			}
			
			th,
			td {
				width: 100px;
			}
		</style>
		<script type="text/javascript">
			$(function() {
				for (var i = 0; i < $("tr td").length; i++) {
					$("tr td:eq(" + i + ")").text(parseInt(Math.random() * 100));
				};
				 $("tr td").click(function(){
				 	$("tr td").css('background','white');
				 	$(this).css('background','green');
				 	alert($(this).text());
				 })
			})
		</script>
	</head>

	<body>

		<table border="1px" id="table1">
			<tr>
				<th>A</th>
				<th>B</th>
				<th>C</th>
				<th>D</th>
				<th>E</th>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>

	</body>

</html>