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

最新文章
  • 怎么给鼠须管输入法的 emoji 表情设置词频呢?

    按照网上的教程使鼠须管的明月拼音可以像osx自带输入法那样输出emoji,但是每次打出有emoji的词都是emoji表情在第一个,如果打"动物"那么前几页全是emoji,这样很不方便啊,怎么设置把emoji放在后面呢? --cut--

  • Linux下搞开发用什么笔记本比较合适?要求可接两个外界显示器!

    Macbook pro retina有两个thunderbolt接口,连接两个显示器是没什么问题,但由于价位比较高,暂时没考虑入手,另外之前用过瓦片式桌面管理器(awesome wm),感觉非常赞,mac下的话基本上没有完美的替代品.除了mac,大家有么有好的推荐? --cut--

  • 养胃食物有哪些 养胃食物有哪些

    现在生活节奏越来越快,很多男士朋友的身体都存在健康隐患,胃病就是常见的疾病之一.我们身边又有哪些养胃的食物能够帮助我们的呢? 养胃的常见食物 青豆 青豆不仅抗癌,还含有不饱和脂肪酸和大豆磷脂,可以保护男人血管弹性,其中含有的膳食纤维,可以帮助男人胃蠕动,促进消化. 莲藕 莲藕除含有大量的碳水化合物外,蛋白质和各种维生素及矿物质的含量也很丰富,民间有"新菜嫩藕胜太医" 之说. 但男人如想让藕成为养胃滋阴.健脾益气的食补佳品,必须把它做熟再吃. 熟藕其性由凉变温,虽然失去消瘀.清热之功,却

  • 有种你爱我 (电影:有种你爱我同名主题曲) 有种你爱我 (电影:有种你爱我同名主题曲)

    有种你爱我 (电影:有种你爱我同名主题曲) 演唱:沙宝亮 词:任浩铭 曲:沙宝亮 看过来 难道你没有见过 我这样靓的帅哥 不一样的风格 想不通 你眼睛里有花火 燃烧了我的寂寞 难道你不想负责 有种你爱我 别那么羞涩 这一次如果是巧合 不去在乎谁对谁错 有种你爱我 允许你羞涩 鼓励你勇敢对我说 我就是你要的快乐 别沉默 不要装你很独特 我要变成一团火 烧掉你的冷漠 别失落 不要怕成老太婆 我已经时刻准备 拯救你随时回来 有种你爱我 别那么羞涩 这一次如果是巧合 不去在乎谁对谁错 有种你爱我 允许你

  • 美图秀秀之瞬间美白教程 美图秀秀之瞬间美白教程

    可能喜欢自拍的童鞋们有时会和Yummy一样,只要兴致来了就会拿起相机或者手机拍上几张,但是即便用了高像素的机子,或者注意了拍摄的技巧,但还是有些问题难以顾及到,比如因为光线不足而导致的皮肤暗淡,我想很多爱漂亮的MM都是无法接受的,怎么办?快用"美图秀秀"来美白一下吧! 图1 快来看看动动鼠标就能美白的效果对比吧: 图2 美了美了,哈哈,而且美白后的脸部一下突显成为整张照片的视觉焦点哦!效果很自然!快来看看怎么做的吧: 只需要在"美图秀秀"软件下,打开待处理的一张照片

  • 耐克否认放弃FuelBand运动手环:仅少量裁员 耐克否认放弃FuelBand运动手环:仅少量裁员

    北京时间4月21日早间消息,针对媒体有关耐克将放弃FuelBand运动手环的报道,该公司上周发表声明称,尽管的确对该业务展开了少量裁员,但不会放弃FuelBand. 耐克称:"Nike+ FuelBand SE仍是我们业务的重要组成部分.我们仍将改进Nike+ FuelBand应用,推出新的METALUXE色彩.在可预见的未来,我们仍将继续销售和支持Nike+ FuelBand SE." 但业内人士认为,这番表态仍然留下了很大的余地,该公司有可能不会再继续推出新一代FuelBand产品

  • 摩托罗拉Moto X+1曝光 或夏季上市 摩托罗拉Moto X+1曝光 或夏季上市

    对于摩托罗拉手机的粉丝而言,Moto X绝对称得上是一款经典机型.这款手机不仅拥有出色的硬件配置,同时还拥有多项定制化服务供消费者随心选择.如今,最新消息显示,Moto X的后续之作--摩托罗拉Moto X+1即将上市. 爆料大神@evleaks日前通过Twitter发布消息称,摩托罗拉Moto X+1即将上市.遗憾的是,@evleaks此次并未透露更多消息.而从以上信息来看,即将上市的摩托罗拉Moto X+1显然是Moto X的后续之作,或者称其为Moto X升级版,预计整体配置相比Moto

  • 班主任工作初体验—九月工作反思

    初为班主任一个月,我是真切体会到了作为一个班主任的不易.从开学前的班级环境布置,到班级名片的设置.植根银行的流通,甚至小到班级卫生的工具如何摆放,都是班主任需要关注和思考的问题.班主任工作看似微不足道,这其中却是千丝万缕.繁琐??隆5?舱?且蛭?姓夥?ldquo;痛苦"的体验,让我体会到了一种特殊的幸福. 一.效仿前辈可行的经验,并不断探索. 在假期的校本培训中,二实小"梦想超市"的施行给我留下了深刻的印象.于是,在本学期的植根银行中,我也加入了"智慧币"

  • 《DNF》10月15日数字解密重置解答 《DNF》10月15日数字解密重置解答

    地下城与勇士数字解密什么时候重置?重置时间是多久?按照活动页面的规则,是应该十月19日对数字解密进行一次重置的,但是今天却没有重置,这是为什么呢?下面请看小编的详细报道. 如图,解密活动每周一次,由于活动是周五开始的,因此解密活动要明天重置,话说策划真是死板,直接定在每周五重置不就行了么,或者今天开启重置. DNF热门攻略推荐 DNF热门资讯 数字解密答案大全 地图改版 国庆套装详解 国庆花篮介绍 14日数字解密答案 DNF热门副本攻略 众神之墓副本详解 超级战舰追击战 安徒恩raid技巧 哥特

  • 如果http请求发生错误,比如is.read()发生阻塞,小弟我希望30s或者60s错误抛出,能做到么

    如果http请求发生异常,比如is.read()发生阻塞,我希望30s或者60s异常抛出,能做到么? 能不能像C#一样设置个timeout j2me里好像没有这个请求头设置 还有 conn = (HttpConnection) Connector.open(URL); is = httpConn.openInputStream(); 也可能发生异常 我希望一段时间内抛出异常 否则可能等N久 能做到么 ------解决方案-------------------- 自己代码里计个时吧. 超时就强制关

热门推荐
  • 在 RS 上订了一张树莓派 2,准备折腾 在 RS 上订了一张树莓派 2,准备折腾 加上税费269.1RMB,免邮费. 看起来2/26能发货? --cut-- situs在2015-02-11 12:27:0回答到: 某宝 255 月底发货 哦也! ipconfiger在2015-02-11 12:35:0回答到: 妈蛋,element14给我电话说是要280 Kilerd在2015-02-11 13:11:0回答到: 年后入一个来玩玩 hualuogeng在2015-02-11 13:17:5回答到: 买过一个B+,玩了一段时间就吃灰了. tony1016在2015-02-1
  • 三十一个月幼儿的能力培养游戏 三十一个月幼儿的能力培养游戏 闻味识物 把切碎的大蒜.生姜.葱及醋等,分别装在几个瓶子里,让宝宝闭上眼睛闻,然后说出每种气味的名字.可锻炼宝宝的嗅觉分辨能力.嗅觉和其他感觉一样,是一种辨别能力. 假设情境 妈妈平时要多和宝宝聊天,寻找各种主题.比如妈妈为宝宝假设几种情境,让宝宝说出解决办法.比方说,如果天下雨了没带伞怎么办?如果出门没带钥匙怎么办? 如果没有毛巾洗脸怎么办?通过讨论让宝宝学会在事情未发生前想好解决的办法.平时教宝宝做未雨绸缪的打算,使宝宝在做事前学会细心考虑,防止类似事情的发生. 做做小帮手 让宝宝练习摆餐桌
  • 荣耀5C闹钟怎么设置? 荣耀5C闹钟怎么设置? 荣耀5C闹钟怎么设置?闹钟是所有智能手机的基本功能,尤其是对于那些上班族来说,它在大家的生活中发挥着重要作用,如果没有闹钟的话很有可能就会迟到,所以现在很多人开始使用手机设置闹钟.那么对于刚刚入手荣耀5C的朋友来说,它的闹钟该怎么设置呢?今天小编就来和大家分享下荣耀5C闹钟设置方法,具体的操作步骤如下. 荣耀5C闹钟设置方法 1.进入到荣耀5C主系统界面,在其界面找到并点击进入到[时钟],进来之后在其下方有一个[新建闹钟]按钮,如下图所示: 2.然后,就会出现时间设置,有两个圆圈数字,左边的圆圈
  • 谷歌眼镜升级导航应用 添加更多新景点介绍 谷歌眼镜升级导航应用 添加更多新景点介绍 Field Trip是谷歌推出的一款手机导航应用程序,它能自动给用户提供周边环境的路线和路况信息.目前Field Trip已经应用在谷歌眼镜上了,这是一款十分好用并且功能强大的出行路线指导工具.这款应用程序的数据主要来源于美国建筑师学会等专业机构. 虽然目前Field Trip在iOS.Android以及谷歌眼镜上均有应用,但很明显开发商奈安蒂克实验室最初就是为谷歌眼镜所打造的.可以想像一下带着谷歌眼镜走在街头的情景,当接近纽约时报广场时,谷歌眼镜的显示屏将会弹出有关纽约时报广场的历史以及介绍等
  • 努比亚“布拉格”唯美诠释国际范儿的轻奢与时尚 努比亚“布拉格”唯美诠释国际范儿的轻奢与时尚 2015年7月8日下午两点(捷克时间),努比亚于捷克布拉格举行了全新My系列新品发布会.作为努比亚产品系列的新晋成员,My系列采用全新的设计语言,以绝佳的操作体验和艺术外形彰显努比亚对美的极致追求.在充满人文气息的布拉格,为世界演绎了一曲科技与艺术的交响乐. My系列的第一款手机取名为"nubia My布拉格".努比亚技术有限公司总裁里强在发布会上说:"当我们希望用一个中文词去表现My系列所散发出的浪漫.文艺和自由等元素时,我们发现,布拉格这个词,似乎就表达了我们想要的一切.