本文内容源于这里
首先来看下面这行代码:
[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) })
你可以在浏览器的控制台执行这段代码,你会看到页面中不同的HTML结构被不同颜色的框圈着。是不是很神奇呢?
其实,它只是进行了如下的操作:获取页面的所有元素,然后给这些元素加上1px的外框(outline),并且使用了随见的颜色。
想法虽然简单,但是要想写出这样的代码,必须对web开发非常熟练。下面通过具体地分析这段代码,来学习相关的知识。
(1)选择页面中的所有元素
在浏览器的控制台中可以使用$$()方法来获取页面中相应的元素,如在浏览器的JavaScript控制台中输入$$('a')并执行,可以得到由当前页面所有<a>标签元素组成的一个列表。
$$函数是现代浏览器提供的一个命令行API,它相当于document.querySelectorAll,可以将当前页面中的CSS选择器作为参数传给该方法,然后它会返回匹配的所有元素。
所以,如果想在浏览器控制台外使用上面这段代码,可以将$$('*')替换为document.querySelectorAll('*')。
(2)遍历元素
通过$$('*')的方式,我们得到了由页面中所有元素组成的一个NodeList节点列表,我们希望为这些节点加上不同颜色的外框。
注意上段代码中的以下部分:
[].forEach.call( $$('*'), function( a ) { /* 具体的操作 */ });
NodeLists有点类似数组,可以通过中括号的方式获取列表中的节点,也可以通过length属性获得列表的长度,但是它不具备数组所具有的方法,因此,无法直接使用$$('*').forEach()。
在JavaScript中,有好几个对象表现得与数组类似,但是它们都不是数组,比如函数内部的arguments变量。
虽然无法直接调用数组方法,但是我们可以通过一个实用的模式来解决它:通过使用函数的call和apply方法,可以实现在类似NodeLists这样的非数组对象上调用数组方法。
函数的call方法使用示例:
function say(name) { console.log( this + ' ' + name ); } say.call( 'hola', 'Mike' ); // Prints out 'hola Mike' in the console // Also you can use it on the arguments object function example( arg1, arg2, arg3 ) { return Array.prototype.slice.call(arguments, 1); // Returns [arg2, arg3] }
在我们之前的那段代码中使用[].forEach.call而没有用Array.prototype.forEach.call简洁了许多。
(3)为元素添加颜色
代码中使用outline的CSS属性给元素添加一个边框。由于渲染的outline是不在CSS盒模型中的,所以为元素添加outline并不会影响元素的大小和页面的布局。但outline的语法与border属性类似,所以也不难理解。
a.style.outline="1px solid #" + color
关键是颜色的定义:
~~(Math.random()*(1<<24))).toString(16)
这里使用了位操作符。
我们希望得到是一个十六机制的颜色值如白色(FFFFFF)或者蓝色(0000FF)或者其它颜色(37f9ac)。
在上面这段代码中,首先我们学到的是使用toString()方法将一个小数转成十六进整数。toString()方法将数值转换成字符串时,接收一个参数用以指明数值的进制。如果省略了该参数,则默认采用十进制,但你可以指定为其他的进制,如下所示。
(30).toString(); // "30" (30).toString(10); // "30" (30).toString(16); // "1e" Hexadecimal (30).toString(2); // "11110" Binary (30).toString(36); // "u" 36 is the maximum base allowed
与之对应,你也可以使用parseInt()方法将一个字符串转换为数值,该方法的第一个参数为需要转换的字符串,第二个参数指明前面字符串所用的进制,结果返回十进制的数:
parseInt("30"); // "30" parseInt("30", 10); // "30" parseInt("1e", 16); // "30" parseInt("11110", 2); // "30" parseInt("u", 36); // "30"
根据前面颜色的分析,其实我们是希望在0和ffffff之间得到一个随机的十六进制数,也就有parseInt('ffffff', 16) = 16777215,而16777215刚好为2^24 - 1
不知道你是否熟悉二进制运算,不管怎样你该知道的是 1<<24 == 16777216(可以在控制台试一下)。
接下来,通过Math.random()*(1<<24)可以得到0~16777216之间的随机数。
到这里还没完事,因为Math.random返回的是一个浮点数,而我们希望得到的是它的整数部分。
这里使用了波浪号(~)操作符来实现,具体的内容可以看看:JavaScript的波浪操作符
上面这段代码使用两个波浪号等价于使用parseInt:
var a = 12.34, // ~~a = 12 b = -1231.8754, // ~~b = -1231 c = 3213.000001 // ~~c = 3213 ; ~~a == parseInt(a, 10); // true ~~b == parseInt(b, 10); // true ~~c == parseInt(c, 10); // true Again, if you go to the gist and have a look
这样最终我们得到了0至16777216之间的随机数,可以用于产生一个随机颜色。得到相应的颜色,我们只需将对应的随机数通过使用toString(16)方法将其转化为十六进制表示的字符串即可。
相关推荐
说明:本资源展示了如何使用 JavaScript 修改 HTML 内容的20行代码示例。JavaScript 是一种强大的脚本语言,它能够在网页中动态地改变和控制 HTML 元素的内容和样式。通过该资源,您将学习基本的 JavaScript 和 ...
《编写高质量代码:改善javascript程序的188个建议》是web前端...书中的每一条建议都可能在你的下一行代码、下一个应用或下一个项目中被用到,建议你将此书放置在手边,随时查阅,一定能使你的学习和开发工作事半功倍。
Web前端工程师进阶修炼的必读之作,将为你通往“JavaScript技术殿堂...每一条建议都可能在你的下一行代码、下一个应用或下一个项目中被用到,建议你将此书放置在手边,随时查阅,一定能使你的学习和开发工作事半功倍。
《编写可维护的JavaScript》向开发人员阐述了如何在团队开发中编写具备高可维护性的JavaScript代码,书中详细说明了作为团队一分子,应该怎么写JavaScript。本书内容涵盖了编码风格、编程技巧、自动化、测试等几方面...
1.本书1~21章所附代码的运行环境 操作系统:Windows 2003、Windows XP Professional,或者Windows 2000 开发环境:UltraEdit12.10a、eclipse-jee-europa Web浏览器:Microsoft Internet Explorer 6.0及以上版本 ...
《前端也要会的编译原理之用 JavaScript 写一个 JavaScript 解释器》作业+源代码+文档说明 - 小白不懂运行,下载完可以私聊问,可远程教学 该资源内项目源码是个人的课程设计,代码都测试ok,都是运行成功后才上传...
JSAC:一个基于深度学习的恶意 JavaScript 代码检测框架,杨宇行,梁洪亮,JavaScript(JS)是网络开发中最为广泛应用的脚本语言,也是最常被攻击者利用的语言之一。近年来,机器学习在多个领域取得了令人瞩目的�
寻找入口:逆向在大部分情况下就是找一些加密参数到底是怎么来的,关键逻辑可能写在某个关键的方法或者隐藏在某个关键的变量里,一个网站可能加载了很多 JavaScript 文件,如何从这么多的 JavaScript 文件的代码行中...
适合新手参观学习的一个很简单,但是很实用的一个Demo,本人已经在Chrome浏览器上测试同过。
asp.net常用的javascript经典例子,ASP.NET文件上传程序的源代码,Web Service服务,微软提供的加密方法,鼠标停留在GridView某一行时颜色改变
基于JavaScript微信小程序做的一个简单的剪刀石头布的猜拳游戏+源代码+注释说明 - 不懂运行,下载完可以私聊问,可远程教学 该资源内项目源码是个人的毕设,代码都测试ok,都是运行成功后才上传资源,答辩评审平均分...
基于Javascript的实现一个出租车计价器,使用TDD的方法实现+源代码+文档说明 出租车计价: 不大于2公里时只收起步价6元。 超过2公里的部分每公里收取0.8元。 超过8公里的部分,每公里加收50%长途费。 停车等待时加收...
javascript实现的一个五子棋。大约五十行代码所有,欢迎大家学习借鉴。
1.动画原理 我们平时看的动画片,为什么能动起来呢?其实是因为它们都是由一张张图片...想让程序不停地画飞机,我们不可能说把一行代码打上个几百次吧!对,我们只需要学习定时器就可以不停地画飞机了。定时器代码如下
JavaScript 由数行可执行计算机代码组成。 JavaScript 通常被直接嵌入 HTML 页面。 JavaScript 是一种解释性语言。 所有的人无需购买许可证均可使用 JavaScript。 这些都是一些书里关于JavaScript的定义,知道就行...
基于JavaScript开发的人流密度检测微信小端程序源码+源代码文档.zip 该资源内项目源码是个人的毕设,代码都测试ok,都是运行成功后才上传资源,答辩评审平均分达到94.5分,放心下载使用! 该资源适合计算机相关专业...
疯狂html5+css3+javascript完整版是第一部分 亲们漏掉了这部分不好意思 下载这2个解压出来就行了 本书中的程序在以下环境中调试通过: 1 本书很多HTML 5 CSS 3代码必须在高版本的浏览器中才能看到效果 建议读者...
#一个小型的购物项目# ...3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。
搭后语 现如今,要说比较火的...3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。 --------