引爆你的網頁樂趣！前端十個令人捧腹的JavaScript整蠱程式碼。

张苹果博客發表於2024-04-30
網頁前端JavaScript

愚人節整蠱程式碼。想要在網頁上增添一抹幽默與驚喜嗎？或是想給你的朋友一個意想不到的“小驚喜”？那麼，這十款簡單而有趣的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();

今年愚人節已經過去了，只能留著明年用了。

本文來自《引爆你的網頁樂趣！前端十個令人捧腹的JavaScript整蠱程式碼》張蘋果部落格，轉載請標明。

相關文章