> 运动

时区设置是什么意思(时区设定)

导语：时区项目：建立过程

几周前我完成了一个项目，它是一个网页的前端设计，允许您检查所有时区的时间。对于这个项目，我使用了 Javascript、HTML 和 CSS。

这就是完成的项目的样子。

要求

节点.js国家和时区包

要安装它们，请检查 Github 存储库中 Readme.md 文件中的指南

首先，在转到 JavaScript 代码之前，我将讨论 HTML 结构。

HTML 结构

整个页面可以分为四个主要部分，即；

背景图像容器

容器

在容器中，我们有

容器头容器体

container - 黄色轮廓

container-header - 红色轮廓

container-body - 蓝色轮廓

容器 div 包含标题和容器主体，容器更像是父框架，内部有两个较小的框架。

容器头

在标题中，我们有 head-content div，它包含标题中的元素。在其中，我们有一个标签和一个选择标签。选择标签形成一个下拉菜单。下拉菜单可以接受其中的许多选项。

<select name=&34; id=&34;> <option> Option 1 </option> <option> Option 2</option> <option> Option 3</option></select>

和 xxxx 可以替换为您选择的任何字符串

上面的代码显示了使用 <select> 标记创建可点击下拉菜单的一般语法。

创建下拉列表以形成所有时区的列表，要使用 HTML 手动执行此操作，我们必须在 select 标记中创建多个选项标记。

看起来像这样

<select name=&34; id=&34;> <option> Africa/Abidjan </option> <option> Africa/Algiers</option> <option> Africa/Bissau</option> ......</select>

如您所见，我们必须在 50 多个时区执行此操作，这将非常耗时。更好的方法是使用 JavaScript 自动化整个过程，我们稍后会讨论。

容器体

容器的主体内部有三个子框架，

窗格（左右部分）中间窗格

您可以看到这两个窗格是相似的，它们都具有相同的类和相似的属性。

为了在容器主体内水平排列子框架，我首先将容器的 display 属性设置为 flex。这第一步允许您在任何方向对齐其中的内容。要在其中水平排列子帧，您必须将 flex-direction 属性设置为 row；

窗格（左右部分）

左右窗格是相同的，只是它们在容器中的位置不同。

在每个窗格中，我们有两个较小的框架（我们称它们为时间框）。这些时间框中的每一个都用作不同时区的容器。

对于每个时间框，我们都有较小的框架，一个用于时间，另一个用于国家详细信息。

国家详情 — 蓝色

时间——紫色

country-details div 显示城市名称和大陆名称。在上面的例子中，巴黎是一座城市，它是失禁的欧洲。

对于这个项目，我总共创建了 5 个时间框，每个窗格上两个，然后在中间一个更大的一个。中间的那个更重要，因为这是从下拉菜单中选择的时区将显示的地方。其他 4 个时间框用于显示任意 4 个主要时区的时间。

JAVASCRIPT代码

JS代码基本上

在下拉菜单中创建所有时区的列表在下拉菜单中，您可以选择您选择的时区，然后 JS 代码会监听所选时区获取对应的 UTC 偏移量。检查夏令时。使用所选时区的详细信息更新 HTML 文档，详细信息包括城市和大陆。这显示在中间窗格中计算所选时区的当前时间。使用计算的时间更新 HTML 文档。生成其他 4 个主要时区的详细信息，并将它们更新到较小的时区。

第1步

第 1-4 行

我导入了国家和时区包

使用与所有时区名称对应的键创建了一个排序对象

创建了一个变量下拉列表并将其分配给 HTML 文档标题中的下拉菜单。

第 9-13 行：这里的 for 循环为每个时区创建了不同的选项元素，这在下拉菜单中形成了不同的可点击选择。

第2步

此处的代码块在选择下拉菜单中的选项时进行侦听。

第 102 行：将所选选项的文本值分配给变量 selectedTimeZone。这个 selectedTimeZone 通常是“城市/大陆”的形式。

第 103 行：获取所选时区的所有属性，这些属性可能包括 utcOffset、dstOffset 等。所有这些属性都分配给变量 timeZoneAttr

步骤 3-7

第 106 行调用 updateTimeBox() 函数。这个函数的目的是

获取 UTC 偏移量调用 checkDayLightSaving() 函数，该函数检查所选时区是否有夏令时。根据 checkDayLightSaving() 函数的响应，calcTime() 函数然后计算所选时区的时间使用计算的时间、城市名称和大陆更新时间框。

第 107 行调用了 genereateSmallTimeZones() 函数，该函数重复步骤 3-5 四次，在每种情况下，所选时区将是“欧洲/巴黎”、“欧洲/伦敦”、“美国/纽约”、“亚洲”之一 /东京”。

您可以通过更改 arrayTimeZones 变量中的元素轻松更改时区以在 4 个较小的时间框上显示。

本文内容由小森整理编辑！