习题

气球

编写一个显示气球的页面（使用气球 emoji，\ud83c\udf88）。 当你按下上箭头时，它应该变大（膨胀）10%，而当你按下下箭头时，它应该缩小（放气）10%。

您可以通过在其父元素上设置font-size CSS 属性（style.fontSize）来控制文本大小（emoji 是文本）。 请记住在该值中包含一个单位，例如像素（10px）。

箭头键的键名是"ArrowUp"和"ArrowDown"。确保按键只更改气球，而不滚动页面。

实现了之后，添加一个功能，如果你将气球吹过一定的尺寸，它就会爆炸。 在这种情况下，爆炸意味着将其替换为“爆炸 emoji，\ud83d\udca5”，并且移除事件处理器（以便您不能使爆炸变大变小）。

  1. <p>&#x1f4a5;</p>
  2. <script>
  3.   // Your code here
  4. </script>

鼠标轨迹

在 JavaScript 早期，有许多主页都会在页面上使用大量的动画，人们想出了许多该语言的创造性用法。

其中一种是“鼠标踪迹”，也就是一系列的元素，随着你在页面上移动鼠标，它会跟着你的鼠标指针。

在本习题中实现鼠标轨迹的功能。使用绝对定位、固定尺寸的<div>元素，背景为黑色（请参考鼠标点击一节中的示例）。创建一系列此类元素，当鼠标移动时，伴随鼠标指针显示它们。

有许多方案可以实现我们所需的功能。你可以根据你的需要实现简单的或复杂的方法。简单的解决方案是保存固定鼠标的轨迹元素并循环使用它们，每次mousemove事件触发时将下一个元素移动到鼠标当前位置。

  1. <style>
  2.   .trail { /* className for the trail elements */
  3.     position: absolute;
  4.     height: 6px; width: 6px;
  5.     border-radius: 3px;
  6.     background: teal;
  7.   }
  8.   body {
  9.     height: 300px;
  10.   }
  11. </style>
  13. <script>
  14.   // Your code here.
  15. </script>

选项卡

选项卡面板广泛用于用户界面。它支持用户通过选择元素上方的很多突出的选项卡来选择一个面板。

本习题中，你必须实现一个简单的选项卡界面。编写asTabs函数，接受一个 DOM 节点并创建选项卡界面来展现该节点的子元素。该函数应该在顶层节点中插入大量<button>元素，与每个子元素一一对应，按钮文本从子节点的data-tabname中获取。除了显示一个初始子节点，其他子节点都应该隐藏（将display样式设置成none），并通过点击按钮来选择当前显示的节点。

当它生效时将其扩展，为当前选中的选项卡，将按钮的样式设为不同的，以便明确选择了哪个选项卡。

  1. <tab-panel>
  2.   <div data-tabname="one">Tab one</div>
  3.   <div data-tabname="two">Tab two</div>
  4.   <div data-tabname="three">Tab three</div>
  5. </tab-panel>
  6. <script>
  7.   function asTabs(node) {
  8.     // Your code here.
  9.   }
  10.   asTabs(document.querySelector("tab-panel"));
  11. </script>