20/05/08 每日一题

简述一下下面代码的意思以及用到的知识点

[].forEach.call($$(*),function(a){

a.style.outline = "1px solid #"+(~~(Math.random()*(1<<24))).toString(16))

})

答案解析:

1)选择页面中所有的元素

$$函数是现代浏览器提供的一个命令行API,它相当于document.querySelectorAll,可以将当前页面中的css选择器作为参数传给该方法,然后它会返回匹配的所有元素。

2)遍历元素

[].forEach.call($$('*'),function(a){/*具体操作*/})

通过使用函数call和apply方法,可以实现在类似NodeLists这样的类数组对象上调用数组方法。

3)为元素添加颜色

a.style.outline="1px solid  #"+color                              

代码中使用outline的css属性给元素添加一个边框。由于渲染的outline是不会在css盒模型中的,所以为元素添加outline并不会影响元素带的大小和布局。

4)生成随机颜色

~~(Math.random()*(1<<24)).tostring(16)

1.Math.random()*(1<<24)可以得到0~2^24-1之间的随机数,使用了位操作

2.因为得到的是一个浮点数,但是我们只需要整数部分,使用取反操作符~连续两次取反获得整数部分,使用两个波浪号等价于parseInt,const a=12.34;~~a==parseInt(a,10);//true

3.然后再用toString(16)的方式,转换为一个16进制的字符串。

toString()方法将数值转换成字符串时,接收一个参数用以指明数值的进制。如果省略了该参数,则默认采用十进制,但你可以指定其他的进制。


总结知识点:

call,apply绑定this指向

$$('*')获取页面中的所有元素

css中outline属性不在盒模型中,不会影响元素的大小

Math.random随机数

<<运算符执行左移位运算。在移位运算过程中,符号位始终保持不变。如果右侧空出位置,则自动填充为 0;超出 32 位的值,则自动丢弃。

tostring()可以将其他类型转成字符串,如果是数字可以转换成其他进制

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容