Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[js] 第28天 解释下这段代码的意思! #100

Open
haizhilin2013 opened this issue May 13, 2019 · 8 comments
Open

[js] 第28天 解释下这段代码的意思! #100

haizhilin2013 opened this issue May 13, 2019 · 8 comments
Labels
js JavaScript

Comments

@haizhilin2013
Copy link
Collaborator

第28天 解释下这段代码的意思!

[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) })
@haizhilin2013 haizhilin2013 added the js JavaScript label May 13, 2019
@AnsonZnl
Copy link
Contributor

AnsonZnl commented May 14, 2019

作用

在你的Chrome浏览器的控制台中输入这段代码,你会发现不同HTML层都被使用不同的颜色添加了一个高亮的边框。是不是非常酷?但是,简单来说,这段代码只是首先获取了所有的页面元素,然后使用一个不同的颜色为它们添加了一个1px的边框。

解析

  • [].forEach.call() => 调用引用数组的forEach方法
  • $$('*') => document.querySelectorAll('*')
  • ~~a => parseInt(a)
  • 1<<24 => 对二进数1小数点右移24位
  • (parseInt(Math.random()*(1<<24)).toString(16)) => 获得了一个位于0-16777216之间的随机整数,也就是随机颜色,再使用toString(16)将它转化为十六进制数。

手写简版

[].forEach.call(
        document.querySelectorAll('*'),
        function(a){
            a.style.outline="1px solid #" + 
            (parseInt(Math.random()*(1<<24)).toString(16))
        }
    )

看蒙了,别问我怎么知道的,百度的!!

参考:

@myprelude
Copy link

用数组的foEach方法遍历 dom类数组对象 ,将对象dom节点加上随机颜色的轮廓。

@Konata9
Copy link

Konata9 commented Jul 9, 2019

// $$('*') 为获取所有 dom 元素,返回数组
[].forEach.call($$("*"), function(a) {
  // forEach 的回调函数,这里的 a 是数组中每个 dom 元素,不是 a 标签
  a.style.outline =
    // ~~是取整 1<<24 是位运算 结果为 16777216
    // 之后的 toString(16) 为进行 16 进制的转换 即颜色
    "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16);
});

因此这段代码的意思为,给页面所有 dom 元素添加随机颜色的边框。

@Vi-jay
Copy link

Vi-jay commented Jul 29, 2019

用通配符拿到所有元素
用forEach.call遍历所有元素
给所有元素加上随机颜色的1px实线边框

@0x3c
Copy link

0x3c commented Mar 4, 2020

1 << 24; // 1 左移 24 位, 值为 2^24
Math.random() * (1 << 24); // 随机生成 (0, 2^24) 之间的数字
~~(Math.random() * (1 << 24)); // 将小数转成32位有符号整数取反再取反, 即舍弃小数值
(~~(Math.random() * (1 << 24))).toString(16); // 将取整后的值转化为16进制, 值范围 [0, 2^24)
$$("*"); // 相当于 document.querySelectorAll("*")
// 代码为所有元素设置一个随机颜色的 outline

@blueRoach
Copy link

等于这个$$("").forEach(function(a){ a.style.outline="1px solid #"+(~~(Math.random()(1<<24))).toString(16) })
$$("")获取所有标签
1<<24 “<<” 左移移位符 将2进制的1左移24位,相当于2^24
Math.random()
(1<<24) 生成0~2^24的数
~~Math.random()(1<<24) 去掉小数点
(~~Math.random()
(1<<24)).toString(16) 将取整后的数转位16进制

整个的意思就是,页面上全部元素弄一个1px solid随机颜色的轮廓

@github-cxtan
Copy link

[].forEach.call() => 调用引用数组的forEach方法
$$('') => document.querySelectorAll('')
~~a => parseInt(a)
1<<24 => 对二进数1小数点右移24位
(parseInt(Math.random()*(1<<24)).toString(16)) => 获得了一个位于0-16777216之间的随机整数,也就是随机颜色,再使用toString(16)将它转化为十六进制数。

@xiaoqiangz
Copy link

作用

在你的Chrome浏览器的控制台中输入这段代码,你会发现不同HTML层都被使用不同的颜色添加了一个高亮的边框。是不是非常酷?但是,简单来说,这段代码只是首先获取了所有的页面元素,然后使用一个不同的颜色为它们添加了一个1px的边框。

解析

  • [].forEach.call() => 调用引用数组的forEach方法
  • $$('*') => document.querySelectorAll('*')
  • ~~a => parseInt(a)
  • 1<<24 => 对二进数1小数点右移24位
  • (parseInt(Math.random()*(1<<24)).toString(16)) => 获得了一个位于0-16777216之间的随机整数,也就是随机颜色,再使用toString(16)将它转化为十六进制数。

手写简版

[].forEach.call(
        document.querySelectorAll('*'),
        function(a){
            a.style.outline="1px solid #" + 
            (parseInt(Math.random()*(1<<24)).toString(16))
        }
    )

看蒙了,别问我怎么知道的,百度的!!

参考:

mark 一下

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
js JavaScript
Projects
None yet
Development

No branches or pull requests

9 participants