扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript实现九宫格点击变色效果
  • 660

0
分享到

JavaScript实现九宫格点击变色效果

2024-04-02 19:04:59 660人浏览 安东尼
摘要

本文实例为大家分享了javascript实现九宫格点击变色效果的具体代码，供大家参考，具体内容如下 完成九宫格布局，实现点击任意格子之后改变该格子自身背景颜色。 首先使用表格完成九

本文实例为大家分享了javascript实现九宫格点击变色效果的具体代码，供大家参考，具体内容如下

完成九宫格布局，实现点击任意格子之后改变该格子自身背景颜色。

首先使用表格完成九宫格框架：


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

设置九宫格样式：


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

</style>

最后为了达到每一个方块都有点击的效果，给每一个td添加onclick属性，通过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>

再次之前尝试过通过CSS全部设置点击事件，像这样：


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

</style>

但是不能用，目前还是疑点。

最后是最重要的js代码部分，使用Math.random()*256生成0-256之间的随机数，随后使用parseInt()将类型转换成整数，通过“.style.backgroundColor”设置背景颜色：


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

完整代码如下：

table版：


<!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>
 <!--使用前端知识，实现九宫格布局，点击任意格子随机改变格子背景颜色-->
<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版：


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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

--结束END--

本文标题: JavaScript实现九宫格点击变色效果

本文链接: https://lsjlt.com/news/132671.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript实现九宫格点击变色效果
    本文实例为大家分享了JavaScript实现九宫格点击变色效果的具体代码，供大家参考，具体内容如下 完成九宫格布局，实现点击任意格子之后改变该格子自身背景颜色。 首先使用表格完成九...
    99+
    2024-04-02
  • JavaScript实现九宫格拖拽效果
    本文实例为大家分享了JavaScript实现九宫格拖拽效果的具体代码，供大家参考，具体内容如下 关于一些拼图游戏什么的，见人家效果做的不错，参考下别人写的代码，我也尝试着做了个。 &...
    99+
    2024-04-02
  • JavaScript canvas实现九宫格切图效果
    本文实例为大家分享了canvas实现九宫格切图效果的具体代码，供大家参考，具体内容如下 首先页面展示 直接上代码 <!DOCTYPE html> <html ...
    99+
    2024-04-02
  • JavaScript如何实现九宫格拖拽效果
    这篇文章主要介绍“JavaScript如何实现九宫格拖拽效果”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“JavaScript如何实现九宫格拖拽效果”文章能帮助大家解决问题。代码如下：<!DO...
    99+
    2023-07-02
  • Android RecyclerView实现九宫格效果
    RecyclerView更加优化的复用机制和方便实现UI效果，几乎替代Listview和GridView的使用。但是分割线的实现，需要自己继承ItemDecoration来绘制。 效...
    99+
    2024-04-02
  • css如何实现鼠标点击表格变色效果
    这篇文章主要介绍了css如何实现鼠标点击表格变色效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。 在css中，...
    99+
    2024-04-02
  • JavaScript实现九宫格抽奖
    本文实例为大家分享了JavaScript实现九宫格抽奖的具体代码，供大家参考，具体内容如下 看到个抽奖案例，觉得还不错。就自己做了一个简单版本。 点击中间的开始，抽奖就会跑起来，速...
    99+
    2024-04-02
  • 微信小程序实现九宫格效果
    本文实例为大家分享了微信小程序实现九宫格效果的具体代码，供大家参考，具体内容如下 1.九宫格实现示例图： Tips: 说明： 使用 display: -webkit-flex;对...
    99+
    2024-04-02
  • React Native中ListView如何实现九宫格效果
    这篇文章将为大家详细讲解有关React Native中ListView如何实现九宫格效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。ListView是基于ScrollV...
    99+
    2024-04-02
  • javascript实现点击按钮变色
    本文实例为大家分享了javascript实现点击按钮变色的具体代码，供大家参考，具体内容如下 效果如下: 代码如下: 在这个案例中主要用到的是排他思想 html部分 输入我们所需要...
    99+
    2024-04-02
  • 原生JavaScript实现九宫格抽奖
    本文实例为大家分享了JavaScript实现九宫格抽奖 的具体代码，供大家参考，具体内容如下 思路：通过移动背景颜色实现中奖信息，每一个方形元素，需要按顺序排列，加个延时器...
    99+
    2024-04-02
  • 原生JS怎样实现九宫格抽奖效果
    小编给大家分享一下原生JS怎样实现九宫格抽奖效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！效果图：代码如下：<!DOCTYPE html> <html>...
    99+
    2024-04-02
  • javascript如何实现点击按钮变色
    这篇“javascript如何实现点击按钮变色”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“javascript如何实现点击...
    99+
    2023-07-02
  • 小程序怎么实现九宫格心形拼图效果
    这篇文章主要介绍了小程序怎么实现九宫格心形拼图效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇小程序怎么实现九宫格心形拼图效果文章都会有所收获，下面我们一起来看看吧。实现小程序的思路有两个 canvas，一个...
    99+
    2023-06-26
  • JavaScript实现九宫格移动拼图游戏
    本文实例为大家分享了JavaScript实现九宫格移动拼图游戏的具体代码，供大家参考，具体内容如下 效果图： 代码以及详细逻辑： <!doctype html> &...
    99+
    2024-04-02
  • 原生JavaScript怎么实现九宫格抽奖
    本文小编为大家详细介绍“原生JavaScript怎么实现九宫格抽奖”，内容详细，步骤清晰，细节处理妥当，希望这篇“原生JavaScript怎么实现九宫格抽奖”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。思路：通过...
    99+
    2023-07-02
  • JS怎么实现点击目录名变换颜色的效果
    本篇内容主要讲解“JS怎么实现点击目录名变换颜色的效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JS怎么实现点击目录名变换颜色的效果”吧! ...
    99+
    2024-04-02
  • JavaScript如何实现点击出现效果
    本篇内容主要讲解“JavaScript如何实现点击出现效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JavaScript如何实现点击出现效果”吧! ...
    99+
    2024-04-02
  • 在Android app中实现九(n)宫格图片连续滑动效果
     　今天写这篇文章的缘由是前一段时间一个网友在我的博客上面留言，想要实现在GridLayout（相当于九宫格）中点击每项可左右滑动显示该宫格的图片，当该宫格的图片显示...
    99+
    2022-06-06
    图片 动效 app Android
  • javascript怎么实现点击改变按钮颜色
    本篇内容主要讲解“javascript怎么实现点击改变按钮颜色”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“javascript怎么实现点击改变按钮颜色”吧!1. HTML基础首先，我们需要创建...
    99+
    2023-07-06
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作