位置:首页 » 技术 » 用纯js打造拾色器无法实现循环点击onclick

用纯js打造拾色器无法实现循环点击onclick

日期:2015-09-01 阅读:0num
Advertisement

用纯js制作拾色器无法实现循环点击onclick
网上是有很多拾色器代码,但是我是新手,想用纯js制作拾色器,代码如下。
问题是我如果一个一个触发onclick事件内容输出没有问题,但是假如for语句,就提示undefined

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#container{
width: 204px;
height: 306px;
border: 1px;
}
.row{
width: 100%;
height: 17px;
}
.kuai{
background: #009966;
width: 15px;
height: 15px;
border: 1px solid #ffffff;
float: left;
}
</style>
</head>
<body>
<div id="container">
</div>
</body>
<script>
function into()
{
for(var i=0;i<18;i++)
{
crow();
}
}
function cdiv(className)
{
var div=document.createElement('div');
div.className=className;
return div;
}
function crow()
{
var row=document.getElementById('container').appendChild(cdiv('row'));
for(var i=0;i<12;i++)
{
row.appendChild(cdiv("kuai"));
}
}

function get_color()
{
var a =new Array();
a[0]="00"; a[1]="33"; a[2]="66";
a[3]="99"; a[4]="cc"; a[5]="ff";
var b=null;
var d=new Array();
var m=0;
var h=0;
for(var i=0;i<6;i++)
{
for(var j=0;j<6;j++)
{
for(var k=0;k<6;k++)
{
b=a[i]+a[j]+a[k];
document.getElementsByClassName('kuai')[m].style.background="#"+b;
d[h]=b;
m=m+1;
h=h+1;
}
}
}

/* for(var n=0;n<216;n++){
document.getElementsByClassName('kuai')[n].onclick=function(){alert(d[n])};
}
*/
document.getElementsByClassName('kuai')[1].onclick=function(){alert(d[1])};
}
into();
get_color();
</script>
</html>

--cut--

for(var n=0;n<216;n++){        document.getElementsByClassName('kuai')[n].onclick = function(i) {                    return function() {//返回一个函数                    alert(d[i]);             }             }(n);    };

function(n)是形参,最后的(n)就是传实参,类似

function method(i){        alert(i);    }method(n);
相关文章
  • 用纯js打造拾色器无法实现循环点击onclick

    用纯js制作拾色器无法实现循环点击onclick 网上是有很多拾色器代码,但是我是新手,想用纯js制作拾色器,代码如下. 问题是我如果一个一个触发onclick事件内容输出没有问题,但是假如for语句,就提示undefined <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #container{

  • JQuery 拾色器插件发布-jquery.icolor.js JQuery 拾色器插件发布-jquery.icolor.js

    以前我一直用的那个(eyecon.ro) 功能完整也简易,但是不尽符合上面的要求,于是 google了N下,结果没找到现成的jquery拾色器插件很好的支持以下功能: 简单易用,仅显示常用的那些色块给用户选择,另外提供一个输入框方便用户输入自定义的色值 于是我写了icolor这个插件,除了支持上面的要求,还有别的一些特性如下: 1,默认提供的色值为"常用的浏览器安全的色值".相当于整合了下面最后一个prototype版本的颜色拾取器.关于浏览器安全色值,可参考维基文档http://en

  • JS实现的网页上的颜色拾色器

    使用Js代码编写一个网页上用的颜色拾色器,也就是选择颜色用的,用鼠标单击任意颜色块,将弹出颜色值,当你想使用某种颜色而不知道颜色值的时候,用这个小特效可以告诉你颜色值是多少,比较方便. 颜色拾色器 红 绿 蓝 灰 用鼠标单击下面的颜色块,将弹出颜色值 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JavaScript奇效实例012-网页拾色器

    JavaScript特效实例012-网页拾色器 实例012 网页拾色器 实例说明 在网站中经常需要用户自定义颜色来显示某些信息.这可以在网页添加一个拾色器来实现. 技术要点 在本实例中仅使用216种浏览器安全的颜色,即所谓的Netscape色块.这216种颜色分别代表0.51.102.153.204这5个颜色值以及每一种原色(即红.绿.蓝).这些十进制数值对应的十六进制数分别为0x00.0x33.0x66.0x99.0xCC和0xFF.在HTML的颜色属性中黑色是#000000,纯红色是#FF0

  • jQuery soColorPacker 网页拾色器

    未采用生僻的jquery特性,能兼容jquery1.2.6以上所有版本 实例预览 引入文件 <link type="text/css" rel="stylesheet" media="all" href="soColorPacker/css/style.css" /> <script type="text/javascript" src="jquery1.8.0.min.js&q

  • iOS软件iWheelColor:装在口袋里的拾色器 iOS软件iWheelColor:装在口袋里的拾色器

    颜色代码对于程序员和网页设计师来说非常重要,但如果不是在电脑旁,那么多的颜色代码一定不好记,也不容易查看效果.所以就有贴心的国外开发商推出了一款名为iWheelColor的辅助软件. iWheelColor 点击进入下载界面 iWheelColor iWheelColor是一款拾色器软件,它可以让平面设计师.程序员和网页设计师等工作者非常直观和正确的找到颜色组合.我们在软件的主界面上可 以看到一个色彩轮,可以随意用手去触摸滑动或是改变.iWheelColor既支持2种颜色的互补,也支持三个颜色的

  • Linux下拾色器:功能强大的gpick Linux下拾色器:功能强大的gpick

    以往在 Linux 下要拾个颜色啥的我一直用 gcolor2 应付着.不过话说回来,gcolor2 的功能实在有些弱.现在有了功能更加强大的 gpick,gcolor2 可以正式"下岗"咯. 且让我们来看看 gpick 有些啥好功能: 在放大的屏幕区域中,按空格键即可快速取色: 为拾取的颜色自动命名: 能够将拾取的颜色以不同格式拷贝到剪贴板,目前包括十六进制.RGB 及 HSL: 可以将拾取的颜色导出为调色板,支持 gpl.ase.mtl 等格式,以供 GIMP.Inkscape 等程

  • HTML 拾色器

    获取 暗/明 渐变颜色效果.

  • 纯JS制造移动端触屏滑动图片集 纯JS制造移动端触屏滑动图片集

    纯JS打造移动端触屏滑动图片集 效果图PC端: 支持点击浏览 支持方向键浏览 支持图片延迟加载 支持自动定时加载 效果图手机端: 支持自动定时加载 支持图片延迟加载 支持点击浏览 支持触屏滑动浏览 HTML代码片段: <div class="slide"> <ul></ul> <div class="dot"></div> </div> CSS代码片段: .slide {position: re

  • html5使用Audio标签打造音乐播放器的例子

    html5使用Audio标签打造音乐播放器不是什么难事了以前用flash实现现在直接使用html即可实现音乐播放器了,下面我们就一起来看看吧,希望例子能够对各位带来帮助. 这个是我们今天的重头戏,也是一切的根源,使用HTML5的audio标签去打造播放器,在用这个之前我们需要了解些audio标签的基本用法. 你可以这样: <audio controls> <source src="horse.ogg" type="audio/ogg"> &l

  • HTML5开发学习(1):使用aduio标签打造音乐播放器 HTML5开发学习(1):使用aduio标签打造音乐播放器

    关于html5的炒作已经有一段时间了,小弟亦是个跟风之人,对该新鲜事物也充满好奇和期待.本文为该系列(HTML5尝鲜)第一节,先以一个简单的demo开胃,希望能勾起各位同学对html5的兴趣和关注. html5里有一个新标签audio,该标签用以定义声音,比如音乐或其他音频流. 既然audio标签可以播放音频,那我们可以不再使用flash.wmp等其他任何第三方组件,轻而易举的使用纯html来打造一个音乐播放器. 例子: <audio src="someaudio.MP3">

  • Oculus + Node.js + Three.js 打造VR世界 Oculus + Node.js + Three.js 打造VR世界

    Oculus + Node.js + Three.js 打造VR世界 本作品采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可.© 2015 Phodal Huang ... 待我代码编成,娶你为妻可好 @花仲马 Oculus Rift 是一款为电子游戏设计的头戴式显示器.这是一款虚拟现实设备.这款设备很可能改变未来人们游戏的方式. 周五Hackday Showcase的时候,突然有了点小灵感,便将闲置在公司的Oculus DK2借回家了--已经都是灰尘了~~. 在尝试一个晚上的开

  • 纯js+css实现webApp轮播手滑成效

    纯js+css实现webApp轮播手滑效果 网上发现的一个好的前端资源,给大家分享一下---纯js实现的淘宝首页轮播手滑前端特效.下面是我的源代码:用到的是freemarker框架 1.css样式代码 .addWrap { position: relative; width: 100%; background: #fff; margin: 0; padding: 0; margin-top: -4px; } .addWrap .swipe { overflow: hidden; visibili

  • 使用js写一个播放器,该怎么解决 使用js写一个播放器,该怎么解决

    使用js写一个播放器 请问一下qq音乐的这个网页播放器是怎么实现的,具体是使用什么.Flash还是纯JS,还是JQUERY 还是别的什么. js 播放器 qq音乐 分享到: 更多 ------解决方案-------------------- <embed src="1.mp3" style="display: block; text-align: center;" autostart="1" loop="-1" widt

  • [调查]JS模块加载器:seaJS VS requireJS

    Two JavaScript file and module loader seaJS: http://seajs.org/ requireJS: http://requirejs.org/ 你们会选哪个?为何? -- 我只是抛出问题,外带逐楼送分! --cut-- AlloVince在2013-02-25 12:07:1回答到: 两个都简单用过,从用者的角度来说 1. 文档丰富程度上,requireJS远远好于seaJS,就拿最简单的加载jQuery和jQuery插件这回事,虽然两者的实现方法

  • Photoshop打造复古色人像怀旧照片效果 Photoshop打造复古色人像怀旧照片效果

    本教程主要用Photoshop打造复古色人像怀旧照片效果,随着社会科技的进步,摄影爱好者大多数都用上了数码相机拍照,但在十年前摄影的的风格却一直令人难以忘怀,因为我们看久了新时代的拍摄风格,反而怀旧照片更耐人寻味! 效果对比图: 一.打开图片,复制背景层,去色(也可以不去色,但本例小编要把它调成复古的颜色) 二. 新建一个图层,并填充50%的灰色(在选择菜单下的填充哦!如下图),模式更改为叠加 三.添加杂色.如果你是黑白效果的图片,就将下面的单色选项勾选上. 四.继续对此图层进行高斯模糊,参数视

  • flash混色器面板教程 flash混色器面板教程

    混色器面板是Flash中用于色彩处理的一个重要面板,熟练地使用该面板,可以帮助用户快速地完成色彩的填充,编辑出色彩丰富的图形.在该面板中可以对线条和图形的颜色进行高级设置,具体分为以下几种类型. 一.无填充色 无填充色是指图形的填充区域没有颜色内容,在面板中只能设置线条的色彩.如图1所示. 图1 二.纯色填充 纯色填充是Flash 8默认的色彩填充模式,也是最常用的一种色彩填充模式,用于完成对图形色彩的填充,如图2所示. 图2 三.线性渐变填充 线性渐变填充是从图形的一边向另一边进行逐渐变化色彩

  • 仿WINDOW的纯JS超酷颜色选择器

    仿WINDOW的纯JS超酷颜色选择器-破洛洛 选中色彩 恢复 帮助: 选色技巧 基色: 亮度: 120 代码: 确定 取消 仿WINDOW的纯JS超酷颜色选择器HBcms改良版本 超酷效果:同window.office.各种网页编辑器的颜色选择器类似 精巧实用:整个程序只有一个文件,9K,很方便整合到表单中 改良内容: 1.增加传递颜色的功能.可以很方便的获取原来的颜色. 2.增加了双击颜色返回颜色代码并关闭窗口 3.色彩亮度颜色单击,返回颜色代码并关闭窗口 4.增加了使用帮助 5.增加了原颜色

  • jquery库文件略庞大用纯js替换jquery的方法教程

    jquery库文件略庞大,在某些情况下,需要尽量减少加载的文件(文件大小),需要用纯js来编写效果 $('#layer') document.getElementById('layer') $('#layer span') var layer = document.getElementById('layer'); var span = layer.getElementsByTagName('span'); $('#inner').parent() document.getElementById(

  • 纯js实现重发验证码按钮倒数功能

    这篇文章主要介绍了纯js实现重发验证码按钮倒数功能,本文整理了两个实现代码,需要的朋友可以参考下 代码一: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

最新文章
  • 这样的闹钟那里有的卖? 这样的闹钟那里有的卖?

    很简洁,简单. 很喜欢,想买一个. --cut-- gucheen在2012-07-12 14:32:0回答到: 是木头钟吗? Coda在2012-07-12 14:42:2回答到: 晚上会很漂漂吧~ caniggia3在2012-07-12 14:43:1回答到: 凡客就有-- zxy在2012-07-12 14:47:5回答到: 自己DIY一个吧 zealot在2012-07-12 14:56:5回答到: 我买过: http://detail.tmall.com/item.htm?id=13

  • [杭州 &amp; 上海] 速贷邦寻成熟的产品、设计、开发、运营伙伴,一起打造新平台。

    速贷邦公司成立于2010年9月,是中国领先的一对一投融资服务商,总部位于杭州,目前在上海.宁波.舟山.台州等地设立分公司,2012年4月,应温州市政府邀请,首批入驻温州民间借贷登记服务中心. 基于多年线下融资服务的经验和人脉积累,我们即将推出线上融资平台,现诚邀以下伙伴加入,所有人员编制在上海公司: 1.平台设计 / 1-2人 / 工作地:杭州 / 薪资范围:12-15K/月: 职责:负责平台功能原形的设计,与UI协调两个系统的实现: 要求:有互联网产品设计经验,对金融产品有相应了解: 2.UI

  • 郝笛:身家过亿照穿2元一双的鞋子 郝笛:身家过亿照穿2元一双的鞋子

    郝笛:身家过亿照穿2元一双的鞋子 郝笛在天津某工地查看刚挖出来的"铁疙瘩". "这是清朝咸丰年间,福建宝福局生产的铁钱,因为生产粗糙没有流通使用,就运到天津当炮砂用." 在场的考古专家不屑一顾:"那时都是铜钱,哪里来的铁钱,幼稚."郝笛说:"应该还会有炮弹."专家更是沉默不语,小孩子嘴上无毛,真不知道天高地厚. 本站阅读配图 不料,10分钟之后,居然真的挖出一个直径4厘米的铁炮弹-- 20岁的郝笛已经是全球很多博物馆最资深和权

  • 盘点常见的卸妆误区 盘点常见的卸妆误区

    现在大部分都市女性都会化妆,淡妆或者浓妆也好,卸妆非常重要.不卸妆或者卸妆不正确对肌肤的伤害很大,那么你知道怎么卸妆才正确吗?下面就让我们来看看几大常见的卸妆误区吧! 盘点常见的卸妆误区 忽略二次清洁 不要以为用卸妆产品卸完妆就万事OK了,这样可是大错特错了!其实,卸妆产品最主要的功效还是卸除脸部彩妆及油脂,毛孔深处的灰尘和污垢等还是要靠洗面奶才能清洗干净的.所以只用卸妆产品的懒人想法是不可取的,一定要记得用洗面奶进行二次清洁. 防晒霜.BB霜.隔离霜不用卸妆 很多美眉以为防晒霜.BB霜.隔离霜

  • 2015年7月有哪些电影上映? 2015年7月有哪些电影上映?

    本站影视知识配图 2015年7月电影上映时间表--栀子花开 栀子花开2015基本信息 制片地区:中国大陆 导演:何炅 编剧:罗艳 类型:青春,校园,爱情 主演:安然,王俊凯,李易峰,张慧雯 上映时间:2015年7月10日 策划:彭宇 栀子花开2015电影剧情介绍 丑小鸭女孩陈梓溪(安然饰)偶遇老同学陈子曦(王俊凯饰).陈子曦曾经对陈梓溪表白,但车祸之后记忆全无.陈梓溪的美女闺蜜也爱上陈子曦,但陈子曦却对陈梓溪保持着一份似有似无的暧昧-- 2015年7月电影上映时间表--捉妖记 上映日期: 201

  • 怎么样培养宝宝表达能力?

    2-3岁是儿童语言发展的关键期,5-6岁是儿童语言表达能力明显提高的时期,因此,父母要在这一黄金阶段中抓紧机会,多培养和锻炼孩子的语言表达能力. 一.讲述自己的生活 孩子会学着模仿说任何他们听到的东西,所以当你的宝宝还根本听不懂你说什么的时候,就应该抓住各种机会跟他说话.例如穿衣服时,你可以向孩子讲述你在做的事情:"妈妈现在要给你穿裤子,先伸进左腿,然后再伸进右腿."当孩子长大一些后,这样的解说词可以更丰富一些.要知道,你不仅仅是在教孩子如何说话,更重要的是:你做出的这个榜样告诉了孩子

  • 高手如云总有你的偶像 细数世界第一职业选手 高手如云总有你的偶像 细数世界第一职业选手

    10月8日信息,古人云:"一朝天子一朝臣",而在英雄联盟里是一个版本一个神.召唤师往往一边追求某个版本强悍的英雄一边去膜拜职业战队操作如神的某个选手.而众多职业选手就被冠以了"世界第一"的称号.而这次有幸获得全球总决赛门票16支战队里,又有多少被大家认可的世界第一呢? 世界第一刀妹--Wickd 现任Alliance战队上单选手,擅长英雄是刀锋意志-艾瑞莉亚,未来守护者-杰斯.Wickd与Froggen一直是队友,曾短暂效力SK,后加入CLG.EU.与Froggen

  • 最新生日祝福的留言代码生日快乐

    * * ** ▉▉▉ ____ ▉▉▉ ▉▉▉▉▉▉▉▉▉▉▉▉ ▉▉▉▉▉▉生日▉▉▉▉▉▉ ▉▉▉▉▉▉▉▉▉▉▉ ▉▉▉快乐▉▉▉ ▉▉▉▉▉ ▉▉ --- -- -───────----⺌-*CL集团.康少゛ ! 记 得 永 远 要 幸 福 快 快 乐 幸 福 快 乐︶ ̄ [M][fts=6][ftc=#FCE1EC]*[/ft][/ft][/M] [M][fts=5][ftc=#EF6EA8] *[/ft][/ft][/M] [M][fts=6][ftc=#F16D7E]*[/ft][

  • 宋史·卢多逊传阅读练习及答案

    阅读下面的文言文,完成4-7题. 卢多逊①,怀州河内人.曾祖得一.祖真启皆为邑宰:父亿,字子元,少笃学,以孝悌闻. 多逊,显德初,举进士,解褐秘书郎.集贤校理,迁左拾遗.集贤殿修撰.乾德二年,权知贡举.三年,加兵部郎中.四年,复权知贡举.六年,加史馆修撰.判馆事.开宝二年,车驾征太原,以多逊知太原行府事.移幸常山,又命权知镇州.四年冬,命为翰林学士.六年,使江南还,受诏同修<五代史>,迁中书舍人.参知政事.丁外艰,数日起复视事.会史馆修撰扈蒙请复修时政记,诏多逊专其事,加吏部侍郎. 多逊博涉经

  • 小米全系列移动电源49元、69元、79元选哪个 小米全系列移动电源49元、69元、79元选哪个

    包括今天推出的在内,小米公司总共推出过5200mAh.5000mAh.10000mAh.10400mAh.16000mAh五款移动产品,其中[5200mAh和5000mAh].[10000mAh和10400mAh]可以一个产品线的正常迭代,因此严格上说小米移动电源分为5000mAh.10000mAh和16000mAh三个产品线. 产品线一.5000mAh时小米电源介绍 小米5000mAh新款移动电源 [5200mAh小米电源] 该系列产品是小米公司与2014年推出一款轻便便携款小米电源,采用LG

热门推荐
  • 10年工作经验的程序猿 年薪10万多吗? 10年工作经验的程序猿 年薪10万多吗? 我认识老杨是在2012年,当时,他是公司的技术部的总监,面试的时候,是他问了我一些问题.后来,因为同在一个办公室,老杨人也很随和,到现在2年多时间了,我们也一直保持着联系.平常偶尔大家还会聚下,吃吃饭,唱唱歌. 老杨今年35岁了,做技术出身的,有着10余年的工作经验了.记得老杨说以前他在asp方面比较精通,后来,PHP语言变得主流了,而他则转向了php方面.当时,我感觉他在技术方面非常厉害,问他为什么还能再学一门语言?而他则回答道:"因为计算机语言基本都是相同的."好吧,我现在连基本的
  • 车来网9.9元发动机舱清洗 巧妙切入汽车后市场 车来网9.9元发动机舱清洗 巧妙切入汽车后市场 刚过去的2014年,是汽车后市场最火热的一年.超过一亿的汽车保有量让"买车容易养车难"的痛点愈发凸显,一大批汽车后市场O2O企业如雨后春笋般顺势涌出,然而同质化却较为严重,送洗车.送保养各种优惠,用户的品牌记忆十分模糊. 然而在2015年的春天,却有一家创业公司车来网在武汉.郑州悄然开展了一项颇具新意的推广活动:9.9元发动机舱清洗.这项服务在车主中的好评度非常高,很多车友们在服务后纷纷发朋友圈进行各种晒单,各种赞叹. 由于服务承载能力有限,车来网现在每天只限量发售100份,自活动上线
  • word打不开或发送错误报告怎么办 word打不开或发送错误报告怎么办 经常遇到朋友咨询说,word打不开或者发送错误报告,请教有何方法解决?对此,不同的原因有不同的解决方法,为此小编分享了高手对付这一难题的方法,希望对你解决问题有帮助. word打不开或者发送错误报告 方法一: 这是由于模板出现问题引起的,恢复Normal模板就可以了:1.关闭所有打开的Word文档;2.复制这条命令:%appdata%microsofttemplates3.开始→运行→粘贴上面复制的命令→确定4.在打开的目录下,找到并删除Normal.dot,然后重新运行Word即可. 方法二:
  • 电影一念天堂拍摄地有哪些 电影一念天堂拍摄地有哪些 电影一念天堂拍摄地有哪些 本站影视知识配图 <一念天堂>的取景地和拍摄地在佛山,佛山,简称禅,广东省省辖市,位于广东省中部,地处珠三角腹地,东接广州,南邻中山,历史上是中国天下四聚.四大名镇之一,如今发展为中国先进制造业基地.广东重要的制造业中心并创造其独特的"佛山模式!使"佛山制造"响誉海内外.佛山与广州地缘相连.历史相承.文化同源,是"广佛都市圈"."广佛肇经济圈"."珠三角经济圈"."粤桂
  • 普普通通表格范例 普普通通表格范例 普通表格范例 主要演示以下功能: 包含复选框列.行号列 自定义单元格的渲染 定制表格视图 各种选择模式:单元格.行.复选框 范例源码: var datas = [[1,"张三",24,"Y",new Date(1986,06,09)], [2,"李四",30,"N",new Date(1980,09,13)], [3,"王五",28,"Y",new Date(1982,01,10)]];
  • 重度手游即将“发烧”,社交属性或定生死 重度手游即将“发烧”,社交属性或定生死 在电视剧<平凡的世界>里,人们最简朴的愿望就是从黑面馍到黄面馍,再到白面馍.相比现在的大鱼大肉,简直不可同日而语.而之所以出现这样情况的原因,关键就在于时代的局限性和延伸性.在目前火爆的手游行业,其实也隐藏着类似的暗涌. 在手游发展初期,贪食蛇.推箱子.俄罗斯方块等就带给人们无限乐趣,而随后愤怒的小鸟.植物大战僵尸成为人们的心头好,再之后我叫MT之类的卡牌手游也不能满足玩家日益高涨的游戏热情,于是重度手游终于开始登台. 重度手游即将爆发的缘由就在于其自身的高品质和玩家游戏口味的变迁.而在这场轰