利用div+css实现九宫格,然后用js实现点击每个格子可以随机更改格子(div)的背景颜色
<!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)的背景颜色的更多相关文章
- [ASP.NET] [JS] GridView点击高亮当前选择行,并在点击另一行时恢复上一选择行背景颜色
在ASP.NET中的gridview控件里面可以通过设定其OnRowDataBound事件来进行实现高亮当前行的操作 前端控件的设置: 只要设置好OnRowDataBound属性即可,会自动在.cs文 ...
- 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline ...
- Div+CSS+JQuery实现选项卡,即通过点击不同的li跳转到不同的div中显示不同的内容或者执行不同的操作。
1.代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...
- js控制div样式显示与隐藏,JS通过点击超链接右边(指定位置)显示一个图标
原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...
- IOS中div contenteditable=true无法输入 fastclick.js在点击一个可输入的div时,ios无法正常唤起输入法键盘
原文地址: https://blog.csdn.net/u010377383/article/details/79838562 前言 为了提升移动端click的响应速度,使用了fastclick.js ...
- JS运动学习笔记 -- 任意值的运动框架(高/宽度,背景颜色,文本内容,透明度等)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- (转)div+css 布局经验 - 最简单的 = 最不变形的(原创技巧)
站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...
- DIV+CSS详解
DIV+CSS详解 ✪DIV+CSS"这种叫法其实是一种不准确的叫法 在做笔记的最前面必须先给大家纠正一个错误,就是"DIV+CSS"这种叫法其实是一种不准确的叫法,是国 ...
- div+css 布局经验 - 最简单的 = 最不变形的(原创技巧)
站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...
随机推荐
- 站在Web3.0 理解IPFS是什么
尽管网络上,已经有不少文章讨论IPFS,不过真正讲明白IPFS想做什么的很少,文本尝试站在未来Web3.0的高度来看看IPFS究竟用来解决什么问题. DApp 的缺陷 对区块链有所了解的同学,知道区块 ...
- ibm产品系列架构师技术路线
- 一些重要的k8s概念
1. Pause容器是什么 作为init pod存在,其他pod都会从pause 容器中fork出来 由pause容器管理 pause容器的工作 可知kubernetes的pod抽象基于Linux的n ...
- vue-详情列表偷懒遍历
假如数据格式是这样的: 文案的字段名和数据的字段名完全对应,我们在处理数据的时候,就可以用: 完美:
- mysql 联合表(federated)及视图
1)验证环境 源库:192.168.8.75 centos 7.5 mysql8.3 目标库:192.168.8.68 redhat 6.8 mysql5.7 2)登录源库并创建源表 $ mysql ...
- SQL Server 主键及自增长列的修改
一.对主键的修改 主键值都会带有主键约束,当执行update操作或是其他操作的时候就会受到限制无法修改,解决的方法是:取消主键约束->删掉主键列->插入修改后的主键值. (1)取消主键约束 ...
- week5
本节大纲: 1.模块讲解 2.hashlib and hmac 3.random 4.shelve 5.shutil 6.time and datetime 7.os and sys 8.re 9.x ...
- Android向通讯录添加联系人的一般方法
Android向通讯录添加联系人的一般方法 以一个简单的例子加以说明,记得需要相应的权限: 测试代码,关键的内容就在add函数里面. package zhangphil.demo; import an ...
- 比较爬虫用的语言Python与Go
Python是我比较喜欢的语言,莫名的喜欢,对Python的学习可能起初是敲错了网址开始的,哈哈哈~ 工作的任务从一个网站后台做登录.爬取数据,写入服务器Redis中,同事认为我会用PHP来写,哼!让 ...
- DAY2练习-购物车
print('欢迎访问购物车')money = int(input('为方便购物,请输入您的总资产:')) #输入金钱必须为数字类型shopping_price_list = [{"name ...