七爪源码：使用 JavaScript 创建玩家名称-网络知识

如果您开始编码之旅，则需要跟踪很多事情。相信我，有一段时间我什至不知道“Hello World”是什么！但是，一段时间后，我能够弄清楚所有这些小玩意儿，并对自己的编码能力更有信心。

JavaScript 是一种编程语言，可让您在网页上实现复杂的功能。如果你现在访问一个网站，并注意到动画图形或交互式地图——很可能涉及到 JavaScript。但是，JavaScript 不会像其他两个非常重要的系统——CSS 和 HTML 一样。

本质上，为了使某些东西动画化，您需要使用这三种 Web 技术创建一个层。第一个是HTML；这将为我们的创作赋予意义，并允许我们嵌入图像等。接下来我们将集成 CSS；这将使我们能够选择一些时髦的颜色，并从本质上使产品成为我们自己的产品。最后，我们将使用 JavaScript，这将允许您控制多媒体、动画图像和更新内容。

假设我们要创建一个名为 Ruby 的播放器。下面是我们集成 HTML、CSS 和 JavaScript 后的样子。首先让我们用 HTML 给出玩家名称结构：

<p>Player 1: Ruby</p>

接下来，我们将通过添加字体、字母间距、边框、背景以及介于两者之间的所有内容来赋予它一些勇气：

p {n font-family: 'helvetica neue', helvetica, sans-serif;n letter-spacing: 1px;n text-transform: uppercase;n text-align: center;n border: 2px solid rgba(0,0,200,0.6);n background: rgba(0,0,200,0.3);n color: rgba(0,0,200,0.6);n box-shadow: 1px 1px 2px rgba(0,0,200,0.4);n border-radius: 10px;n padding: 3px 10px;n display: inline-block;n cursor: pointer;n}

最后，让我们给它一些动态行为：

const para = document.querySelector('p');nnpara.addEventListener('click', updateName);nnfunction updateName() {n const name = prompt('Enter a new name');n para.textContent = `Player 1: ${name}`;n}

这就是我们所拥有的！