首页 > 编程语言 >引爆你的网页乐趣!前端十个令人捧腹的JavaScript整蛊代码。

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

时间:2024-04-30 13:34:10浏览次数:28  
标签:function body style 网页 JavaScript node 令人捧腹 document Math

愚人节整蛊代码。想要在网页上增添一抹幽默与惊喜吗?或是想给你的朋友一个意想不到的“小惊喜”?那么,这十款简单而有趣的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();  

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

标签:function,body,style,网页,JavaScript,node,令人捧腹,document,Math
From: https://www.cnblogs.com/zhangapple/p/18167866

相关文章

  • JavaScript运算符及优先级全攻略,点击立刻升级你的编程水平!
    在编程的世界里,运算符是构建逻辑、实现功能的重要工具。它能帮助我们完成各种复杂的计算和操作。今天,我们就来深入探索JavaScript中运算符的奥秘,掌握它们的种类和优先级,让你的代码更加高效、简洁!一、什么是运算符运算符,顾名思义,就是用于执行特定操作的符号。在JavaScript中,运......
  • mORMot 1.18 第08章 Delphi中的服务器端JavaScript
    mORMot1.18第8章Delphi中的服务器端JavaScript在mORMot框架中,对JavaScript脚本的支持被称为MonkeyOnRails(版权归PavelMashlyakovsky所有,邮箱:[email protected]),它借助了Mozilla基金会的SpiderMonkey类。mORMot允许程序员编写功能强大的应用程序,但如果客户希望自定义应用......
  • 网页布局------导航栏悬浮特效
    实现效果:当鼠标指针悬浮在导航栏上会出现内阴影效果页面结构<ul><li>首页</li><li>知识星球</li><li>趣味问答</li><li>奖品</li></ul>页面样式*{margin:0;padding:0;......
  • JavaScript: FullScreen
     <!doctypehtml><html><head><metacharset="utf-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metacontent="text/html;charset=utf-8"http-equiv=&......
  • JavaScript流程控制语句
    JavaScript流程控制语句在一个程序执行的过程中,各条语句的执行顺序对程序的结果是有直接影响的。所以,我们必须清楚每条语句的执行流程。而且,很多时候我们要通过控制语句的执行顺序来实现我们想要的业务逻辑和功能。分类一般我们把流程控制语句分为以下三类顺序结构选择结......
  • js设置网页标题、关键字、描述
    import.meta.env.VITE...Vue.js3.x获取环境变量letdocTitle=import.meta.env.VITE_TITLE;letdocDesc=import.meta.env.VITE_DESCRIPT;letdocKeywords=import.meta.env.VITE_KEYWORDS;//设置页面标题document.title=docTitle;//设置页......
  • 网页布局------几种布局方式
    1、认识布局(1)确认页面的版心宽度版心是指页面的有效使用面积,主要元素以及内容所在的区域,一般在浏览器窗口中水平居中显示。在设计网页时,页面尺寸宽度一般为1200-1920排序。但是为例适配不同分辨率的显示器,一般版心宽度为1000-1200px。例如,屏幕分辨率为1021*768的浏览器,在浏览器......
  • 揭秘JavaScript数据世界:一文通晓基本类型和引用类型的精髓!
    在编程的世界里,数据是构建一切的基础。就像建筑师需要了解不同材料的强度和特性一样,程序员也必须熟悉各种数据类型。今天,我们就来深入探讨JavaScript中的数据类型,看看它们如何塑造我们的代码世界。一、JavaScript数据类型简介数据类型是计算机语言的基础知识,数据类型广泛用于变......
  • 在html中应用JavaScript
    1.在html中调用jsjs需要用<script>脚本写入位置</script>声明;也可以用外部文件引入,如<scripttype="text/javascript"src="script1.js"></script>。当js位于html的<head>内:这些脚本在选择触发它的时候被触发当js位于html的<body>内:这些脚本在页面加载时触发2.js的数据类......
  • 在JavaScript中,DOM对象与jQuery对象的区别与转换
    Dom原生对象和jQuery对象的区别:jQuery选择器得到的jQuery对象和标准的js中的document.getElementById()取得的dom对象是两种不同类型,两者不等价。注:js原生获取的dom是一个对象;jQuery对象就是一个数组对象。JQuery无法使用DOM对象的任何方法,同样的DOM对象也不能使用JQuery里......