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

最新文章
  • 有条件的赠送 20 个一年期的 AlphaSSL 泛域名证书,内详

    演示 请摸我 获取条件: 1.有独立域名的博客,至少要有一个 PR,如果是新开的请见谅. 2.帮我在首页做两个友情链接,请不要使用 nofollow 标签 <a href="http://ttt.tt/" title="通天塔" target="_blank">通天塔</a> <a href="http://www.zhuji.com/" title="诸暨" target=&

  • 九种方法帮你快速缓解压力 九种方法帮你快速缓解压力

    一.拥抱大树. 据专家称,拥抱大树可以释放体内的快乐激素,令人精神爽朗.而与之对立的肾上腺素,即压抑激素则消失. 二.写动怒日志. 每当怒气难消时,不妨将自己的想法或感觉写出来,这样有助于整理思绪,并发现真正的感觉.因为,愤怒时的情感反应并不是我们真正的感觉. 研究表明,善于把自己的感觉或所关注的问题写下来的人,要比那些只思考而不动笔的人健康快乐,而且我们把感觉写出来以后,愤怒的情绪就会有所缓解. 三.看恐怖片. 很早就有人说,恐怖片能够通过听觉.视觉刺激人肾上腺素分泌,产生兴奋感.英国的心理专

  • 50个增加你设计灵感的黄色调网站作品 50个增加你设计灵感的黄色调网站作品

    色彩在网站设计中是一个很重要的方面. 好的设计师会小心的选择色彩来达到一个目的.有的时候,这个目的就是醒目些以获得用户的注意,而黄色正好是一个很棒的"吸引注意"的色彩.黄色是一个高度活跃的色彩,可以引起思维活跃并带来令人愉悦的想法. 为了能够提供一些灵感,我们选择了50个有效使用黄颜色的网站设计.你会从中发现,它们中的有些使用谎言是来加亮设计中最重要的部分,而其它的则用来更多地实现醒目的效果. paralotna sebdesign.eu Trout Creative Thinking

  • SublimeText中文乱码解决 SublimeText中文乱码解决

    一.安装SublimeText优化版 网易博客网友流风清音制作的"SublimeText3优化版"和"Sublime Text2"优化版深度整合了GBK编码完美解决中文乱码问题,比官方版更加适合国内的使用环境. 提示:涉及到版权问题,下载吧不提供下载,请大家自行到 流风清音网易博客 下载. 二.安装中文插件包 安装Sublime Package Control非常简单,在Sublime Text 2上用Ctrl+-打开控制台并在里面输入以下代码,或者是官方提供的代码

  • 花季少女竟然长出男性生殖器官 花季少女竟然长出男性生殖器官

    由遗传学上得知,近亲结婚的夫妇从共同祖先那获得较多相同基因,从而为一些有害基因创造相遇的机会,易生出不健康的孩子.最近,杭州就有一个可怕的病例,即雌雄同体! 24岁的患者晓琴(化名)出生在江苏农村,13岁那年第一次来了月经,妈妈告诉她"这是长大成人了",以后每个月"大姨妈"都会定期来跟她"见面".但是,之后的整整四年里,晓琴的"大姨妈"就像失踪了一样,一次都没来. 父母这才想到送孩子上医院,医生检查发现,晓琴除了"大

  • 赶走坏天气,易到正能量关怀你 赶走坏天气,易到正能量关怀你

    下雨天出行必然会遭遇打车难.大堵车,尤其是今年的梅雨季更是让很多人患上了出行焦虑症,好在有易到用车为你排忧解难.在这个坏天气里,易到用车特意推出"坏天气 伐得噶 易到请你5折专车出行"活动,为上海用户送出5折用车券,无论窗外是电闪雷鸣还是风雨交加,有易到在,坏天气里你也会有好心情. 坏天气五折出行,阴雨天的正能量 为了缓解坏天气出行痛点,易到用车针对上海地区推出"坏天气 伐得噶 易到请你5折专车出行"活动.自7月9日-19日,您只要进入易到用车的官方App或者服务号

  • 如何手动大批量上传关键词至百度推广账户 如何手动大批量上传关键词至百度推广账户

    百度竞价最麻烦的事情就是把分好格式的计划-单元-关键词添加到账户里.但是也有一定技巧能提升添加效率.接下来小编会给大家提供这个手动批量上传关键词至百度推广账户的教程. 1.首先按照计划.单元.关键词的格式将内容保存在Excel表格中. 2.然后打开百度百度推广客户端,登陆账户. 3.选择搜索推广进行操作. 4.打开搜索推广之后,选择关键词层级,点击批量添加/更新 5.然后打开excel表格,复制除了第一行表头,其他的所有的内容. 6.然后回到百度助手里面,选择第二项,输入信息包含推广计划名称,这

  • Dedecms批量替换文章中图片地址方法小结 Dedecms批量替换文章中图片地址方法小结

    这里是朋友在本地测试了Dedecms发现到了服务器上文章中的图片地址都显示不正确了,这里我正好以前做了dedecms二级域名也碰到此问题根据经验直接数据库或后台批量替换即可. 第一种情况:页面图片无法显示 这个好办,直接用dreamever或其他编辑器批量替换模版文件里面的路径就好了,把以前的路径替换成当前的.例如:以前的是"/dedecms/images/1.jpg",可以将"/dedecms/images/"批量替换成"/images/".

  • 网站设计参考:优秀的左对齐设计网站作品 网站设计参考:优秀的左对齐设计网站作品

    网页制作poluoluo文章简介:如今互联网上绝大多数的网站都遵从着居中对齐的Web设计方式,为的是更好地兼容不同分辨率大小的计算机显示器,但是,也有不少的网站设计在走一种不同寻常的设计模式 – 左对齐设计.今天就为大家整理了18个这样的左对齐设计的优秀网站,让我们用不同的欣赏眼光,从这些 如今互联网上绝大多数的网站都遵从着居中对齐的Web设计方式,为的是更好地兼容不同分辨率大小的计算机显示器,但是,也有不少的网站设计在走一种不同寻常的设计模式 – 左对齐设计.今天就为大家整理了18个这样的左对

  • dnf传说之剑邀请函怎么获得?传说之剑邀请函有什么用? dnf传说之剑邀请函怎么获得?传说之剑邀请函有什么用?

    dnf传说之剑邀请函怎么获得?获得之用有什么用处呢,传说之剑邀请函是可以让我们在暗黑城广场上挑战拔剑哦,就这个作用了,下面来看看吧. dnf传说之剑邀请函怎么获得? 在玩家的游戏号之内每天最早登录的那个游戏角色就可以免费得到一个dnf传说之剑邀请函 dnf传说之剑邀请函有什么用? 有了这个dnf传说之剑邀请函之后我们就能在暗黑城广场上挑战拔剑.

热门推荐
  • 非主流情侣个性签名句子配对 非主流情侣个性签名句子配对 懵懂的,美好的,心动的,心碎的,这也是我们的青春. 纪念的,逝去的,遗憾的,遗忘的,这就是我们的青春. 只要我还活着 就会一直只爱你一个人 只要我还活着 就会让你只爱我这个人 当你觉得钱比面子重要的时候,证明你成熟了 当你能用钱去买回面子的时候,证明你成功了 想着你可爱的笑,心跳不自觉慢半拍 想着你温柔的眼,心跳不自觉快半拍 天荒地老在时光的旋转下,被一点一点磨灭. 地久天长在时间的流逝中,被一点一点抹灭. 涐们的故事.始终都是那么旳唯美. 涐们的故事.始终都是那么旳完美. 不会说不离不弃,只会
  • 生活中常见的饮食误区 生活中常见的饮食误区 生活中常见的饮食误区 水果榨汁.吃果蔬不吃果皮.浸泡蔬果--这些你以为健康的做法,却无形中让食物的营养都流光了.吃得多并不代表营养足,如果你陷入这几种饮食误区,吃再多也等于白吃!所以下面我们就给大家说说饮食中的误区吧. 本站阅读配图 1.先切菜然后洗菜(或将菜浸泡在水中) 在洗切青菜时,若将菜切了再冲洗,大量维生素就会流失到水中. [正确做法] 先把蔬菜整个儿浸泡.洗净,入锅前而且不宜冲泡太久,一般不要超过10分钟. 2.为了多吃水果而榨果汁 鲜榨果蔬汁的颜色赏心悦目,味道酸甜可口,非常受欢迎.
  • 女性贫血的五大营养误区 女性贫血的五大营养误区 血液是女性气色好坏的重要物质基础,现代追求内外兼美的女性,更应该注重补血.但是,许多女性对于如何营养补血不太了解,很容易走入补血误区,陷入缺铁性贫血. 误区一:蔬菜水果无益补铁? 许多人不晓得多吃蔬菜.水果对补铁也是有好处的.这是因为蔬菜水果中富含维生素C.柠檬酸及苹果酸,这类有机酸可与铁形成络合物,从而增加铁在肠道内的溶解度,有利于铁的吸收. 误区二:多吃肉对身体不好? 一些女性对一般广告中宣传的肉食损害健康产生误导,只注重植物性食品的保健功效,导致富含铁元素的动物性食品摄入过少.实际上,动物
  • Eclipse 保留Java文件时自动格式化代码和优化Import Eclipse 保留Java文件时自动格式化代码和优化Import Eclipse 保存Java文件时自动格式化代码和优化Import Eclipse中format代码的快捷方式是ctrl+shift+F,如果大家想保存 java文件的时候 自动就格式化代码+消除不必要的import 包,可以简单的做以下配置就可以实现.