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

最新文章
  • 抓取常用视频网站的播放器和截图 抓取常用视频网站的播放器和截图

    具体说就是通过一个url,解析出一个用于embed的播放器地址和一张或多张截图(最好是大小和视频大小相同的,尤其是图片好像国内的视频网站都没提供) 没时间不太想一个个去研究,所以求个整理好的对应关系列表或者库什么的 万分感谢 --cut-- gaocheng在2012-06-05 10:37:3回答到: 优酷 http://dev.youku.com/ 土豆 http://dev.tudou.com/v5/ 酷6 http://dev.ku6.com/ 56 http://dev.56.com/

  • 植树节爱树护树活动策划方案

    植树节爱树护树活动策划方案 一.活动背景: 早春三月,草长鹰飞间,冬天的寒意还未褪尽,春天带着绿色的气息向我们走来,春风吹绿了枝头上的嫩芽,吹绿了地上的小草,也吹动了西二幼孩子们的热情.3月12日是一年一度的植树节,为使孩子们能够积极与社区环境"对话",主动参与植树节的相关活动,亲身体验劳动的乐趣,感受美化环境的意义,激发爱幼儿园.爱社区的情感,我们将在3月9日,组织孩子们开展"种一棵小树,绿一方净土"的植树节爱树护树活动. 二.活动目标: 1.情感目标:在活动中,

  • 摄影教程:有哪些经典的构图原则和构图大师? 摄影教程:有哪些经典的构图原则和构图大师?

    何为构图? 构图,就是把构成整体的那些部分统一起来,在有限的空间里或平面上对作者所表现的形象进行组织,形成画面的特定结构,借以实现摄影者的表现意图. 构图的基本要求是什么? 多样,统一,简洁,有表现力. 多样:就是要求画面富有变化而不呆板,符合视觉上的美的要求. 统一:是要有统一目标,不杂乱. 多样统一构图法则上的遵循,首先是形状的多变化,其次是光线影调色彩背景等因素的运用. 如何在构图中做到「多样统一」? 寻找被摄体内在的联系. 用全局的眼光把握取舍. 自觉培养框取意识. 寻找并构建活的框架.

  • oppo手势体感怎么用? oppo手势体感怎么用?

    依次进入设置>常规>手势体感>智能通话,开启你想要打开的体感功能即可. oppo手势体感怎么用?oppo手势体感使用方法 不知道体感拨号.体感接听.体感免提切换.来电翻转静音怎么用?OPPO会给出模拟动态演示动画给大家讲解每个功能的用途还有具体的使用方法. 开启oppo手势体感功能之后我们就可以很方便的拨号接听电话和挂断电话以及让手机实现静音的功能.

  • 网站安全分析:恶意DOS脚本日志分析报告 网站安全分析:恶意DOS脚本日志分析报告

    站长之家(chinaz.com)8月20日消息:站长之家从日志宝安全团队获悉,近期据日志宝分析数据统计,恶意DOS脚本攻击行为所占比例呈上升趋势,许多网站出现因被植入恶意DOS脚本,导致网站服务器被IDC封停的情况. 针对此类攻击行为,日志宝安全团队今日发布了<恶意DOS脚本日志分析报告>: 针对网站来说,前期症状主要表现在: 1.服务器资源占用比例较正常状态有明显增长 2.网站日志文件大小较正常日期明显增大 3.流量带宽消耗以及使用率较正常日期有大幅度增长,甚至超限(导致服务器流量耗尽或者带

  • 腊八粥传说

    说起腊八节大家可能都不会陌生,若是讲起腊八节的传说知道的人就屈指可数了. 传说一:来自"赤豆打鬼"的风俗 传说上古五帝之一的颛顼氏,三个儿子死后变成恶鬼,专门出来惊吓孩子.古代人们普遍相信迷信,害怕鬼神,认为大人小孩中风得病.身体不好都是 腊八节由于疫鬼作祟.这些恶鬼天不怕地不怕,单怕赤(红)豆,故有"赤豆打鬼"的说法.所以,在腊月初八这一天以红小豆.赤小豆熬粥,以祛疫迎祥.[1] 传说二:为悼念饿死在长城工地的民工 秦始皇修建长城,天下民工奉命而来,长年不能回家,

  • Twitter债券融资13亿美元 或将进行大宗收购? Twitter债券融资13亿美元 或将进行大宗收购?

    9月12日,据国外媒体报道,Twitter正在进行自去年11月份上市以来的首次融资.Twitter当地时间周三表示,该公司将通过发行债券融资13亿美元(约合人民币80亿元),利用有史以来的低利率,获得成本相对较低的巨额资金.这次融资将使Twitter现金储备增长至35亿美元(约合人民币215亿元)--有史以来的最高水平.2012年,Twitter的现金储备和短期投资由2011年的5.5亿美元(约合人民币34亿元)增长至22亿美元(约合人民币135亿元). 那么Twitter计划如何使用这笔巨额资

  • 众安保险掌门陈劲: “IOE+云”撑起互联网生态长尾需求 众安保险掌门陈劲: “IOE+云”撑起互联网生态长尾需求

    近日,国内首家互联网保险公司众安保险CEO陈劲受邀参加由ITValue.钛媒体联合主办的ITValue +产业链金融合作与跨界论坛.会议现场,作为国内互联网保险的领路人,陈劲分享了他的行业见解. 在互联网金融的大潮中,众安保险这家主要由"三马"联合成立的新金融公司,试图解决"互联网+"时代新型应用场景下的保险需求,是以互联网金融工具重构传统产业链的排头兵. 通过自己一年多的实践,陈劲认为,流量变现是互联网行业中最简单的商业模式,而流量入口有三种:内容.工具.社交,而

  • 乐视TV“愚人节”或推出新品 乐视TV“愚人节”或推出新品

    1" class="size-full wp-image-19072 aligncenter" height="534" src="http://www.caijingyan.com/wp-content/uploads/2015/03/%E5%9B%BE%E7%89%8712.png" style="max-width: 100%; height: auto; vertical-align: middle; border:

  • T-sql 动态平添条件

    T-sql 动态添加条件 declare @t_str varchar(2000) begin set @t_str='select id from users' if(@p_pwd<>'') exec(@t_str+[email protected]_pwd'')

热门推荐
  • 掌趣科技遭四大股东连番减持 两月套现了13亿 掌趣科技遭四大股东连番减持 两月套现了13亿 在一季度营收和净利润翻倍增长的背景下,掌趣科技却遭遇了重要股东连番减持"砸盘".从3月开始,掌趣科技控股股东姚文彬.第二大股东华谊兄弟.第三大股东叶颖涛和第六大股东宋海波已经减持了近1.17亿股公司股份,套现总额达13.16亿元,是掌趣去年全年利润的2.8倍. 掌趣科技发布公告称,公司董事长姚文彬于5月3日.4日,分别减持公司股份1300万股.2300万股,合计占总股本的1.3%,套现金额4.01亿元.减持后,姚文彬仍持有公司股份4.94亿股,占总股本的17.80%. 掌趣科技遭四大股
  • 印度“死亡飞车”风行 火车撞击前数秒跳河 印度“死亡飞车”风行 火车撞击前数秒跳河 据外国媒体报道,印度北方邦首都Lucknow市青少年中兴起一种"死亡飞车"游戏,这些人沿着铁路大桥在疾驰的列车前奔跑,直到火车即将撞上他们数秒前才会跳入河中远离铁轨. 每天中午,这些少年会聚集在铁路大桥上,此时温度可达到45摄氏度.当疾驰的火车临近时,这些少年会沿着铁轨奔跑,直到火车即将撞上他们的最后一刻,他们才会从没有护栏的大桥上跳入河水中. 这些少年站在铁轨上玩许多恐怖游戏,比如谁将成为最后一个跳入水中的人.他们不仅要承受酷暑.疾驰火车的碾压以及深水挑战,还必须时刻准备躲避当地执法
  • 微博曝光11月26日金立ELIFE E7上海发布 微博曝光11月26日金立ELIFE E7上海发布 就目前的手机市场来看,国产手机往往和廉价划等号.它们的做工一般并不出彩,大众脸是这一类手机的代名词.当然其中也有例外,ELFIE E6就是其中之一. 相信很多人都对这款一体化机身的时尚手机记忆深刻,它不仅外观要求绝对的极致,就连硬件乃至UI都是精工细作,可以说在业界也颇受好评.如今,ELFIE系列又有新机曝光,它最新一代产品ELIFE E7也将于大家见面了.今日在新浪微博上,金立集团总裁卢伟冰在微博上曝出了11月26日在上海电影博物馆发布新机的消息. 从此前曝光的有关ELIFE E7的新闻来看,
  • 89平小户型巧设计变身美式休闲混搭风格家 89平小户型巧设计变身美式休闲混搭风格家 设计理念:设计师尝试以复古情韵的英伦优雅,再现30年二手房的绚丽风华.考虑各空间连接的关系,将原先处于房型中段的卫浴空间挪至一侧,顺势化解风水顾忌. 主要建材:半抛石英砖.壁纸.文化石.线板.烤漆 PART1:客厅设计 装修TIPS:机能空间连接 考虑空间连接的合理关系,将原先处于房型中段的卫浴空间挪至一侧,顺势化解风水顾忌. 装修TIPS:文化石主墙 浓淡合宜的英伦风雅,由文化石.挂钟与壁炉语汇循序铺陈空间主题. 装修TIPS:线板背景墙 白色基底以线板勾勒收框,由装置感强烈的灯饰点缀迷人品味
  • 索尼EX455的可视图像对角线尺寸是多少 索尼EX455的可视图像对角线尺寸是多少 索尼EX455的可视图像对角线尺寸是106.7厘米(42英寸).
  • Windows8系统的电脑无法直接使用光盘或U盘引导安装win7系统 Windows8系统的电脑无法直接使用光盘或U盘引导安装win7系统 已经预装了Windows 8操作系统的笔记本,无法直接使用光盘或USB引导降级至Windows 7系统,这是因为缺少相关的BIOS设置所致.这里我们以三星Q470-JS0E笔记本(已预装Windows 8系统)为例,来看一下如何进行设置来解决该问题 1.放入系统安装盘,开机按F2键进入BIOS设置,选择"Boot"选项下的"Secure Boot" ,将其设置为"Disabled" . 2.禁用后选择下面"OS Mode Selecti
  • 比特币央行禁令虚实成疑 免费服务催生交易乱象 比特币央行禁令虚实成疑 免费服务催生交易乱象 比特币央行禁令虚实成疑 免费服务催生交易乱象 TechWeb 4月3日报道 文/韩远海 3月的最后一天,比特币交易网站BTCtrade及比特儿分别在自己的网站首页挂上了公告,表示因接到相关通知暂停第三方支付充值功能. 这是继3月下旬有媒体爆出消息,称央行要求"禁止国内银行和第三方支付机构替比特币交易平台提供开户.充值.支付.提现等服务,命令关闭为15家最大比特币交易平台开立的银行帐户,并要求4月15日之前清理完毕"之后,所谓的"最新的事件进展". 但实际上,早在去年
  • 来点小数据:看广电多久会下架被盯上的网络剧 来点小数据:看广电多久会下架被盯上的网络剧 昨日,网剧<上瘾>在各个视频平台下架,此前,网上关于这部讲述同性题材的现代耽美剧何时会触动广电的神经,众说纷纭.此次播放12集后被下架,似乎比有些人预期的时间都要长.结合此前被下架的<无心法师>.<盗墓笔记>.<太子妃升职记>等网剧,本文单纯从数据角度来看,网剧的引爆时间和被下架的时间有没有重合?热度要多高才会烧到广电的神经? 在下面几张图表中,或许可以帮助我们看出被下架的网剧都有哪些特质. 被下架的网剧必然是要先入广电的法眼,百度搜索指数的最高值如果没有几