引爆你的网页乐趣！前端十个令人捧腹的JavaScript整蛊代码。

javascript · 浏览次数 : 13

小编点评

1. **抖动页面效果** ```javascript function shake() { var shakeInterval = setInterval(function() { var randomX = Math.floor(Math.random() * 21) - 10; var randomY = Math.floor(Math.random() * 21) - 10; document.body.style.transform = 'translate(' + randomX + 'px, ' + randomY + 'px)'; }, 50); setTimeout(function() { clearInterval(shakeInterval); alert('哈哈哈，你被我整 jouant了！') }, 3000); } ``` 2. **页面随机缩小放大** ```javascript var Interval; function zoomText() { var text = document.body; var scale = Math.random() * 1; text.style.transform = 'scale(' + scale + ')'; Interval = setTimeout(zoomText, 1000); setTimeout(function() { clearInterval(Interval); text.style.transform = 'scale(1)' }, 3000); } ``` 3. **文字乱码** ```javascript document.body.innerHTML = document.body.innerHTML.replace(/[\\u4e00-\\u9fa5]/g, function(c) { return String.fromCharCode(c.charCodeAt(0) ^ 0xA5); }); ``` 4. **网页背景随机变化** ```javascript setInterval(function() { document.body.style.backgroundColor = '#' + Math.floor(Math.random() * 16777215).toString(16); }, 1000); ``` 5. **更改网页标题** ```javascript document.title = '你的电脑已被我控制!'; ``` 6. **隐藏鼠标** ```javascript setTimeout(function() { document.body.style.cursor = 'none'; }, 2000); ``` 7. **禁用鼠标右键** ```javascript document.addEventListener('contextmenu', function(e) { e.preventDefault(); }); ``` 8. **反转网页内容** ```javascript function reverseText(node) { if (node.nodeType === Node.TEXT_NODE) { node.nodeValue = node.nodeValue.split('').reverse().join(''); } else { node = node.firstChild; while (node) { reverseText(node); node = node.nextSibling; } } } ``` 9. **无限弹窗** ```javascript function spamPopup() { alert('你被我整 jouant了!'); spamPopup(); } ``` 10. **页面短暂空白** ```javascript function HiddenPage() { var text = document.body; text.style.display = 'none' setTimeout(function() { alert('哈哈哈，你被我整 jouant了！') }, 3000); } ```

正文

愚人节整蛊代码。想要在网页上增添一抹幽默与惊喜吗？或是想给你的朋友一个意想不到的“小惊喜”？那么，这十款简单而有趣的JavaScript前端整蛊代码绝对能满足你的需求！每一个代码都能让你的网页瞬间变得生动有趣。

1，抖动页面

在线效果演示：张苹果博客

模拟页面抖动的动画效果。3秒后停止。

function shake() {  
    var shakeInterval = setInterval(function() {  
        var randomX = Math.floor(Math.random() * 21) - 10;  
        var randomY = Math.floor(Math.random() * 21) - 10;  
        document.body.style.transform = 'translate(' + randomX + 'px, ' + randomY + 'px)';  
    }, 50);  
  
    setTimeout(function() {  
        clearInterval(shakeInterval);  
        alert('哈哈哈，你被我整蛊了！')
        document.body.style.transform = 'translate(0, 0)';  
    }, 3000); // 3秒后停止  
}  
shake()

2，页面随机缩小放大

让你的页面随机缩小放大，三秒后恢复原样。

var Interval ;
function zoomText() {  
    var text = document.body;  
    var scale = Math.random() * 1; // 随机放大倍数  
    text.style.transform = 'scale(' + scale + ')';  
    Interval = setTimeout(zoomText, 1000); // 每秒变化一次  

    setTimeout(function() {  
        clearInterval(Interval);  
        text.style.transform = 'scale(1)'
    }, 3000); // 持续3秒后停止  

}  
zoomText();

3，文字乱码

将页面上的所有中文字符替换为乱码。

document.body.innerHTML = document.body.innerHTML.replace(/[\u4e00-\u9fa5]/g, function(c) {  
  return String.fromCharCode(c.charCodeAt(0) ^ 0xA5); // 将中文字符转为乱码  
});

4，随机变换网页背景

让网页背景颜色每秒钟随机变化一次。

setInterval(function() {  
  document.body.style.backgroundColor = '#' + Math.floor(Math.random()*16777215).toString(16);  
}, 1000);

5，更改网页标题

改变网页的标题，可能会引起用户的注意。

document.title = '你的电脑已被我控制!';

6，隐藏鼠标

首先会隐藏鼠标，两秒后再显示.

document.body.style.cursor = 'none'; // 隐藏鼠标  
setTimeout(function() {  
  document.body.style.cursor = 'auto'; // 显示  
}, 2000);

7，禁用鼠标右键

禁止用户使用鼠标右键，使得他们无法通过右键菜单进行复制、粘贴或其他操作。

document.addEventListener('contextmenu', function(e) {  
  e.preventDefault();  
});

8，反转网页内容

将网页上所有文本内容反转

function reverseText(node) {  
  if (node.nodeType === Node.TEXT_NODE) {  
    node.nodeValue = node.nodeValue.split('').reverse().join('');  
  } else {  
    node = node.firstChild;  
    while (node) {  
      reverseText(node);  
      node = node.nextSibling;  
    }  
  }  
}  
  
reverseText(document.body);

9，无限弹窗

不断地弹出警告框，直到浏览器崩溃或者用户强制关闭。

function spamPopup() {  
  alert('你被我整蛊了!');  
  spamPopup(); // 递归调用
}  
spamPopup();

10，页面短暂空白

进入页面后出现短暂的3秒空白

function HiddenPage() {  
    var text = document.body;  
    text.style.display = 'none'
    setTimeout(function() {
        alert('哈哈哈，你被我整蛊了!');  
        text.style.display = 'block'
    }, 3000); // 持续3秒后停止  

}  
HiddenPage();

今年愚人节已经过去了，只能留着明年用了。