Skip to content

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

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

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

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

Activity

AnsonZnl

AnsonZnl commented on May 14, 2019

@AnsonZnl
Contributor

作用

在你的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

myprelude commented on Jun 13, 2019

@myprelude

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

Konata9

Konata9 commented on Jul 9, 2019

@Konata9
// $$('*') 为获取所有 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

Vi-jay commented on Jul 29, 2019

@Vi-jay

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

0x3c

0x3c commented on Mar 4, 2020

@0x3c
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

blueRoach commented on Jun 24, 2020

@blueRoach

等于这个$$("").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

github-cxtan commented on Feb 23, 2022

@github-cxtan

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

xiaoqiangz

xiaoqiangz commented on May 29, 2022

@xiaoqiangz

作用

在你的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 一下

panpanxuebing

panpanxuebing commented on Dec 10, 2024

@panpanxuebing

给网页的所有标签元素加上一个随机颜色的边框

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    jsJavaScript

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@Konata9@xiaoqiangz@github-cxtan@myprelude

        Issue actions

          [js] 第28天 解释下这段代码的意思! · Issue #100 · haizlin/fe-interview