愚人节整蛊代码：你屏幕上有根毛

四月 08, 2023 / Mr.x / 4阅读 / 0评论/ 分类: 创意
愚人节整蛊代码：你屏幕上有根毛 — 荣小站
前端 JavaScript 整蛊

愚人节整蛊代码：你屏幕上有根毛

将代码插入到你的网页中即可看到效果！

这是一段有趣的 JavaScript 整蛊代码，插入网页后会随机在屏幕上放置一个"毛"的表情图片，让人以为是屏幕上真的有东西——完美的愚人节小玩笑。

运行效果

点击下方按钮体验效果（点击后会在页面随机位置显示一个"毛"的表情）：

毛的表情


完整代码

!function() {
    var bottom = Math.floor(60 * Math.random()),
        right = Math.floor(50 * Math.random()),
        rotate = Math.floor(360 * Math.random());
    var foolsEgg = document.createElement("img");
    foolsEgg.src = "https://search-operate.cdn.bcebos.com/b028c278cbb84660f8bde79d819bc30b.png";
    foolsEgg.style.position = "fixed"; 
    foolsEgg.style.bottom = "".concat(bottom, "%");
    foolsEgg.style.right = "".concat(right, "%"); 
    foolsEgg.style.zIndex = "9999"; 
    foolsEgg.style.pointerEvents = "none";
    foolsEgg.style.width = "40%";
    foolsEgg.style.maxWidth = "190px";
    foolsEgg.style.transform = "".concat("rotate(", rotate, "deg)"); 
    document.body.append(foolsEgg);
}();

代码解析

1. 立即执行函数 (IIFE)

!function() { ... }()

代码用 立即执行函数（Immediately Invoked Function Expression）包裹，这样：

  • 函数定义后立即执行，无需手动调用
  • 内部变量（bottom、right、rotate）不会污染全局作用域
  • 前面的 ! 是为了将函数声明转为表达式，兼容更多浏览器

2. 随机位置计算

var bottom = Math.floor(60 * Math.random()),    // 0-59% 随机底部距离
    right = Math.floor(50 * Math.random()),     // 0-49% 随机右侧距离
    rotate = Math.floor(360 * Math.random());    // 0-359° 随机旋转角度

使用 Math.random() 生成 0-1 的随机数，乘以对应范围后取整：

  • bottom: 0-59% — 让图片在页面底部 60% 区域内随机
  • right: 0-49% — 让图片在页面右侧 50% 区域内随机
  • rotate: 0-359° — 随机旋转角度，让每次显示方向都不同

3. 创建图片元素

var foolsEgg = document.createElement("img");
foolsEgg.src = "https://...";

动态创建一个 <img> 元素，图片源是百度的表情包。

4. 样式设置（核心部分）

foolsEgg.style.position = "fixed";      // 相对于视口固定定位
foolsEgg.style.bottom = bottom + "%";   // 底部距离
foolsEgg.style.right = right + "%";      // 右侧距离
foolsEgg.style.zIndex = "9999";          // 置顶显示
foolsEgg.style.pointerEvents = "none";  // 点击穿透，不阻挡交互
foolsEgg.style.width = "40%";            // 宽度为视口40%
foolsEgg.style.maxWidth = "190px";       // 最大宽度限制
foolsEgg.style.transform = "rotate(...)"; // 随机旋转
属性作用
position: fixed相对于浏览器窗口固定，不随滚动移动
z-index: 9999确保显示在最顶层
pointer-events: none点击穿透，用户无法选中或拖动
width: 40% + max-width: 190px响应式尺寸，移动端也能适配

5. 插入页面

document.body.append(foolsEgg);

将创建好的图片元素添加到 <body> 末尾。

使用方法

将代码直接插入到网页的 <script> 标签中，或放在页面底部即可：

<script>
!function() {
    // ... 代码 ...
}();
</script>

📢 文章来自：孟坤博客

#愚人节整蛊代码：你屏幕上有根毛(1)

评论