玩复活节彩蛋：让你的网站更有趣的点子

Konami-JS

Clippy

我最近更新了我的个人网站，增加了一个有趣的模式，我尝试在其中添加尽可能多的我能想到的复活节彩蛋。

我早年很喜欢制作网站：艳丽的色彩，使用奇怪的 CSS 属性，虽然不太方便用户使用，但摆弄起来很有趣（说实话：我曾经有一个设置cursor: none链接悬停的网站，非常流行），我想重新创建它。

下面我概述了我添加的一些内容，以及我编写的代码的简单版本（实际代码还有一些片段），供任何想要尝试类似内容的 JavaScript 初学者使用。

👆显而易见：点击某个东西会触发一个彩蛋

这个彩蛋很容易添加，通常也很容易找到。我添加了一个点击监听器，document.body每当你点击时，都会在页面上插入一个随机的表情符号。我还添加了一些季节性的变体（万圣节、圣诞节），这样如果你在特殊的日子访问，你看到的表情符号就会适合那个场合。

它看起来像这样：

var today = new Date();
// Regular days just use these emoji
var possibleEmoji = [
      '🐹',
      '🐢',
      '🌼',
      '🍉'
    ];

// Special emoji if close to Halloween
if (today.getMonth() === 9 && [31, 30, 29, 28].indexOf(today.getDate()) !== -1) {
  possibleEmoji = [
    '👻',
    '🎃',
    '🧟‍♀️'
  ];
}

// Special emoji if close to Christmas
if (today.getMonth() === 11 && [21, 22, 23, 24, 25, 26].indexOf(today.getDate()) !== -1) {
  possibleEmoji = [
    '❄️',
    '🎅',
    '🎁'
  ];
}

document.body.addEventListener('click', function (event) {
  /* 
   * generate random number that falls between 0 and the total number 
   * of emoji possibilities
  */
  var randomNumber = Math.round(Math.random() * possibleEmoji.length);

  var span = document.createElement('span'); 
  span.textContent = possibleEmoji[randomNumber];
  span.className= 'emoji click-emoji';
  /* 
   * event.clientX is where the mouse was horizontally at the time of 
   * the click. This way we can insert the emoji in the exact location 
   * the user clicked.
  */
  span.style.left = event.clientX + 'px';
  // event.clientY - same idea as clientX, but vertical position.
  span.style.top = event.clientY + 'px'; 
  /* Of course these values are useless if we don’t set the emoji's
   * position to something outside the normal flow of content. */
  span.style.position = 'fixed';
  document.body.appendChild(span);                           
});

⌨️ 仍然很基础，但有点难：键盘事件

我喜欢这个功能，但它最大的缺点就是只能在桌面浏览器上使用。不过，我还是添加了很多键盘处理的小彩蛋——我不会在这篇文章里全部揭晓（那样还有什么意思？！）——不过其中一个是按下c键（在我看来，是“清理”的缩写），让你在页面上插入的所有表情符号都动起来。

它看起来是这样的 -

document.addEventListener('keyup', function (event) {
  if (event.keyCode === 67) { // c
    // Find all emoji elements that we want to sweep away
    var clickEmoji = document.getElementsByClassName('click-emoji');
    var totalEmoji = clickEmoji.length;

    /* If you want to support older browsers you may want to 
     * polyfill forEach https://caniuse.com/#search=foreach
    */
    Array.from(clickEmoji).forEach(function (emoji, index) {
      /*
       * Change the animation delay to be random so that they fall off 
       * at different times, not all at once
      */
      var maximumDelay = totalEmoji.length > 10 ? 1000 : 400;
      if (index === 0) {
        emoji.style['animation-delay'] = 0 + 'ms';
      } else {
        emoji.style['animation-delay'] = Math.round(Math.random() * maximumDelay) + 'ms';
      }

      /* 
       * Make animation duration random as well for the same reason: 
       * Makes it more interesting if they fall at different speeds
       */
      emoji.style['animation-duration'] = Math.max(Math.round(Math.random() * 700), 100) + 'ms';

      // Once the emoji is done falling, we can remove it from the DOM
      emoji.addEventListener('animationend', function () {
        document.body.removeChild(emoji);
      });

      /*
       * The remainder of the animation logic is in CSS, triggered by 
       * the fall-down class
      */
      emoji.classList.add('fall-down');
  });
});

添加点击和键盘事件很有趣，但我觉得它们有点过时了，所以我试着想出其他巧妙的技巧。

🖍 很难找到：选择页面上的某些文本

经过一番思考，我想出了这个主意，我认为它非常独特：如果你突出显示页面上的某个单词，就会出现一个复活节彩蛋。

在这种情况下：如果您在页面上突出显示我的名字，就会出现我的照片。

我是这样完成的：

var profileImage = document.createElement('img');
profileImage.setAttribute('src', './me-1.jpg');
profileImage.classList.add('profile-pic');

document.addEventListener('selectionchange', function() {
  var selection = document.getSelection();
  var selectedText = selection ? selection.toString() : null;

  // Warning for old browsers again: May want to polyfill https://caniuse.com/#search=includes
  if (['Rosemarie', 'Rosemarie Robertson', 'Rose'].includes(selectedText)) {
    // Add if you selected my name
    mainIntro.appendChild(profileImage);
  } else if (profileImage.parentNode) {
    // Remove if you de-selected it
    mainIntro.removeChild(profileImage);
  }
});

还有其他想法吗？

我仍然想花时间打造一些有趣的东西供大家探索，所以很想听听大家的建议！我随时准备迎接挑战😇

鏂囩珷鏉yu簮锛�https://dev.to/rose/playing-with-easter-eggs-ideas-for-making-your-website-more-fun-1p0p

玩彩蛋：让你的网站更有趣的点子 Konami-JS Clippy