拆解一段 JavaScript 字符动画:36 进制、三角函数与自引用源码

一个只有十几行的 index.html,打开后却能不断重绘字符画,还把自己的 JavaScript 源码织进画面。代码中充满 eval、with、位运算和嵌在注释里的字符,让人很难第一眼看出它在做什么。 在 Chromium 中运行时,页面显示 16 行、每行 61 个字符的源码背景,中间覆盖一条由空格、* 和 # 组成的横向透镜形图案。图案的轮廓基本固定,内部字符不断变化;每行末尾还有一个可见的反斜杠。 ...

2026年11月12日 · 6 分钟 · 2808 字

使用CustomEvent polyfill来触发自定义事件

下面是一个完整的示例,展示了如何在ES5环境中使用CustomEvent polyfill来触发自定义事件: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Custom Event Example in ES5</title> </head> <body> <button id="myButton">Click me!</button> <script> if (!window.CustomEvent) { (function() { function CustomEvent(event, params) { params = params || { bubbles: false, cancelable: false, detail: undefined }; var evt = document.createEvent('CustomEvent'); evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail); return evt; } CustomEvent.prototype = window.Event.prototype; window.CustomEvent = CustomEvent; })(); } var button = document.getElementById('myButton'); // 创建并分发事件 button.addEventListener('click', function() { var myEvent = new CustomEvent('myCustomEvent', { detail: { message: 'Hello from the custom event!' }, bubbles: true, cancelable: true }); button.dispatchEvent(myEvent); }); // 注册事件监听器 button.addEventListener('myCustomEvent', function(event) { console.log('Custom event received'); console.log('Detail data:', event.detail); }); </script> </body> </html> 在这个示例中,当用户点击按钮时,会触发myCustomEvent事件,控制台将输出事件的详细信息。这种方法确保了在ES5环境下的广泛兼容性。

2025年7月21日 · 1 分钟 · 239 字