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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
// 版本: 1.0 // 日期: 2007/08/01 // 备注: 需要jQuery库 // 参考: Dodo(tableRowCheckboxToggle) 和 softcomplex(tigra_tables) function Kin_Tables( Kin_Table_GetTableMethod, //得到Table的方法 同$()功能 必选参数 Kin_Table_Header_Offset, //从
-
AngularJS实现按钮提示与点击变色效果
本文用angularJS简单实现了一个小的按钮提示,按钮点击后会变色,注意html文件中需要引入jquery.js和angular.js 运行截图: 当点击按钮的时候 按钮的样式改变: css代码: <style type="text/css"> *{margin: 0px;padding: 0px;} .bucSelectedButton{width: 100px;line-height: 30px;text-align: center;position: relativ
-
JavaScript实现鼠标点击导航栏变色特效
废话不多说了,直接给大家贴js实现鼠标点击导航栏变色代码,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head
-
AngularJS点击添加样式、点击变色设置的实例代码
本文介绍了AngularJS点击添加样式.点击变色设置的实例代码,分享给大家,具体如下: 首先解释需求是这样的,有个列表,当你点击哪一行时,哪一行背景变成灰色,在JQ中,大家都知道,这是非常容易的,加一个addClass就行了,那么AngularJS如何实现呢? 下面我们看代码部分 <!doctype html> <html ng-app="a2_11"> <head> <title>添加元素样式</title> <sc
-
用javascript css实现GridView行背景色交替、鼠标划过行变色，点击行变色选中
加上鼠标点击选择(其实只是点击后变个颜色,"选择"这个词在这里不合适),顺便把这个直接应用到GridView上,如果是其他的控件,或者直接的HTML,稍加修改也可以用上,这里仅提供一个思路.虽然GridView使用AlternatingRowStyle提供了交替行背景色的问题,但这个东西用着实在不爽,看它生成到HTML的那个table,那叫一个乱啊. 下面是代码,注释应该还算比较详细,比较适合初学者,可以把下面两个文件的代码直接复制到你的项目中直接执行.最下面有文件的下载地址,也可以直
-
javascript表格隔行变色加鼠标移入移出及点击效果的方法
本文实例讲述了javascript表格隔行变色加鼠标移入移出及点击效果的方法.分享给大家供大家参考.具体分析如下: 表格隔行变色,也是一个提高用户体验的js效果. 效果实现: 表格奇偶行的颜色不一样.这样可以防止用户看数据时串行. 鼠标移入某行时变颜色,移出再变回来.这样可以让用户清楚的知道自己正在看哪一行. 表格点击变色.便于用户选中自己想保留的项. 说明: i%2 每个数和2取模的值,只有0和1两种,这样就可以实现隔行变色的效果 tables_li[i].onoff = 1; 为了实现
-
Js实现当前点击a标签变色突出显示其他a标签回复原色
当一个页面有多个a标签,且点击后会跳转至当前页面,如何实现被点击标签变色突出显示,其他标签回复原色呢? 利用JS可实现: 假设当前页面是"1.aspx" 1. 给a标签ID设值: 复制代码 代码如下: <a href="1.aspx?id=1" id="1" target="_parent">""</a> <a href="1.aspx?id=2" id=&
-
JavaScript实现九宫格点击变色效果
本文实例为大家分享了JavaScript实现九宫格点击变色效果的具体代码,供大家参考,具体内容如下 完成九宫格布局,实现点击任意格子之后改变该格子自身背景颜色. 首先使用表格完成九宫格框架: <table> <tr > <td></td> <td></td> <td></td> </tr> <tr > <td></td> <td></td>
-
输入框点击时边框变色效果的实现方法
实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co
-
JavaScript实现表格快速变色效果代码
本文实例讲述了JavaScript实现表格快速变色效果的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript实现一个极酷的表格特效,表格快速的变色,形成色彩炫丽的效果,第一眼看上去,甚至不像是表格.读者可以通过本代码来研究一下Js的相关特性,了解一些JS编程技巧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-fast-cha-color-codes/ 具体代码如下: <HTML> <HEAD>
-
基于javascript实现九宫格大转盘效果
本文实例为大家分享了js实现幸运抽奖九宫格大转盘效果,供大家参考,具体内容如下 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>九宫格大转盘</title> <style type="text/css"> /*reset*/ *{ padding:0; margin:0} body{ height:
-
JavaScript实现多个重叠层点击切换效果的方法
本文实例讲述了JavaScript实现多个重叠层点击切换效果的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&
-
JavaScript实现九宫格拖拽效果
本文实例为大家分享了JavaScript实现九宫格拖拽效果的具体代码,供大家参考,具体内容如下 关于一些拼图游戏什么的,见人家效果做的不错,参考下别人写的代码,我也尝试着做了个. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="t
-
javascript实现九宫格相加数值相等
本文实例介绍了javascript实现九宫格的对应方法,分享给大家供大家参考,具体内容如下 实现思路: 1.每个格子输入的数值必须为数字: 2.输入数值不能重复: 3.输入数值不能小于1或大于9: 4.数值不能为空: 5.相加方式共8个,分别为横向三个.纵向三个.两条对角线两个值.详情如下: 解释: 以每个格子所标记序号为标识: 横向三个值:0-2,3-4,6-8: 纵向三个值:[0,3,6].[1,4,7].[2,5,8]: 对角线两个值:[0,4,8].[2,4,6] 实现过程: 很简单,