文章

使用js实现点击事件

本文介绍如何通过HTML、CSS及JavaScript实现一个可交互的3x3表格，点击表格中的格子可以改变其背景颜色，颜色变化遵循特定的顺序。

发表于
作者 贾永琪
3 分钟阅读
使用js实现点击事件

文章信息

  • 原文链接：https://jiayq.blog.csdn.net/article/details/75529166
  • 发布时间：2017-07-20 14:42:19
  • 阅读量：6
  • 分类：java专栏收录该内容, 订阅专栏
  • 标签：#java, #css, #javascript, #html

摘要

文章浏览阅读6k次，点赞2次，收藏4次。本文介绍如何通过HTML、CSS及JavaScript实现一个可交互的3x3表格，点击表格中的格子可以改变其背景颜色，颜色变化遵循特定的顺序。

这个项目实现一个页面上的3*3的格子，点击每个格子，改变其背景颜色。

效果如下：

image

1.首先在HTML文件的<body>标签中创建一个表格，背景颜色是红色：

①使用css文件：

首先在WebRoot的文件夹下创建一个CSS文件夹，创建一个index.css文件

写入如下代码：

1
2
3
4
5
6
7
8
9

td{
	 width:200px;
	  height:200px;
	   font-size: 25px;
	   border: 1px solid black;
	   font-family: 楷体;
	   background-color: red;
	   color: white;
}

td前面什么都没有，没有#，也没有.

表示只要是引用这个css文件的页面里的所有的td的属性都会把这些属性当作外部属性来调用

所以，在HTML文件的<body>标签下只需要写下如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<body>
   <table id="table" align="center" style="border: 2px solid black;">
  		<tr>
  			<td id="1"  align="center">一
  			</td>
  			<td id="2"  align="center">二
  			</td>
  			<td id="3"  align="center">三
  			</td>
  		</tr>
  		<tr>
  			<td id="4"  align="center">四
  			</td>
  			<td id="5"  align="center">五
  			</td>
  			<td id="6"  align="center">六
  			</td>
  		</tr>
  		<tr>
  			<td id="7"  align="center">七
  			</td>
  			<td id="8"  align="center">八
  			</td>
  			<td id="9"  align="center">九
  			</td>
  		</tr>
  	</table>
  </body>

效果如下：

image
2.点击没有反应，这时候需要写点击事件了

image
在这里，我们需要用到window.onload事件：

image

所以，我们让页面加载完成后，使用js来为我们的每个单元格添加一个点击事件处理方法：

1
2
3
4
5
6
7
8
9
10

<script type="text/javascript">
	window.onload=function(){
		var tdNodes = document.getElementsByTagName("td");
		for(var i =0;i<tdNodes.length;i++){
		tdNodes[i].index = i + 1;
			tdNodes[i].onclick = function(){
			}
		}
	}
</script>

这里，事件处理方法中什么都没有操作，现在我们只是能够获得我们点击的单元格的id属性：

我们添加一个整型的变量来存储我们点击的次数，以此来改变颜色：

1

var sum =0;

然后添加对应的改变颜色的操作：

1
2
3
4
5
6
7
8
9
10
11
12
13

sum++;
if(sum%6 == 0)
	document.getElementById(this.index).style.backgroundColor = "fuchsia";
else if(sum%6 == 1)
	document.getElementById(this.index).style.backgroundColor = "blue";
else if(sum%6 == 2)
	document.getElementById(this.index).style.backgroundColor = "yellow";
else if(sum%6 == 3)
	document.getElementById(this.index).style.backgroundColor = "green";
else if(sum%6 == 4)
	document.getElementById(this.index).style.backgroundColor = "purple";
else
	document.getElementById(this.index).style.backgroundColor = "red";

原始颜色为红色点击第一次背景色变为funchsia->blue->yellow->green->purple->red;

最终结果：

image

java, css, javascript, html
本文由作者按照 CC BY 4.0 进行授权