JavaScript implements the nine-grid click color change effect

This article shares the specific code of JavaScript to achieve the color change effect of the nine-grid click for your reference. The specific content is as follows

Complete the nine-grid layout and change the background color of any grid by clicking on it.

First, use the table to complete the nine-square grid framework:

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

Set the Jiugong grid style:

<style>
        table{
            height: 600px;
            width: 600px;
            border-spacing: 0;
        }
        td{
            margin: 0;
            border:1px solid red;
        }

</style>

Finally, in order to achieve the effect that each square has a click, add an onclick attribute to each td and reference the object itself through this:

<table>
    <tr>
        <td onclick="change(this)"></td>
        <td onclick="change(this)"></td>
        <td onclick="change(this)"></td>
    </tr>
    <tr>
        <td onclick="change(this)"></td>
        <td onclick="change(this)"></td>
        <td onclick="change(this)"></td>
    </tr>
    <tr>
        <td onclick="change(this)"></td>
        <td onclick="change(this)"></td>
        <td onclick="change(this)"></td>
    </tr>
</table>

Again I have tried setting all click events via CSS before, like this:

<style>
        td{
            onclick:change(this);
        }

</style>

But it can't be used, and it's still a question.

Finally, the most important JS code part uses Math.random()*256 to generate a random number between 0 and 256, then uses parseInt() to convert the type into an integer, and sets the background color through ".style.backgroundColor":

function change(a) {
         var randomNum = parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256);
         a.style.backgroundColor="rgb("+randomNum+")";
     }

The complete code is as follows:

Table version:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            height: 600px;
            width: 600px;
            border-spacing: 0;
        }
        td{
            margin: 0;
            border:1px solid red;
        }

    </style>
</head>
<body>
 <!--Use front-end knowledge to realize the nine-grid layout, click any grid to randomly change the grid background color-->
<table>
    <tr>
        <td onclick="change(this)"></td>
        <td onclick="change(this)"></td>
        <td onclick="change(this)"></td>
    </tr>
    <tr>
        <td onclick="change(this)"></td>
        <td onclick="change(this)"></td>
        <td onclick="change(this)"></td>
    </tr>
    <tr>
        <td onclick="change(this)"></td>
        <td onclick="change(this)"></td>
        <td onclick="change(this)"></td>
    </tr>
</table>
 <script>
     function change(emle) {
         console.log("1");
         var randomNum = parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256);
         console.log(randomNum);
         emle.style.backgroundColor="rgb("+randomNum+")";

     }
 </script>
</body>
</html>

Div version:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box{
            margin:0 auto;
            width: 306px;
            height: 306px;
            border: 1px solid red;

        }
        #box div{
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            float: left;
        }

    </style>
</head>
<body>
<div id="box">
    <div onclick="changeColor(this)"></div>
    <div onclick="changeColor(this)"></div>
    <div onclick="changeColor(this)"></div>
    <div onclick="changeColor(this)"></div>
    <div onclick="changeColor(this)"></div>
    <div onclick="changeColor(this)"></div>
    <div onclick="changeColor(this)"></div>
    <div onclick="changeColor(this)"></div>
    <div onclick="changeColor(this)"></div>
</div>
<script>
    function changeColor(elem){
        var red = parseInt(Math.random()*256);
        var blue = parseInt(Math.random()*256);
        var green = parseInt(Math.random()*256);
        elem.style.backgroundColor = "rgb("+red+","+blue+","+green+")";
    }
</script>
</body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

AngularJS click to add style, click to change color setting example code
JavaScript implements the color change effect of mouse clicking navigation bar
AngularJS implements button prompts and click color change effects
How to change the color of alternate rows in a javascript table and add mouse movement and click effects
Js realizes that the current click a label changes color and highlights other a labels to restore the original color
Use javascript css to implement GridView row background color alternation, mouse over row color change, click row color change selection
JavaScript based on jQuery, table hover color change/restore, table click color change/restore, click row to select Checkbox

<<: How to configure tomcat server for eclipse and IDEA

>>: MYSQL 5.6 Deployment and monitoring of slave replication

Detailed Example of MySQL InnoDB Locking Mechanism

JavaScript implements the nine-grid click color change effect

Detailed Example of MySQL InnoDB Locking Mechanism

Detailed explanation of Tomcat directory structure

Mount the disk in a directory under Ubuntu 18.04

Practical Optimization of MySQL Paging Limit

Common commands for mysql authorization, startup, and service startup

Solve the problem of running jupyter notebook on the server

Methods for backing up Windows server files locally, Windows server data backup solutions

Causes and solutions for cross-domain issues in Ajax requests

mysql5.7.19 zip detailed installation process and configuration

MySQL InnoDB MRR Optimization Guide

Recommend

HTML table markup tutorial (9): cell spacing attribute CELLSPACING

How to install and use Server-U 14 version

Example of using rem to replace px in vue project

MySQL database master-slave replication and read-write separation

JavaScript data flattening detailed explanation

How to deploy MySQL and Redis services using Docker

Detailed steps to install the NERDTree plugin in Vim on Ubuntu

JavaScript implements password box verification information

Detailed explanation of the meaning of N and M in the MySQL data type DECIMAL(N,M)

Detailed explanation of Mysql 5.7.18 installation method and the process of starting MySQL service

js realizes the function of clicking to switch cards

Detailed explanation of the process of troubleshooting the cause of high CPU usage under Linux

Detailed explanation of MySQL stored procedures, cursors, and transaction examples

Definition and function of zoom:1 attribute in CSS

Vue uses el-tree lazy loading to implement the add, delete, modify and query functions