当前位置：网站首页>使用js实现点击事件

使用js实现点击事件

2022-07-21 15:41:00 【51CTO】

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

效果如下：

使用js实现点击事件_点击事件

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

①使用css文件：

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

写入如下代码：

       
       td{
       
   width:200px;
       
    height:200px;
       
     font-size: 25px;
       
     border: 1px solid black;
       
     font-family: 楷体;
       
     background-color: red;
       
     color: white;
       
}
      
1.
2.
3.
4.
5.
6.
7.
8.
9.

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

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

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

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

效果如下：

使用js实现点击事件_javascript_02

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

使用js实现点击事件_html_03

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

使用js实现点击事件_java_04

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

       
       <
       
       script 
       
       type=
       
       "text/javascript"
       
       >
       
       window.
       
       οnlοad
       
       =
       
       function(){
       
       var 
       
       tdNodes 
       
       = 
       
       document.
       
       getElementsByTagName(
       
       "td");
       
       for(
       
       var 
       
       i 
       
       =
       
       0;
       
       i
       
       <
       
       tdNodes.
       
       length;
       
       i
       
       ++){
       
       tdNodes[
       
       i].
       
       index 
       
       = 
       
       i 
       
       + 
       
       1;
       
       tdNodes[
       
       i].
       
       onclick 
       
       = 
       
       function(){
       
      }
       
    }
       
  }
       
       </
       
       script
       
       >
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

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

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

       
       var sum =0;
      
1.

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

       
       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";
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.