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