引爆你的网页乐趣！前端十个令人捧腹的JavaScript整蛊代码。
<p>愚人节整蛊代码。想要在网页上增添一抹幽默与惊喜吗？或是想给你的朋友一个意想不到的“小惊喜”？那么，这十款简单而有趣的JavaScript前端整蛊代码绝对能满足你的需求！每一个代码都能让你的网页瞬间变得生动有趣。</p><h3 id="1抖动页面">1，抖动页面</h3>
<blockquote>
<p>在线效果演示：张苹果博客</p>
</blockquote>
<blockquote>
<p>模拟页面抖动的动画效果。3秒后停止。</p>
</blockquote>
<pre><code class="language-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('哈哈哈，你被我整蛊了！')
document.body.style.transform = 'translate(0, 0)';
}, 3000); // 3秒后停止
}
shake()
</code></pre>
<h3 id="2页面随机缩小放大">2，页面随机缩小放大</h3>
<blockquote>
<p>让你的页面随机缩小放大，三秒后恢复原样。</p>
</blockquote>
<pre><code class="language-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秒后停止
}
zoomText();
</code></pre>
<h3 id="3文字乱码">3，文字乱码</h3>
<blockquote>
<p>将页面上的所有中文字符替换为乱码。</p>
</blockquote>
<pre><code class="language-javaScript">document.body.innerHTML = document.body.innerHTML.replace(/[\u4e00-\u9fa5]/g, function(c) {
return String.fromCharCode(c.charCodeAt(0) ^ 0xA5); // 将中文字符转为乱码
});
</code></pre>
<h3 id="4随机变换网页背景">4，随机变换网页背景</h3>
<blockquote>
<p>让网页背景颜色每秒钟随机变化一次。</p>
</blockquote>
<pre><code class="language-javaScript">setInterval(function() {
document.body.style.backgroundColor = '#' + Math.floor(Math.random()*16777215).toString(16);
}, 1000);
</code></pre>
<h3 id="5更改网页标题">5，更改网页标题</h3>
<blockquote>
<p>改变网页的标题，可能会引起用户的注意。</p>
</blockquote>
<pre><code class="language-javaScript">document.title = '你的电脑已被我控制!';
</code></pre>
<h3 id="6隐藏鼠标">6，隐藏鼠标</h3>
<blockquote>
<p>首先会隐藏鼠标，两秒后再显示.</p>
</blockquote>
<pre><code class="language-javaScript">document.body.style.cursor = 'none'; // 隐藏鼠标
setTimeout(function() {
document.body.style.cursor = 'auto'; // 显示
}, 2000);
</code></pre>
<h3 id="7禁用鼠标右键">7，禁用鼠标右键</h3>
<blockquote>
<p>禁止用户使用鼠标右键，使得他们无法通过右键菜单进行复制、粘贴或其他操作。</p>
</blockquote>
<pre><code class="language-javaScript">document.addEventListener('contextmenu', function(e) {
e.preventDefault();
});
</code></pre>
<h3 id="8反转网页内容">8，反转网页内容</h3>
<blockquote>
<p>将网页上所有文本内容反转</p>
</blockquote>
<pre><code class="language-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;
}
}
}
reverseText(document.body);
</code></pre>
<h3 id="9无限弹窗">9，无限弹窗</h3>
<blockquote>
<p>不断地弹出警告框，直到浏览器崩溃或者用户强制关闭。</p>
</blockquote>
<pre><code class="language-javaScript">function spamPopup() {
alert('你被我整蛊了!');
spamPopup(); // 递归调用
}
spamPopup();
</code></pre>
<h3 id="10页面短暂空白">10，页面短暂空白</h3>
<blockquote>
<p>进入页面后出现短暂的3秒空白</p>
</blockquote>
<pre><code class="language-javaScript">function HiddenPage() {
var text = document.body;
text.style.display = 'none'
setTimeout(function() {
alert('哈哈哈，你被我整蛊了!');
text.style.display = 'block'
}, 3000); // 持续3秒后停止
}
HiddenPage();
</code></pre>
<p><em>今年愚人节已经过去了，只能留着明年用了。</em></p>
<p>本文来自《引爆你的网页乐趣！前端十个令人捧腹的JavaScript整蛊代码》张苹果博客，转载请标明。</p><br><br>
来源：https://www.cnblogs.com/zhangapple/p/18167866
頁:
[1]