引爆你的网页乐趣!前端十个令人捧腹的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整蛊代码。的更多相关文章
- vConsole--针对手机网页的前端 console 调试面板。
一个针对手机网页的前端 console 调试面板. 简介 vConsole 是一个网页前端调试面板,专为手机 web 页面量身设计,帮助开发者更为便捷地进行开发调试工作. 手机预览 http://we ...
- 前端优秀作品展示,JavaScript 版水果忍者
<水果忍者>是一款非常受喜欢的手机游戏,刚看到新闻说<水果忍者>四周年新版要上线了.网页版的切水果游戏由百度 JS 小组开发,采用 vml + svg 绘图,使用了 Rapha ...
- web前端面试试题总结---javascript篇
JavaScript 介绍js的基本数据类型. Undefined.Null.Boolean.Number.String. ECMAScript 2015 新增:Symbol(创建后独一无二且不可变的 ...
- 前端试题本(Javascript篇)
JS1. 下面这个JS程序的输出是什么:JS2.下面的JS程序输出是什么:JS3.页面有一个按钮button id为 button1,通过原生的js如何禁用?JS4.页面有一个按钮button id为 ...
- 3 HTML&JS等前端知识系列之javascript的基础
preface 作为一名运维开发,必须懂得前端知识,比如javascript,dom等等,下面就聊聊javascript. include 数据格式 条件判断,循环流程等. 函数 面向对象 what ...
- 前端学习 第二弹: JavaScript中的一些函数与对象(1)
前端学习 第二弹: JavaScript中的一些函数与对象(1) 1.apply与call函数 每个函数都包含两个非继承而来的方法:apply()和call(). 他们的用途相同,都是在特定的作用域中 ...
- 【转发】网易邮箱前端技术分享之javascript编码规范
网易邮箱前端技术分享之javascript编码规范 发布日期:2013-11-26 10:06 来源:网易邮箱前端技术中心 作者:网易邮箱 点击:533 网易邮箱是国内最早使用ajax技术的邮箱.早在 ...
- 网页绘制图表 Google Charts with JavaScript #2 ....与ASP.NET网页结合 (ClientScriptManager.RegisterStartupScript 方法)
此为文章备份,原文出处(我的网站) 网页绘制图表 Google Charts with JavaScript #2 ....与ASP.NET网页结合 (ClientScriptManager.Regi ...
- 网页绘制图表 Google Charts with JavaScript #1....好强、好简单啊!
此为文章备份,原文出处(我的网站) 网页绘制图表 Google Charts with JavaScript....好强.好简单啊!#1 http://www.dotblogs.com.tw/mis2 ...
- php获取网页中图片并保存到本地的代码
php获取网页中图片并保存到本地的代码,将网页中图片保存本地文件夹: <?php /** * 获取网页中图片,并保存至本地 * by www.jbxue.com */ header(" ...
随机推荐
- LOTO仪器---如何用LOTO的EMI模块锁定你PCB上的干扰做分析?
在开发电子产品的过程中,电磁干扰(EMI)可能会导致许多问题,可能会在模拟电路上出现很大的噪声,可能导致通讯乱码,可能导致芯片无规律重启,可能会导致数字电路有莫名其妙的误动作. 硬件工程师通常会把主要 ...
- 镭速Raysync v6.6.8.0版本发布
最近镭速发布了v6.6.8.0版本,已经发布上线了.主要更新内容有服务器下发任务支持指定客户端,客户端增加日志清理和日志压缩,自动删除源文件保持源目录结构,支持将文件投递给其他成员等功能,详细的更新内 ...
- linux 安装mysql8.0.11
1.使用系统的root账户 2.切换到/use/local 目录下 3.下载mysql ?wget https://dev.mysql.com/get/Downloads/MySQL-8.0/mysq ...
- opensips的dispatcher模块笔记
操作系统 :CentOS 7.6_x64 opensips版本:2.4.9 dispatcher模块模块实现了基于目的地址的调度功能,可用作无状态负载均衡,但不能保证均匀分配.今天整理下CentOS7 ...
- KingbaseES V8R6集群运维案例之---sys_hba.conf限制客户端访问数据库
KingbaseES V8R6集群运维案例之---sys_hba.conf限制客户端访问数据库 案例说明: 客户端认证是由一个配置文件(通常名为sys_hba.conf并被存放在数据库集簇目录中)控制 ...
- 使用OpenMP与AVX优化矩阵乘法
使用OpenMP与AVX优化矩阵乘法 由于课设内容做的太过简(mo)单(yu),于是在去年12月初的时候就计划写三篇博客随笔作为实验报告,前两篇简单介绍了OpenMP和SIMD指令进行铺垫,本篇将会介 ...
- #换根dp#洛谷 2986 [USACO10MAR]Great Cow Gathering G
题目 分析 处理出所有点到根节点的答案,然后换根依次求最小值 代码 #include <cstdio> #include <cctype> #define rr registe ...
- 一文告诉你商业智能BI如何推动推动智慧物流发展
随着网络消费的不断发展,推动了物流等相关产业的迅速发展,另外无论是2B业务还是2C业务的生产制造企业,对物流的要求都越来越高,尤其体现在对物流全程透明可视化的需求.商业智能BI平台的引入,大大提高了物 ...
- 面试连环炮系列(二十️四):为什么选择RocketMQ
为什么选择RocketMQ,而不是其他MQ 性能:阿里支撑,经受住淘宝,天猫双11重重考验:性能高:可靠性好:可用性高:易扩展. 功能:功能完善,我们需要的功能基本都够满足,如:事务消息,消息重试,死 ...
- Android开发 Error:The number of method references in a .dex file cannot exceed 64K.Android开发 Error:The number of method references in a .dex file cannot exceed 64K
前言 错误起因: 在Android系统中,一个App的所有代码都在一个Dex文件里面. Dex是一个类似Jar的存储了多有Java编译字节码的归档文件. 因为Android系统使用Dalvik虚拟机, ...