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

最新文章
  • swift 官方文档的代码打了一便,着手 IOS 开发力不从心

    = = 求指教接下来..该怎么办...求助各位V友 --cut-- zhaiduo在2014-12-03 20:06:5回答到: 屏幕也得大大大大--大! saxon在2014-12-03 20:10:1回答到: @zhaiduo 哪些控件的属性咋取出来啊 WildCat在2014-12-03 20:29:2回答到: https://www.v2ex.com/t/126738 ayumilove在2014-12-03 20:43:4回答到: @saxon 提取控件的属性,用Outlet吧. 我也

  • 1850 出个 BOSE QC25

    http://trade.dgtle.com/thread-295659-1-1.html --cut--

  • office365 家庭高级版只要 66 元

    价格不错,分享下,顺便想说中国的软件市场没救了亮点在评论 http://faxian.smzdm.com/p/593241 --cut-- regent在2016-05-09 18:27:35回答到: 可以离线使用么? hahasong在2016-05-09 18:27:35回答到: 这玩意是按年付费的,西贝上看到的评论更亮,要是改成按小时收费就更赚钱了 moname在2016-05-09 18:27:35回答到: 请教下,这个是终身可用吗?还是说订阅1年后要续费才可用? scys在2016-0

  • 五四青年节祝福短信

    今年五四青年节不送礼,发条短信送给你.健康快乐长伴你,幸福美满粘着你,还有我要告诉你,财神已经盯上你! 祝愿你五四青年节里,所有的希望都能如愿,所有的梦想都能实现,所有的期待都能出现,所有的付出都能兑现! 一家和和睦睦,一年开开心心,一生快快乐乐,一世平平安安,天天精神百倍,月月喜气扬扬,年年财源广进. 清晨曙光初现,幸福在你身边:中午艳阳高照,微笑在你心间:傍晚日落西山,欢乐随你365天.好运齐来! 第一缕阳光是我对你的深深祝福,夕阳收起的最后一抹嫣红是我对你衷心的问候,在青年节来临之际,送上

  • 医务工作者6月入党申请书

    敬爱的党组织: 作为一名医务工作者,我深深了解我们的宗旨,更深知自己的责任.又作为一名普通的我,从小学到工作,在同学.朋友.老师.领导帮助下,通过学习,为我明确了如何以实际行动争取做一名合格的共产党员.光有一个纯洁的.正确的入党动机仍是不够的,递交了入党申请书,不等于万事大吉,关键是如何在工作中体现党的宗旨,做到全心全意为人民服务. 并不断地学习毛泽东思想.邓小平理论.三个代表.科学发展观,以及十八大的召开,目睹了改革开放以来所取得的成就,中国共产党所领导的特色社会主义立足了我国国情,真正的未老

  • 萝卜如何缓解各种秋冬季不适症状 萝卜如何缓解各种秋冬季不适症状

    一到冬季一些朋友就喜欢吃萝卜,萝卜含有丰富的矿物质,具有健脾消食.清热解毒的功效.秋冬季本就干燥,适当的食用萝卜可以有效的缓解各种秋冬季不适症状. 明代医药学家李时珍曾经这样盛赞萝卜"可生可熟,可菹可酱,可豉可醋,可饭",是"蔬中之最有利益者".确实,萝卜除了是人们喜欢食用的大众化蔬菜外,它的药用价值更令人刮目相看.中医认为,萝卜性平微寒,具有清热解毒.健胃消食.化痰止咳.顺气利尿.生津止渴等作用.现代研究证明,萝卜中含有的糖化酵素和芥子油成分对人体消化功能大有裨益

  • 关于母爱的好词好句

    慈母手中线,游子身上衣.临行密密缝,意恐迟迟归.谁言寸草心,报得三春晖.[唐]孟郊 慈母爱子,非为报也.[汉]刘安 十月胎恩重,三生报答轻.<劝孝歌> 一尺三寸婴,十又八载功.<劝孝歌> 母称儿干卧,儿屎母湿眠.<劝孝歌> 母苦儿未见,儿劳母不安.<劝孝歌> 老母一百岁,常念八十儿.<劝孝歌> 尊前慈母在,浪子不觉寒.<劝孝歌> 万爱千恩百苦,疼我孰知父母?<小儿语> 白头老母遮门啼,挽断衫袖留不止.[唐]韩愈 母仪垂则辉

  • YY歪歪语音一个频道有几个VP? YY歪歪语音一个频道有几个VP?

    一个频道只有三个频道总管理马甲(VP橙色马甲) 如果您在其他频道看到多个(三个以上)VP马甲,这是早期系统错误才导致频道出现多个VP,这种情况建议OW自行下掉多余的副会马甲.

  • 香蕉片的功效与作用 香蕉片的功效与作用

    在生活中有很多人都特别喜欢吃香蕉片,可是大家在吃香蕉片的时候是否了解香蕉片的功效与作用呢?今天本站小编就来给大家介绍一下香蕉片的功效与作用,一起来看看吧. 从营养角度看,其中含有了比较丰富的淀粉.属于是一种对人们身体十分有益的水果,可是我们在生活之中也是不可以多吃的,因为多吃的话,是很容易发胖的.在中医学的角度上去进行分析的话,香蕉在中医生因为味甘性寒,可以帮助人们身体上起到了清热润肠,促进肠胃蠕动,但是具有了脾虚泄泻的朋友却不适合吃香蕉. 因为在平时,正因为香蕉性寒,体质偏于虚寒者,最好避之则

  • 《变形金刚:塞伯坦的陨落》无限loading怎么解决? 《变形金刚:塞伯坦的陨落》无限loading怎么解决?

    进入游戏之后会出现无限loading的画面,解决该问题的方法是,先退出游戏,将系统时间更改为8.21号,然后重新进入即可. 这个是陨落的解决方法~~~

热门推荐
  • 大唐联仪携新产品亮相北京国际通信展 大唐联仪携新产品亮相北京国际通信展 2015年9月22日,中国国际信息通信展览会在北京举行.作为国内领先的通信仪表厂商,大唐联仪科技有限公司(以下简称"大唐联仪")在本届展会中展出的新仪表产品和新测试解决方案,成为测试测量设备展示中的一大亮点. 高效的多天线多终端一站式生产测试方案 随着4G终端的普及,通信制式支持至多模甚至全网通,终端天线从原来的单天线增加到3~4根天线甚至更多,终端在生产环节的测试中需要更多天线及更多制式的一站式解决方案. CTP3308终端综合测试仪是大唐联仪推出的新一代终端综合测试仪表,通过多通道
  • 爱奇艺网络大电影高峰论坛报名人数突破3000人 网大发展趋势备受关注 爱奇艺网络大电影高峰论坛报名人数突破3000人 网大发展趋势备受关注 5月6日,中国网络大电影行业权威峰会"爱奇艺世界大会-网络大电影高峰论坛"即将在京举行,目前爱奇艺公布的嘉宾阵容显示,中国电影导演协会秘书长刘仪伟,著名编剧束焕,炫唐文化发展有限公司董事长.著名网络作家唐家三少,中国文化产业投资基金董事张驰,CCTV-6电影频道主任唐科,香港电影导演.演员林子聪,影评人周黎明,七娱乐影业创始人张斯斯等电影行业知名人士届时都将参与.目前该活动报名人数已突破3000人,爱奇艺网络大电影高峰论坛成为备受电影从业者.网大片方和媒体关注的电影行业盛会.爱奇艺作为
  • 世上竟有人与猪杂交的怪物  坏事做尽转世为猪 世上竟有人与猪杂交的怪物 坏事做尽转世为猪 云南省昆明市宜良县的一个小山村发生一件怪事,一只母猪居然生下8个男婴儿.在场所有人都不敢相信自己的眼睛!各国专家都赶到现场后都无法解释这一,奇特迹象!这将成为世界历史上的未解之迷! 人与猪的杂交怪物:惊世骇俗的"猪人" 1923年上海发生一起真实 "人畜轮回转世 "事件 话说民国十二(1923年),江北泰兴有一个无业 游民,名唤施庆钟,此人一向不务正业,胡作非为,再加上生性凶悍,动辄霸道横行,鱼肉乡民,使得乡民畏之若虎,避而 远之.这一年,施庆钟突然大病不起,生命已
  • 研究宇宙早期超大质量黑洞的吸积情况 研究宇宙早期超大质量黑洞的吸积情况 科学家已经确认在宇宙中存在大量的黑洞,几乎每个星系中央都存在超大质量黑洞,而一些质量更小的黑洞则更多,那么这些黑洞的前身是什么模样就成了科学家的研究焦点. 来自钱德拉宇宙演化调查的项目科学家发现在宇宙大约12亿岁时就出现了超大质量黑洞,这些星系核的样本记录了宇宙早期黑洞的成长过程,科学家通过活动星系核的研究了解到宇宙早期超大质量黑洞的吸积情况,并释放出高速移动的带电粒子喷流. 负责本项研究的科学家来自哈佛史密松天体物理中心,研究的方向为对宇宙209个星系的早期X射线信号进行了研究,这些早期黑洞与
  • win7安装DVD光驱驱动被系统拒绝是为什么 win7安装DVD光驱驱动被系统拒绝是为什么 1.首先,咱们同时在win7旗舰版电脑键盘上按下win+R快捷键打开电脑的运行窗口,在打开的运行窗口中,咱们输入regedit并单击回车,这样就可以打开win7旗舰版电脑的注册表编辑器窗口了. 2.在打开的注册表编辑器窗口中,咱们依次点击展开左侧菜单中的HKEY_LOCAL_MACHINESYSTEMCurrentControlSetControlClass{4D36E965-E325-11CE-BFC1-08002BE10318},之后,咱们在右侧窗口中找到UpperFilters跟Lower
  • Ajax 缓存: 两个主要的事实 Ajax 缓存: 两个主要的事实 Ajax 缓存: 两个重要的事实 事实1 : Ajax缓存和HTTP缓存效果相同 现代浏览器的HTTP系统和缓存系统要比Ajax的XMLHttpRequest对象更靠近底层. 在这个层面上,浏览器并不知道或关心Ajax请求.它只是服从正常的基于从服务器返回的HTTP响应头缓存规则. 如果你已经知道HTTP缓存,您可以将这种知识应用到Ajax的缓存.唯一真正的区别是,您可能需要以不同的方式为静态文件设置响应头. 以下HTTP响应头是可以用来做Ajax缓存的: Expires:应该被应用在你知道内容