网络知识 科技 七爪源码:使用 JavaScript 创建玩家名称

七爪源码:使用 JavaScript 创建玩家名称

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

七爪源码:使用 JavaScript 创建玩家名称

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}

这就是我们所拥有的!

七爪源码:使用 JavaScript 创建玩家名称

这是一个有趣的项目,我认为这些是非常核心的程序,对于想要进入 Web 开发的人们来说是必不可少的。 我希望在下一篇文章中见到你!

关注七爪网,获取更多APP/小程序/网站源码资源!

返回顶部