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

  1. vConsole--针对手机网页的前端 console 调试面板。

    一个针对手机网页的前端 console 调试面板. 简介 vConsole 是一个网页前端调试面板,专为手机 web 页面量身设计,帮助开发者更为便捷地进行开发调试工作. 手机预览 http://we ...

  2. 前端优秀作品展示,JavaScript 版水果忍者

    <水果忍者>是一款非常受喜欢的手机游戏,刚看到新闻说<水果忍者>四周年新版要上线了.网页版的切水果游戏由百度 JS 小组开发,采用 vml + svg 绘图,使用了 Rapha ...

  3. web前端面试试题总结---javascript篇

    JavaScript 介绍js的基本数据类型. Undefined.Null.Boolean.Number.String. ECMAScript 2015 新增:Symbol(创建后独一无二且不可变的 ...

  4. 前端试题本(Javascript篇)

    JS1. 下面这个JS程序的输出是什么:JS2.下面的JS程序输出是什么:JS3.页面有一个按钮button id为 button1,通过原生的js如何禁用?JS4.页面有一个按钮button id为 ...

  5. 3 HTML&JS等前端知识系列之javascript的基础

    preface 作为一名运维开发,必须懂得前端知识,比如javascript,dom等等,下面就聊聊javascript. include 数据格式 条件判断,循环流程等. 函数 面向对象 what ...

  6. 前端学习 第二弹: JavaScript中的一些函数与对象(1)

    前端学习 第二弹: JavaScript中的一些函数与对象(1) 1.apply与call函数 每个函数都包含两个非继承而来的方法:apply()和call(). 他们的用途相同,都是在特定的作用域中 ...

  7. 【转发】网易邮箱前端技术分享之javascript编码规范

    网易邮箱前端技术分享之javascript编码规范 发布日期:2013-11-26 10:06 来源:网易邮箱前端技术中心 作者:网易邮箱 点击:533 网易邮箱是国内最早使用ajax技术的邮箱.早在 ...

  8. 网页绘制图表 Google Charts with JavaScript #2 ....与ASP.NET网页结合 (ClientScriptManager.RegisterStartupScript 方法)

    此为文章备份,原文出处(我的网站) 网页绘制图表 Google Charts with JavaScript #2 ....与ASP.NET网页结合 (ClientScriptManager.Regi ...

  9. 网页绘制图表 Google Charts with JavaScript #1....好强、好简单啊!

    此为文章备份,原文出处(我的网站) 网页绘制图表 Google Charts with JavaScript....好强.好简单啊!#1 http://www.dotblogs.com.tw/mis2 ...

  10. php获取网页中图片并保存到本地的代码

    php获取网页中图片并保存到本地的代码,将网页中图片保存本地文件夹: <?php /** * 获取网页中图片,并保存至本地 * by www.jbxue.com */ header(" ...

随机推荐

  1. KingbaseES 名词解释之timeline

    timeline定义 每当归档文件恢复完成后,创建一个新的时间线用来区别新生成的WAL记录.WAL文件名由时间线和日志序号组成 引入timeline的意义 为了理解引入时间线的背景,我们来分析一下,如 ...

  2. 算法学习笔记【1】| LCA(最近公共祖先)

    LCA(最近公共祖先) Part 1:逐步上跳 假设u,v是所求的两点,先把深度大的点逐步上移直到深度相同. 然后两者同时上移,直到第一次遇到相同的点为止. 时间复杂度: O(n)<script ...

  3. 从零开始学Spring Boot系列-集成MyBatis-Plus

    在Spring Boot应用开发中,MyBatis-Plus是一个强大且易于使用的MyBatis增强工具,它提供了很多实用的功能,如代码生成器.条件构造器.分页插件等,极大地简化了MyBatis的使用 ...

  4. #莫比乌斯反演,杜教筛#洛谷 6055 [RC-02] GCD

    题目 分析 如果令 \(u=pj,v=qj\) ,那么本质上就是让 \(gcd(i,u,v)==1\) 那就是 \(\sum_{i=1}^n\sum_{u=1}^n\sum_{v=1}^n[gcd(i ...

  5. AtCoder Regular Contest 115(without F)

    ARC115 A - Two Choices 题目传送门 分析 可以发现正确答案数量相同当且仅当 \(S_i\) xor \(S_j\) 所含有的 1 的数量为偶数. 再将这个简化一下,正确答案相同当 ...

  6. 驾驭数据的能力,如同使用ChatGPT一样,是现代职场人的必修课

    现代职场所比拼的除了聪明才智.过往经验之外,很多软性技能也尤为重要. 现在已经不是像网络游戏开局拿着一根小木棍打天下的时代了,这将是一场武装到牙齿的较量,对于各类"装备"的驾驭能力 ...

  7. R语言学习3:数据框处理(1)

    本系列是一个新的系列,在此系列中,我将和大家共同学习R语言.由于我对R语言的了解也甚少,所以本系列更多以一个学习者的视角来完成. 参考教材:<R语言实战>第二版(Robert I.Kaba ...

  8. Qt6安装

    *:Qt现在基本都是在线安装了,但是下载的速度特别慢,所以此次记录下如何提速,快速安装 一.在线安装器下载 我用的这个(非官网):https://mirrors.tuna.tsinghua.edu.c ...

  9. 在Mac系统上使用Qt调用摄像头不出图解决方法

    需求:在Mac系统上,调用摄像头,实现旋转.缩放.处理视频帧等功能 问题:使用获取视频帧的方法,在Mac上调不起来摄像头 解决方法: 将视频窗口(QVideoWidget)和视频帧(QVideoFra ...

  10. 第八篇:socket网络编程

    一.网络编程简绍 二.socket连接过程 三.socket文件传输 四.socket循环接收 五.socket粘包处理 六.FTP文件传输 七.socketServer 八.web框架 #!/usr ...