牛子大的来解释 HelloWorld 问题噜!

❤️️ ❤️️ 咳咳!牛子大的华莱士来给大家解释一下(bushi)

首先,让我们看一下这段代码!


.**<**script**>**eval**(**z**=**'p="<"+"pre>"/* ,.oq#+     ,._, */;for(y in n="zw24l6k
**4e3t4jnt4qj24xh2 x/* =<,m#F^    A W###q. */42kty24wrt413n243n
**9h243pdxt41csb yz/* #K       q##H######Am */43iyb6k43pk7243nm
**r24".split(4)){/* dP      cpq#q##########b, */for(a in t=pars
**eInt(n[y],36)+/*         p##@###YG=[#######y */(e=x=r=[]))for
**(r=!r,i=0;t[a/*         d#qg `*PWo##q#######D */]>i;i+=.05)wi\ **th(Math)x-= /*        aem1k.com Q###KWR#### W[ */.05,0<cos(o=\ **new Date/1e3/*      .Q#########Md#.###OP  A@ , */-x/PI)&&(e[~\ **~(32*sin(o)*/* ,    (W#####Xx######.P^     T % */sin(.5+y/7))\ **+60] =-~ r);/* #y    `^TqW####P###BP           */for(x=0;122>
**x;)p+="   *#"/* b.        OQ####x#K           */[e[x++]+e[x++
**]]||(S=("eval"/* l         `X#####D  ,       */+"(z=\'"+z.spl\ **it(B = "\\\\")./*           G####B" #       */join(B+B).split\ **(Q="\'").join(B+Q/*          VQBP`        */)+Q+")//m1k")[x/2
**+61*y-1]).fontcolor/*         TP         */(/\\w/.test(S)&&"#
**03B");document.body.innerHTML=p+=B+"\\n"}setTimeout(z)'**)**/**/**</**script**>**

当你仔细看的时候其实可以拆分一下:

1.首先是定义了一个变量z并初始化数据:

eval(z = 'p="<"+"pre>"...z.join(B+B).split(Q="\'").join(B+Q)+Q+")//m1k")[x/2+61*y-1]).fontcolor(/\\w/.test(S)&&"#03B");document.body.innerHTML = p += B+"\\n"}setTimeout(z)')

从这里可以看出来这段是通过eval()执行了z变量作为js代码,至于eval()有什么用,请自行百度喔(lay了白写)

2.其次就是开始字符串解析了。虽然代码里面有些注释,但是其实他们都是代码的一部分捏。

3.然后关键的就是图案的生成噜!其实他的图案就是通过循环n数组中的元素去实现的,拆分代码可以得到下面结果:


for (y in n = "zw24l6k4e3t4jnt4qj24xh2x42kty24wrt413n243n9h243pdxt41csb yz43iyb6k43pk7243nmr24".split(4)) {
  for (a in t = parseInt(n[y], 36) + (e = x = r = [])) {
    for (r = !r, i = 0; t[a] > i; i += .05) {
      with (Math)
        x -= .05,
        0 < cos(o = new Date / 1e3 - x / PI) && (e[~~(32 * sin(o) * sin(.5 + y / 7)) + 60] = -~r);
    }
    for (x = 0; 122 > x;)
      p += "   *#"[e[x++] + e[x++]] || (S = ("eval" + "(z=\'" + z.split(B = "\\\\").join(B + B).split(Q = "\'").join(B + Q) + Q + ")//m1k")[x / 2 + 61 * y - 1]).fontcolor(/\\w/.test(S) && "#03B");
  }
}

看这段代码可以看出来,n是一个包含字符序列的数组,对n进行遍历,然后通过sin和cos计算每个字符的位置。

这样的话就可以生成每个字符对应的坐标,然后把这个坐标转换成e数组的索引。通过索引,在字符串" *#"中获取对应的字符,并将他添加到最后的p字符串中。

以上!其实大部分的逻辑就已经通啦~~

当然,还有最后一步~

4.通过代码串最后的

document.body.innerHTML = p += B + "\\n"

将p字符串插入到< body > 中 (不是我故意打空格,是我正常写body标签就没辣!)并且在末尾加上换行符。

这次是真的结束了,好累,亏的这个我之前看过自己复现了一下还有点印象哈哈哈哈。

总结一下,其实这就是一个利用js字符串处理和数学函数动态生成和插入字符串来呈现出动态的效果的html片段,整体来说还是挺有意思的,而且对代码的拆分能力有一定要求。

我记得这是个国外的代码比赛好像是,应该就是用一行代码执行什么玩意的比赛,国外还有用一百行代码生成一个rgb混合的图片的比赛,那个也可以去看看!真的会对自己有很大的提升喔~

好啦这个帖子告一段落~88

我是爱玩花里胡哨的华莱士狂炫战士~ 有不同见解请留言回复喔~

看我辛辛苦苦打出来这么多字,打赏个20键盘损耗费和心智消耗费不过分吧!(磕头)😭

12 打赏
打赏 20 积分后可见