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

How to reset MySQL root password under Windows

Today I found that WordPress could not connect to...

Summary of how to use the MySQL authorization command grant

How to use the MySQL authorization command grant:...

Vue implements anchor positioning function

This article example shares the specific code of ...

Use VSCode's Remote-SSH to connect to Linux for remote development

Install Remote-SSH and configure it First open yo...

Linux deb package decompression, modification and other operation methods code examples

For various reasons, sometimes you need to modify...

What does this.parentNode.parentNode (parent node of parent node) mean?

The parent node of the parent node, for example, t...

Solution to transparent font problem after turning on ClearType in IE

The solution to the transparent font problem after...

Detailed explanation of Vue filter implementation and application scenarios

1. Brief Introduction Vue.js allows you to define...

Complete steps to use mock.js in Vue project

Using mock.js in Vue project Development tool sel...

A simple way to build a Docker environment

First, let’s understand what Docker is? Docker is...

MySQL 5.7.21 decompression version installation Navicat database operation tool installation

Installation of MySQL decompression version and N...

Detailed explanation of the command mode in Javascript practice

Table of contents definition structure Examples C...

favico.ico---Website ico icon setting steps

1. Download the successfully generated icon file, ...

How to wrap HTML title attribute

When I was writing a program a few days ago, I wan...

Detailed explanation of CSS child element fixed positioning solution relative to parent element

Basic Concepts Absolute positioning: An element b...