<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>div+css+js实现九宫格点击随机变色</title>

    <script>

        var inner = document.getElementsByClassName("inner");

        function ChangeColor(num){

            var a = parseInt(Math.random()*10);

            var b = parseInt(Math.random()*10);

            var c = parseInt(Math.random()*10);

            var d = parseInt(Math.random()*10);

            var e = parseInt(Math.random()*10);

            var f = parseInt(Math.random()*10);

            var g = "#"+a+b+c+d+e+f;

            inner[num].style.backgroundColor=g;

//            log.innerHTML=g;

//            inner[num].style.backgroundColor="rgb("+parseInt(Math.random()*255)+","+parseInt

//            (Math.random()*255)+","+parseInt(Math.random()*255)+")";

        }

    </script>

    <style>

        #outer{

            width:306px;

        }

        #outer div{

            height:100px;

            width:100px;

            background-color: #ff00ff;

            float: left;

            line-height:100px;

            text-align: center;

            margin-left:2px;

            margin-top:2px;

        }

    </style>

</head>

<body>

<div id="outer">

    <div class="inner" onclick="ChangeColor('0')">1</div>

    <div class="inner" onclick="ChangeColor('1')">2</div>

    <div class="inner" onclick="ChangeColor('2')">3</div>

    <div class="inner" onclick="ChangeColor('3')">4</div>

    <div class="inner" onclick="ChangeColor('4')">5</div>

    <div class="inner" onclick="ChangeColor('5')">6</div>

    <div class="inner" onclick="ChangeColor('6')">7</div>

    <div class="inner" onclick="ChangeColor('7')">8</div>

    <div class="inner" onclick="ChangeColor('8')">9</div>

</div>

<div id="log"></div>

</body>

</html>

　　

利用div+css实现九宫格，然后用js实现点击每个格子可以随机更改格子(div)的背景颜色的更多相关文章

  1. [ASP.NET] [JS] GridView点击高亮当前选择行,并在点击另一行时恢复上一选择行背景颜色

    在ASP.NET中的gridview控件里面可以通过设定其OnRowDataBound事件来进行实现高亮当前行的操作 前端控件的设置: 只要设置好OnRowDataBound属性即可,会自动在.cs文 ...

  2. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  3. Div+CSS+JQuery实现选项卡，即通过点击不同的li跳转到不同的div中显示不同的内容或者执行不同的操作。

    1.代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>   ...

  4. js控制div样式显示与隐藏，JS通过点击超链接右边（指定位置）显示一个图标

    原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...

  5. IOS中div contenteditable=true无法输入 fastclick.js在点击一个可输入的div时，ios无法正常唤起输入法键盘

    原文地址: https://blog.csdn.net/u010377383/article/details/79838562 前言 为了提升移动端click的响应速度,使用了fastclick.js ...

  6. JS运动学习笔记 -- 任意值的运动框架（高/宽度，背景颜色，文本内容，透明度等）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. (转)div+css 布局经验 - 最简单的 = 最不变形的（原创技巧）

    站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...

  8. DIV+CSS详解

    DIV+CSS详解 ✪DIV+CSS"这种叫法其实是一种不准确的叫法 在做笔记的最前面必须先给大家纠正一个错误,就是"DIV+CSS"这种叫法其实是一种不准确的叫法,是国 ...

  9. div+css 布局经验 - 最简单的 = 最不变形的（原创技巧）

    站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...

随机推荐

  1. python小技巧---打印出不同颜色的输出

    在调试代码时打印常常一种颜色,找个东西真的是很难,在一次听金角大王的视频中听到了个方法,也是喀什使用了,本来不打算做记录了,可是稍微有几天不用,还得翻之前的代码,找着也是听麻烦的,现在在这里做个记录 ...

  2. app在admin中显示成我们想要的中文名

    在django的开发中,很多时候我们希望app在admin中显示成我们想要的中文名,而不是显示默认的app_label名称. 比如我们有一个blog应用,在我们的blog app目录下面,默认会生成一 ...

  3. 在chrome上隐藏video的option按钮

    隐藏方法: video::-webkit-media-controls{ overflow:hidden !important;}video::-webkit-media-controls-enclo ...

  4. 论文笔记(Filter Pruning via Geometric Median for Deep Convolutional Neural Networks Acceleration)

    这是CVPR 2019的一篇oral. 预备知识点:Geometric median 几何中位数 \begin{equation}\underset{y \in \mathbb{R}^{n}}{\ar ...

  5. kubeadm安装kubernetes-v1.13.1

    kubeadm安装kubernetes-v1.13.1 centos虚拟机使用kubeadm安装k8s-v1.13.1. 机器信息如下: 主机名 ip master 192.168.239.200 n ...

  6. Java设计模式知识整理

    1.Java设计模式     Java设计模式分为三种类型,分别是:      ①.创建型设计模式:是对对象创建过程的各种问题和解决方案的总结           包括:静态工厂模式.抽象工厂模式.单 ...

  7. 强力推荐！那些你不能错过的 GitHub 插件和工具

    以代码托管平台起家的 GitHub 网站,已然成为全球程序员工作和生活中不可或缺的一份子.从优秀的企业,到优秀的程序员,都将自己最优秀的代码作品存放在这片开源净土里,供彼此学习交流.\\LS--201 ...

  8. sass学习小记

    错误 在sass命令行编译中遇到了一个错误: error E:/前端2/css揭秘/CSS-study/css揭秘/css揭秘.scss (Line 29: Invalid GBK character ...

  9. 将多窗体应用程序改造为仿Chrome形式的简易方法

    需求 在我们现有的ERP应用中,他是基于WinForm设计的,在早期的设计中,我们每打开一个作业,就会新建一个窗口,就像这样: 当我们打开很多的作业时,用户要通过Windows的任务栏慢慢找到,当然, ...

  10. 小白的python之路Linux部分10/27&28

     用户 创建流程模拟 总代码 [root@localhost ~]# vim /etc/passwd #1 [root@localhost ~]# mkdir /home/rose [root@loc ...