4月1日,今天是愚人节,站长祝大家愚人节快乐!
既然是愚人节嘛,那就要整点好玩的功能
废话不多说,看效果:
整个页面都倒过来了,包括logo。把下面代码添加到footer.php文件即可,一定要添加到网站底部文件哦
<script>
if (!mkReaddata("fool")) { // 如果没有触发过彩蛋
document.body.classList.add('mk-fool-egg'); // 给 body 增加彩蛋 class
window.setTimeout(function () { // 定时退出彩蛋
mkSavedata("fool", "fool"); // 记录彩蛋已被执行
alert("恭喜发现愚人节彩蛋 :)"); // 弹窗(这里可以自己发挥)
document.body.classList.remove('mk-fool-egg');
}, 5000); // 这里的 5000 代表 5s,也就是经过 5s 后弹窗,并退出彩蛋
}
// 写入 Cookie
function mkSavedata(key, data) {
key = 'mk_' + key;
data = JSON.stringify(data);
if (window.localStorage) {
localStorage.setItem(key, data);
}
}
// 读取 Cookie
function mkReaddata(key) {
if (!window.localStorage) return '';
key = 'mk_' + key;
return JSON.parse(localStorage.getItem(key));
}
</script>
<style>
/* 彩蛋样式 */
.mk-fool-egg {
-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
-moz-transform: matrix(-1, 0, 0, 1, 0, 0);
transform: matrix(-1, 0, 0, 1, 0, 0);
-o-transform: skew(0deg, 180deg) scale(-1, 1);
filter:progid: DXImageTransform.Microsoft.BasicImage(mirror=1);
}
</style>
根据cookies来决定弹窗,一个cookies仅弹窗一次,对用户体验比较友好,感兴趣的小伙伴去试试吧~