使用 Vanilla JavaScript 构建 Netflix 克隆。

入门

定义我们的元素

如果没有 JavaScript 的应用，我们所知的互联网就不会达到今天的水平。JavaScript 已成为互联网体验中不可或缺的一部分，开发人员构建基础和高级应用程序，旨在为用户提供动态且更丰富的交互体验。这意味着，如果没有 JavaScript，社交媒体应用、电商平台、在线视频流、搜索引擎和地图引擎都无法实现。像Netflix这样的在线视频流平台通过分发高质量的媒体内容（这种娱乐方式传统上是由好莱坞电影公司和主要电视网络制作的）为互联网做出了贡献。今天，我们将使用纯 JavaScript 构建一个 Netflix 克隆版本，而构建或理解本文的主要先决条件是了解 HTML、CSS 和原生 JavaScript。

入门

在本文中，我们将介绍如何使用 HTML、CSS 和纯 JavaScript 创建 Netflix 克隆，并以一种每个开发人员（无论技能水平如何）都能够理解的方式编写。

定义我们的元素

背景标题

标题栏由一张背景图片组成，该图片使用coverCSS 属性作为背景大小，以覆盖整个容器，即使需要拉伸图片或裁剪掉边缘一点点。创建的“登录”和“开始”按钮通过一个元素链接到我们的登录页面onclick()，该元素调用一个函数。

function displayButton(){
    var final = document.getElementById('final');
    var main = document.getElementById('main');
    final.classList.toggle('closed');
    main.classList.add('closed');
}

上述函数的目的是隐藏 Netflix 标题，然后在单击“登录”或“开始”按钮后显示登录页面。

下图显示了 Netflix 标题：

登录功能

登录功能由“电子邮件地址”和“密码”input元素组成，其中电子邮件地址使用正则表达式字符序列来验证if/else语句。该if/else语句检查输入到电子邮件地址元素中的任何值是否为电子邮件input地址，否则会弹出警告，提示电子邮件地址无效。如果电子邮件地址为空，则会弹出另一个警告，提示电子邮件地址不能为空。

if(eVal === ''){
  alert('Email cannot be left blank');
  } else if(!isEmail(eVal)){
    alert('Email is invalid');
  } else if(isEmail(eVal)){
    console.log(true);
  }

function isEmail(EmailVal){
  return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(EmailVal);
}

密码输入元素也使用了 if/else 语句来防止其留空。如果两个输入元素都通过了验证测试，则会在登录按钮下方弹出一条消息“感谢您登录。点击退出按钮”。

if(pVal === ''){
  alert('Password cannot be left blank');
  } else {
    console.log(true);
  }
  if(isEmail(eVal) == true && pVal !== true){
    thanks.innerHTML = 'Thanks for signing in. Click the sign out button'
  }

视频和 GIF

autoplay playsinline muted loop本节将介绍视频、图片和动图的使用。视频元素中添加了属性，该playsinline属性使视频始终在所需位置播放，而非全屏播放。借助一些 CSS 属性，视频和动图也会调整大小，以适应所需位置。

构建手风琴菜单

我们需要构建一个手风琴面板来存放常见问题 (FAQ) 及其答案，为此需要一个手风琴菜单。手风琴
菜单是一个图形控制元素，包含一个垂直堆叠的项目列表，点击这些项目即可显示或隐藏与其相关的内容。项目列表中提供了相应的答案，点击控制元素即可显示答案。一个函数链接到 FAQ 元素，使其能够轻松地显示和隐藏其内容。

下面的功能可以显示或隐藏手风琴内容。

function toggle1(){
    var x = document.getElementById('ans1');
    var y = document.getElementById('rot1');
    y.classList.toggle('rotate');
    x.classList.toggle('closed');
}

如上所示，该函数使用属性切换控制元素答案的类classlist，其中该类closed具有 CSS 属性来display: none隐藏或显示其内容。

页脚

页脚使用gridCSS 属性以行和列的形式进行样式设置，从而简化了网页设计，无需使用浮动和定位。该 CSS 属性grid-template-columns: repeat(4, 1fr)创建了 4 列和 1 行。以下额外的 CSS 属性可使其外观更佳。

.footer-column{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 4rem;
}

视频

正在使用的应用程序演示

结论

掌握 JavaScript 基础知识并应用以上几个步骤，你就能构建一个 Netflix 克隆版。为了更好地理解本文的代码库，你可以在Github上查看。