做在前端，学在前端，玩在前端，爱在前端。 前端一些好玩的事儿，看我们平时都能弄些什么玩儿。
鼠标点击效果
(function () {
var playWords = ['喝热水', '吃了没', '早点睡', '在开会', '多穿点', '是我妹', '有点贵', '我很累', '你别闹', '真没有', '喝多了', '对不起'],
colors = ['#ff4545', '#3eff00'],
wordIdx = Math.floor(Math.random() * playWords.length);
document.body.addEventListener('click', function (e) {
if (e.target.tagName == 'A') {
return;
}
var x = e.pageX,
y = e.pageY,
span = document.createElement('span');
span.textContent = playWords[wordIdx];
wordIdx = (wordIdx + 1) % playWords.length;
color = colors[Math.floor(Math.random() * colors.length)];
span.style.cssText = ['z-index: 9999; position: absolute; top: ', y - 20, 'px; left: ', x, 'px; font-weight: bold; color: ', color].join('');
document.body.appendChild(span);
renderWords(span);
});
function renderWords(el) {
var i = 0, top = parseInt(el.style.top);
var playTimer = setInterval(function() {
if (i > 180) {
clearInterval(playTimer);
el.parentNode.removeChild(el);
} else {
i += 3;
el.style.top = top - i + 'px';
el.style.opacity = (180 - i) / 180;
}
}, 16.7);
}
}());
控制台试试。渣男语录走起。
改变你的网页标题
(function () {
var sourceTitile = document.title;
document.addEventListener('visibilitychange', function() {
document.title = document.hidden ? decodeURI('%E6%82%A8%E6%AD%A3%E5%9C%A8%E6%B5%8F%E8%A7%88%E9%BB%84%E8%89%B2%E7%BD%91%E7%AB%99...') : sourceTitile;
});
}());
在控制台试试，切换网页时让同事看看你的浏览器…
一秒把当前网页变为编辑器
data:text/html, <html contenteditable>
在地址栏输入这行代码回车就可以哦。
隐藏鼠标
var style = document.createElement('style');
document.head.appendChild(style);
style.type = 'text/css';
style.styleSheet ? (style.styleSheet.cssText = '* { cursor: none;!important; }') : style.appendChild(document.createTextNode('* { cursor: none;!important; }'));
控制台试试。这些代码也阔以在地址栏直接搞：
javascript:function play(){var style = document.createElement('style');document.head.appendChild(style);style.type = 'text/css';style.styleSheet ? (style.styleSheet.cssText = '* { cursor: none !important; }') : style.appendChild(document.createTextNode('* { cursor: none !important; }'));}play();
IE和Chrome会自动隐去前面的javascript: 然后把后面的部分当做查询字段。你需要复制上去后手动在前面加上 javascript: 然后回车效果就出来了。
网站模糊不清
同理可得，要是搞点别的什么css,也能给网站加些别的效果。
javascript:function play(){var style = document.createElement('style');document.head.appendChild(style);style.type = 'text/css';style.styleSheet ? (style.styleSheet.cssText = '* { color: transparent !important; text-shadow: #333 0 0 10px !important; }') : style.appendChild(document.createTextNode('* { color: transparent !important; text-shadow: #333 0 0 10px !important; }'));}play();
晃动起来
setTimeout('le()', 1000);
function le() {
function loadCss() { //将css文件引入页面
var myCss = document.createElement("link");
myCss.setAttribute("type", "text/css");
myCss.setAttribute("rel", "stylesheet");
myCss.setAttribute("href", cssHref); //css文件地址
myCss.setAttribute("class", l);
document.body.appendChild(myCss)
}
function h() {
var e = document.getElementsByClassName(l);
for (var t = 0; t < e.length; t++) {
document.body.removeChild(e[t])
}
}
function p() {
var e = document.createElement("div");
e.setAttribute("class", a);
document.body.appendChild(e);
setTimeout(function () {
document.body.removeChild(e)
},
100)
}
function getSize(e) { //获取目标的宽高
return {
height: e.offsetHeight,
width: e.offsetWidth
}
}
function checkSize(i) { //判断目标大小是否符合要求
var s = getSize(i); //获取目标的宽高
return s.height > minHeight && s.height < maxHeight && s.width > minWidth && s.width < maxWidth //判断目标是否符合条件
}
function m(e) {
var t = e;
var n = 0;
while ( !! t) {
n += t.offsetTop;
t = t.offsetParent
}
return n
}
function g() {
var e = document.documentElement;
if ( !! window.innerWidth) {
return window.innerHeight
} else if (e && !isNaN(e.clientHeight)) {
return e.clientHeight
}
return 0
}
function y() {
if (window.pageYOffset) {
return window.pageYOffset
}
return Math.max(document.documentElement.scrollTop, document.body.scrollTop)
}
function E(e) {
var t = m(e);
return t >= w && t <= b + w
}
function setBgm() { //设置音乐
var e = document.createElement("audio");
e.setAttribute("class", l);
e.src = bgmSrc; //bgm地址
e.loop = false;
e.addEventListener("canplay", function () {
setTimeout(function () {
x(k)
}, 500);
setTimeout(function () {
N();
p();
for (var e = 0; e < O.length; e++) {
T(O[e])
}
},
15500)
},
true);
e.addEventListener("ended", function () {
N();
h()
}, true);
e.innerHTML =
" <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";
document.body.appendChild(e);
e.play()
}
function x(e) {
e.className += " " + s + " " + o
}
function T(e) {
e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)]
}
function N() {
var e = document.getElementsByClassName(s);
var t = new RegExp("\\b" + s + "\\b");
for (var n = 0; n < e.length;) {
e[n].className = e[n].className.replace(t, "")
}
}
var minHeight = 3; //最小高度
var minWidth = 3; //最小宽度
var maxHeight = 800; //最大高度
var maxWidth = 1400; //最大宽度
var s = "mw-harlem_shake_me";
var o = "im_first";
var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];
var a = "mw-strobe_light";
var l = "mw_added_css"; //最终要移除的css
var b = g();
var w = y();
var C = document.getElementsByTagName("*");
var k = null;
for (var L = 0; L < C.length; L++) {
var targetDiv = C[L];
if (checkSize(targetDiv)) {
if (E(targetDiv)) {
k = targetDiv;
break
}
}
}
if (targetDiv === null) { //如果没找到合适大小的
console.warn("没能找到合适的大小. 换一个页面试试？.")=
return
}
loadCss(); //将自定义css文件引入页面
setBgm(); //添加背景音乐
var O = [];
for (var L = 0; L < C.length; L++) {
var targetDiv = C[L];
if (checkSize(targetDiv)) {
O.push(targetDiv)
}
};
$("body").css({ //网页整体倾斜效果
"overflow-x": "hidden",
"transform": "rotate(1deg)",
"-webkit-transform": "rotate(1deg)",
"-moz-transform": "rotate(1deg)",
"-o-transform": "rotate(1deg)",
"-ms-transform": "rotate(1deg)"
});
}
var bgmSrc = "https://nd002723.github.io/carnival/audio/Martin%20Jensen%20-%20Fox%20(Loop%20Remix).mp3";
var cssHref = "https://nd002723.github.io/carnival/css/high.css";
控制台试试，页面晃起来咯。代码来自：https://loli-rbq.top/carnival/
