JavaScript implements the nine-grid click color change effect

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

Recommend

Docker builds jenkins+maven code building and deployment platform

Table of contents Docker Basic Concepts Docker in...

HTML line spacing setting methods and problems

To set the line spacing of <p></p>, us...

Detailed explanation of how to use Tomcat Native to improve Tomcat IO efficiency

Table of contents Introduction How to connect to ...

Parameters to make iframe transparent

<iframe src="./ads_top_tian.html" all...

MySQL Practical Experience of Using Insert Statement

Table of contents 1. Several syntaxes of Insert 1...

Application of mapState idea in vuex

Table of contents 1. Map method 2. Application ba...

Specific use of node.js global variables

Global Object All modules can be called global: r...

Reduce memory and CPU usage by optimizing web pages

Some web pages may not look large but may be very ...

Vue implements a draggable tree structure diagram

Table of contents Vue recursive component drag ev...

Detailed explanation of Linux using ss command combined with zabbix to monitor socket

Table of contents Preface 1. ss command 2. Overal...

Raspberry Pi msmtp and mutt installation and configuration tutorial

1. Install mutt sudo apt-get install mutt 2. Inst...

How to install ZSH terminal in CentOS 7.x

1. Install basic components First, execute the yu...

Detailed View of Hidden Columns in MySQL

Table of contents 1. Primary key exists 2. No pri...

A detailed explanation of the subtle differences between Readonly and Disabled

Readonly and Disabled both prevent users from chan...

4 solutions to CSS browser compatibility issues

Front-end is a tough job, not only because techno...