Question

它是从twitter上的挑战中提取出来的，你必须用140个字符来制作游戏。

在代码段中无法正常工作，但如果将其保存到.html扩展名文件中，则可以正常工作。

＆＃13;

<body onload=d=Date.now,t=d(s=0)><p style="float:left" onclick="(e=d(++s)-t)<15e3?style.margin=e%300+' 0 0 '+e*7%300:alert(s)">X</p></body>

＆＃13;

它有一个奇怪的语法......

Answer 1

以下是我认为的原始函数名称：

基本上，它会检查自页面加载以来经过的时间，并在15秒之前单击时添加边距。我将其更改为5秒并添加了红色而不是边距。

<body onload="date = Date.now, time = date(clicks = 0)">
  <p onclick="(elapsed = date(++clicks)-time) < 5000 ? this.style.color='red' : alert('Clicks:'+clicks)"> Click me within 5 seconds.
  </p>
</body>

Answer 2

onload功能：

d只是Date.now（）的快捷方式，每次调用它都会产生不同的结果。该参数与函数无关，Date.now（）在使用任何参数调用时都会产生相同的结果，所以

t = d（s = 0）

记录页面加载的时间，并将s（点击次数）设置为零。

onclick功能：

这使用速记格式

布尔值？ true case：false case

，所以

（e = d（++ s）-t）＆lt; 15e3？

e是页面加载时间与当前时间之间的差异。同样，++ s参数不会影响函数，但只会增加记录的点击次数。如果此差异小于15e3（十进制毫秒或15秒时为15000），则使用＆＃34;右上角左下角＆＃34切换

元素的上边距和左边距。 ;保证金格式。您会注意到中间的2个数字保持为0，只有顶部和左侧的数字在点击时更改。

边距（0到300之间）的随机数是通过获取时间差并将其（模数）除以上边距300，并在对左边距进行相同数学运算之前乘以时间7来给出的，因此数字是不一样的，X不会只对角移动。

一旦经过15秒，下一次后续点击会提示s的值。

Answer 3

打破它：

<body onload=d=Date.now,t=d(s=0)>

这只是一个带有onload事件处理程序的body标签。它是javascript代码，将在元素加载后运行。

d=Date.now

只需将该功能保存到window.d即可，通过d更容易访问。

t=d(s=0)

与t=Date.now(s=0)相同。 Date.now不使用任何参数，因此它与执行t=Date.now()相同。他只是使用函数调用参数来初始化s到0。所以现在，他有3个变量：

d=Date.now;
t=Date.now(); //the timestamp when the body loads
s=0;

然后是p元素：

<p style="float:left" onclick="(e=d(++s)-t)<15e3?style.margin=e%300+' 0 0 '+e*7%300:alert(s)">X</p>

其中有一个onclick事件处理程序：

(e=d(++s)-t)<15e3?style.margin=e%300+' 0 0 '+e*7%300:alert(s)

这只是一个三元表达式（类似于if / else）。你可以分成3个部分。条件，真相表达，虚假表达。

条件是：

(e=d(++s)-t)<15e3

15e3是15000。所以你有：

(e=d(++s)-t) < 15000

第一部分：

(e=d(++s)-t)

是赋值表达式（返回指定的值）。执行d(++s)与执行Date.now(++s)相同。请记住，该函数不对参数执行任何操作，他只是使用函数调用中的参数将s增加1. Date.now正在返回时间戳（当您单击{时{1}}元素）。

然后将该时间戳替换为前一个时间戳（存储在p中）并将其存储在t中。 e现在是点击和自身体加载之间的毫秒数。

所以：

将毫秒数与15000进行比较。如果它小于15秒，则真值表达式运行，如果超过15秒，则表达式运行。

真相表达式正在做：

(e=d(++s)-t)<15e3

这是围绕style.margin=e%300+' 0 0 '+e*7%300元素移动的一种非常简单的方法。边界大概是300，因此p将返回小于300的边距。另一边距将乘以7，因此它们是不同的。

e%300有效，因为事件处理程序以非常特殊的方式进行解析。基本上，您可以访问元素的任何属性，就像它在范围内一样。

虚假表达：

style.margin

只打印您点击的次数。

在我添加单位之前，它对我的chrome无效：

alert(s);

这是一个游戏，可以看到你可以在15秒之前点击X的次数。

Answer 4

你在这里的片段是包含一些JS的HTML。 Uglified脚本使用ternary operator而不是公共if {} else {}语句。此版本的代码可能有助于理解它：

<body onload=d=Date.now,t=d(s=0)>
    <p style="float:left" onclick="clickFunction()">X</p>
</body>

<script>

  var clickFunction = function() {

      if((e = d(++s) - t) < 15e3) {

          style.margin = e % 300 + ' 0 0 ' + e * 7 % 300;

      } else {

          alert(s);

      }

  }

</script>

任何人都可以向我解释这行140个字符的代码吗？

4 个答案: