位置:首页 » 技术 » 用纯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-

最新文章
  • 提供MTGOX帐户美元收购服务

    看到有人充值的,没有人收购怎么行? 收购mtgox美元,按汇率收,绝对比你提现要快,还省手续费 最适合矿工了,你到mtgox高价卖了,把刀子卖给我,你好,我好,大家好,比贱卖BTC给二手商强多了. 淘宝或支付宝担保交易,相当于mtgox实时提现啊. 有意联系企鹅7陆1壹1贰4零 --cut--

  • 最近你们用 Chrome 扩展有没有遇到不能启动的问题

    最近常用的两个 Chrome 扩展都遇到了不能启动的问题,没法正常使用,你们也是这样吗?版本号 50.0.2661.94 (64-bit) --cut-- Gua在2016-05-10 10:39:00回答到: 没 lslqtz在2016-05-10 10:39:00回答到: 没,不过我的 chrome 容易丢失 cookie ,就是重开时登录状态全部没掉,要多开 n 次..应该是 bug . microka在2016-05-10 10:39:00回答到: @lslqtz 我 Chrome 的

  • 选择一段东西(时间/距离等)的样式

    想了好久没想出来好的展示形式-- 针对这方面的东西也比较少... 现在是需要选择一个区间 [1,11] 不知道怎么做好了@@ 各种求建议 最好有 html 方案@@ (砍手! --cut-- road2stat在2012-07-07 01:50:2回答到: http://bl.ocks.org/1667367

  • 分析水墨效果图片后期处理 分析水墨效果图片后期处理

    水墨写意画"书贵于意,表而非形".水墨写意摄影也崇尚脱离现实,讲究飘逸虚缈的笔墨趣味,追求形似神似的自我艺术境界.作为一种独特的艺术形式,将水墨写意引入摄影肯定是跨界的艺术行为,虽无师可法,无径可途,也要遵循画意摄影宗师们的理论:"画大于摄,摄大于做,意大于画". 写意后期已有多种流行方法.但不想重复别人,他人方法其实不适合我的思想."心中有画,画从心出"只有自己的方法,才能写出自己的内心. 后期PS是枯燥的,学步骤不如思路,讲方法不如讲想法.

  • photoshop怎么制做条形码 photoshop怎么制做条形码

    1.点击"文件"菜单中的"新建,输入图像的名称为"条形码",把图像的"宽度"设置为250像素;"高度"设置为150像素;图像"模式"设置为"RGB颜色". 2.执行"滤镜"--"杂色"--"添加杂色",设置"数量"为400%;"分布"为"平均分布";勾选&qu

  • 个人委托书格式 三篇

    个人委托书一 委托人: 性别: 身份证号: 被委托人: 性别: 身份证编号: 本人工作繁忙,不能亲自办理XXX的相关手续,特委托____________作为我的合法代理人,全权代表我办理相关事项, 对委托人在办理上述事项过程中所签署的有关文件,我均予以认可,并承担相应的法律责任. 委托期限:自签字之日起至上述事项办完为止. 委托人: 年 月 日 个人委托书二 委托人:姓名__________性别___年龄____身份证编号 受托人:姓名__________性别___年龄____身份证编号 兹委托

  • 24节气"立春" 揭开春之幕 24节气"立春" 揭开春之幕

    二月四日是立春.立春是一年中的第一个节气,"立"开始之意,立春揭开了春天的序幕,表示万物复苏的春季的开始.此刻"嫩如金色软如丝"的垂柳芽苞,泥土中跃跃而试的小草,正等待着"春风吹又生",而"律回岁晚冰霜少,春到人间草木知",形象地反映出立春时节的自然特色.随着立春的到来,人们明显地感觉到白天渐长,太阳也暖和多了,气温.日照.降水也趋于上升和增多.人们按旧历习俗开始"迎春",我国的台湾还将立春这一天定为&qu

  • Photoshop调出新娘外景照片怀旧复古效果 Photoshop调出新娘外景照片怀旧复古效果

    大家好,这里吖清是也,这个色调的灵感来自于原图在ps软件中的缩略图,看起来比较有种复古感觉,然后就凭感觉做了这个调色,个人感觉还不错.本人没有系统学过,所以对调色了解不多,望多多指教. 效果君 下面是原图 教程开始:第一步:打开图片,这个不用我说了吧 第二步:复制一层,习惯成自然,这个习惯是个好习惯. 第三步:再复制一层,然后点击通道面板,选择绿色通道,ctrl+A键全选--ctrl+C键复制 第四步:点击蓝通道,ctrl+V粘贴.点击通道上面的RGB复合通道,回到图层面板. 第五步:给修改后的

  • 粽香端午节 WPS最新端午模板送祝福 粽香端午节 WPS最新端午模板送祝福

    2011年6月1日,端午节降至,WPS将为大家奉上精选模板,帮助大家将最快的祝福送给身边的亲朋好友.据悉,近一周的时间,端午节模版已突破下载两万次,不管是在校学生,还是商务需要的节日卡片制作,WPS推荐的端午节模板都可以满足其需求. 用户只需登录WPS Office官网模板下载频道http://www.wps.cn/download/ ,在搜索框输入"端午"就可以下载到多种端午模板.

  • 描写竹子的好句好段

    1.竹多么洁净呀!竹美丽可爱.那一簇簇.一笼笼.一丛丛的竹,主干是那么笔直,挺拔,一点也不扭曲,叶有窄有宽,窄的最为好,好想是柳树细长的叶子,又像一道道浓浓的眉毛.每当风轻轻吹拂,竹林便响起"沙沙沙沙"的声音,竹叶起伏,随风摆动,好像一个个顽童正在说着悄悄话. 2.春天,万物复苏.一声春雷,唤醒了春笋.他们冲破泥土,掀翻石块,克服了重重的困难,一个一个从地里冒出来.春笋裹着浅褐色的外衣,头上还戴着一顶顶缀有黄色穗子的帽子,就像一个个嫩生生的娃娃,可爱极了.他们迎着春风,贪婪的吸吮着春天

热门推荐
  • 孕妇便秘怎么办_3类食物缓解孕妇便秘 孕妇便秘怎么办_3类食物缓解孕妇便秘 便秘是困扰着很多孕妈妈们的问题之一,为了宝宝的健康,很多孕妈妈们不敢吃药却又饱受便秘的困扰.孕妇便秘到底该怎么办呢?其实,孕妇便秘可以通过食疗来解决的. 一.治疗便秘小妙招--美味粥品 如果你正饱受孕期便秘的痛苦,不妨试试以下这几款美味粥品: 1.芝麻粥: 黑芝麻炒热研碎,每次30克,同粳米100克煮粥,适用于身体虚弱.头晕耳鸣的孕妇; 2.柏子仁粥: 将柏子仁30克洗净去杂捣烂,加粳米100克煮粥,服时兑入蜂蜜适量.适用于患有心悸.失眠的孕妇;无花果粥无花果30克.粳米100克.先将米加水煮沸
  • 《QQ飞车》12月第三周整点在线活动详解 《QQ飞车》12月第三周整点在线活动详解 QQ飞车12月19日整点在线几点开始?qq飞车12月第三周整点在线什么时候开始?QQ飞车多倍狂欢乐不停,海量点券免费领!我们每周都会为各位玩家准备丰富的回馈活动,不要错过哦!本周周末在线最高可获得7500点券,周六有全服六倍活动等你来,周日更有全服四倍活动一起乐! QQ飞车十二月第三周活动详解 六倍经验活动解析 在线可获取点劵合集 整点在线活动详解 老玩家回馈礼包介绍 活动时间:12月19日-12月20日15点-16点 活动奖励: 20级以下玩家:200个幸运币.1草莓 20-99级玩家:250
  • 爱豆怎么看明星上微博? 爱豆怎么看明星上微博? 爱豆怎么看明星上微博?爱豆看明星上微博方法.爱豆是中国第一粉丝娱乐平台,为数千万粉丝提供最优质的追星体验.在爱豆中你可以看自己喜欢的明星上微博,那么爱豆怎么看明星上微博?让小编告诉大家爱豆看明星上微博方法吧! Android版iPhone版PC版iPad版 1.用户进入达人页面后,就可以选择想要查看的好友 2.进入个人主页后,点击右方的微博按钮 3.点击之后,就可以查看对方的微博了
  • 孕妇不能吃的调料有哪些 孕妇不能吃的调料有哪些 第一种:过多的盐. 盐分摄入过多,会导致孕妇晚期出现浮肿,可见足踝及小腿皮肤绷紧光亮,用手按压出现凹陷,长时间站立行走.中午不午睡则更加严重.这是因为孕妇体内内分泌变化,导致水潴留;同时增大的子宫压迫下肢静脉,使血液回流受阻,下肢出现浮肿. 第二种:酱油. 酱油中含有18%的盐,孕妇在计算盐的摄入量时要把酱油计算在内.同时酱油中含有防腐剂和色素,应该尽量少吃. 第三种:辣椒. 辣椒是一种营养成分丰富的蔬菜,尤其含有大量的维生素,适量吃辣椒对人摄取全面的营养成分有好处.但辣椒会刺激肠胃.引起便秘.
  • QQ For Mac 4.2.1更新了什么 QQ For Mac 4.2.1更新了什么 QQ For Mac 4.2.1更新了什么?今天,腾讯发布了QQ For Mac 4.2.1正式版.其实这次更新中新增的功能在之前的4.2.0体验版中就已经公开测试过了,包括但不仅限于截图添加马赛克.多人语音视频通话.本地群文件查看窗口等.Mac用户们可以进行下载升级. 更新内容: -截屏体验升级,新增马赛克和标签工具 -群新增多人音视频通话,屏幕分享功能 -群增加本地群文件查看窗口,文件支持直接发送上传 -双人音视频通话界面升级,优化屏幕分享功能 -群消息提醒设置项同PC QQ同步 -解决其他
  • 海贼王漫画757分析:乌索普的新技能千里眼 海贼王漫画757分析:乌索普的新技能千里眼 一.关于扉页消失的城镇,几种可能:海狗带错地方了;自然因素:海底火山.白龙.类似发生在加亚岛的现象;人为因素:海王类袭击.人类所为;这种海兽群居地的消失可能会给鱼人岛的毁灭带来启发. 另外欢迎大家加入我们动漫漫画讨论群的QQ群:55214438,和众多漫迷一起讨论交流各种动漫漫画的剧情哦,一起体会动漫带来的感动.热血.激情,创造一个和谐的动漫大家庭. 二.德岛篇迈向了最终局面:德岛的战场不会向更大的场面发展了,很多对决也确定下来;从下一话开始,局势全部向不利于小唐方面发展.桑尼号那边山治一行人不