介绍 MDN Playground：让您的代码焕发生机！

<h1>Hello MDN Playground</h1>

h1 {
  text-shadow:
    1px 1px 1px red,
    2px 2px 1px green,
    3px 3px 3px blue;
}

<div class="scene">
  <div class="cube">
    <div class="face front"></div>
    <div class="face back"></div>
    <div class="face right"></div>
    <div class="face left"></div>
    <div class="face top"></div>
    <div class="face bottom"></div>
  </div>
</div>

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scene {
  width: 200px;
  height: 200px;
  perspective: 600px;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: spin 5s infinite linear;
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/a/a0/Firefox_logo%2C_2019.svg");
  background-size: cover;
  background-position: center;
}

.front {
  transform: translateZ(100px);
}

.back {
  transform: rotateY(180deg) translateZ(100px);
}

.right {
  transform: rotateY(90deg) translateZ(100px);
}

.left {
  transform: rotateY(-90deg) translateZ(100px);
}

.top {
  transform: rotateX(90deg) translateZ(100px);
}

.bottom {
  transform: rotateX(-90deg) translateZ(100px);
}

@keyframes spin {
  0% {
    transform: rotateX(0) rotateY(0);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

<div id="synth">
  <div class="keyboard">
    <div class="key white" data-note="C"></div>
    <div class="key black" data-note="C#"></div>
    <div class="key white" data-note="D"></div>
    <div class="key black" data-note="D#"></div>
    <div class="key white" data-note="E"></div>
    <div class="key white" data-note="F"></div>
    <div class="key black" data-note="F#"></div>
    <div class="key white" data-note="G"></div>
    <div class="key black" data-note="G#"></div>
    <div class="key white" data-note="A"></div>
    <div class="key black" data-note="A#"></div>
    <div class="key white" data-note="B"></div>
  </div>
</div>

.keyboard {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex;
  height: 150px;
  width: 310px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.key {
  height: 150px;
  width: 40px;
  margin: 0 2px;
  border-radius: 0 0 5px 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.white {
  background-color: #fff;
}

.black {
  position: relative;
  background-color: #333;
  height: 100px;
  width: 20px;
  margin-left: -10px;
  margin-right: -10px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

[data-note="C#"],
[data-note="D#"],
[data-note="F#"],
[data-note="G#"],
[data-note="A#"] {
  z-index: 1;
}

const notes = {
  C: 261.63,
  "C#": 277.18,
  D: 293.66,
  "D#": 311.13,
  E: 329.63,
  F: 349.23,
  "F#": 369.99,
  G: 392.0,
  "G#": 415.3,
  A: 440.0,
  "A#": 466.16,
  B: 493.88,
};

const context = new AudioContext();
const masterGain = context.createGain();
masterGain.connect(context.destination);

const oscillators = {};

function playNote(note) {
  if (oscillators[note]) return;

  const frequency = getFrequency(note);
  const oscillator = context.createOscillator();
  oscillator.type = "sawtooth";
  oscillator.frequency.setValueAtTime(frequency, context.currentTime);
  oscillator.connect(masterGain);
  oscillator.start();

  oscillators[note] = oscillator;
}

function stopNote(note) {
  if (!oscillators[note]) return;

  const oscillator = oscillators[note];
  oscillator.stop();
  oscillator.disconnect();
  delete oscillators[note];
}

function getFrequency(note) {
  return notes[note];
}

const keys = document.querySelectorAll(".key");

keys.forEach((key) => {
  const note = key.dataset.note;

  key.addEventListener("mousedown", () => {
    playNote(note);
    key.classList.add("active");
  });

  key.addEventListener("mouseup", () => {
    stopNote(note);
    key.classList.remove("active");
  });

  key.addEventListener("mouseleave", () => {
    stopNote(note);
    key.classList.remove("active");
  });
});

document.addEventListener("keydown", (e) => {
  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
  if (!key) return;

  const note = key.dataset.note;
  playNote(note);
  key.classList.add("active");
});

document.addEventListener("keyup", (e) => {
  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
  if (!key) return;

  const note = key.dataset.note;
  stopNote(note);
  key.classList.remove("active");
});

// Add CSS via a style tag to head
const style = document.createElement("style");
style.textContent = state.css;
document.head.appendChild(style);

// Setting HTML to the body.
// This could just be document.body.innerHTML = state.html
// But this won't execute script tags (which we want).
setHTML(document.body, state.html);

// Add JavaScript via script tag to the body
const script = document.createElement("script");
script.textContent = state.js;
document.body.appendChild(script);

dispatchEvent(new Event("load"));

<pre class="html live-sample___breaking">
  <h1>Breaking the internet!</h1>
</pre>
<pre id="output"></pre>

function getLanguage(node) {
  for (const part of ["html", "css", "js"]) {
    if (node.classList.contains(part)) {
      return part;
    }
  }
  return null;
}

function getCode(cls) {
  const code = {};
  document.querySelectorAll(`pre.live-sample___${cls}`).forEach((pre) => {
    let lang = getLanguage(pre);
    if (lang === null) {
      return;
    }
    code[lang] = (code[lang] || "") + pre.textContent;
  });
  return code;
}

const output = document.getElementById("output");
output.textContent = getCode("breaking").html;