如何用HTML、CSS和JavaScript建立一个数字时钟

DebugUsery
357 阅读7分钟

用HTML、CSS和JavaScript构建一个数字时钟

网络几乎使一切成为可能。作为网络编程语言的JavaScript的出现使我们能够看到我们的代码是活的，并与网络内容进行互动。

本文试图利用这个重要的工具来建立一个数字时钟，并与其他基于网络的技术如HTML、CSS一起在网络上运行。

前提条件

读者应具备以下基本知识。

  • JavaScript
  • HTML
  • CSS
  • 有一个自己选择的文本编辑器，不过我推荐vscode
  • 互联网连接

目标

在本教程结束时，读者应该能够。

  • 理解Javascript的内置setInterval 功能
  • 知道如何使用JavaScript的Date类
  • 知道如何创建一个函数
  • 知道如何引用或调用一个函数
  • 知道什么是变量范围
  • 理解三元运算符的工作原理

术语的定义

  • HTML是一种标记语言，赋予网络内容以结构。它也被称为网络的骨架。HTML是一个缩写，意思是超文本标记语言。

  • CSS是一个缩写，意思是层叠样式表。它是用来为我们的网络内容添加颜色等设计的工具。它是网页的设计、风格和格式化工具。

  • JavaScript是网络的脚本语言，它也是一种轻量级的解释性语言，在运行时进行编译。它是为网页内容增加互动性的语言，因此被广泛使用。

在本教程中，我们将使用这些工具来建立一个显示当前时间、日期、月份和年份的数字钟。

实施

要实现这个时钟，首先，我们需要为我们的HTML、CSS和JavaScript文件创建一个文件夹，并以它们各自的扩展名（.html、.css、.js）命名。你可以使用任何你想要的编辑器，但在本教程中，我希望你使用vscode。

第一步

创建你的HTML 文件，命名为index.html 。

下面的代码片段显示了HTML文件的结构。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Clock</title>
      <link rel="stylesheet" href="index.css">
   </head>
   <body>
      <div>
         <div style="color: white;">The Time is: </div>
         <div id="Clock" class="glow">00:00:00</div>
      </div>
      <script src= index.js></script>
   </body>
</html>

这个结构你应该很熟悉，id = Clock 和class = glow 将分别用于我们的JavaScript和CSS文件。

为了在HTML文件中链接我们的JavaScript和CSS文件，如上所示，使用了script 和link 标签。虽然本文中还有其他方法可以将JavaScript和CSS添加到HTML中，但我选择使用外部文件源。

第二步

创建一个JavaScript文件并在其中声明一个函数。我把我的称为displayTime 。

在这个函数中，声明一个变量并将JavaScript的日期对象分配给它。

JavaScript中的函数与Java中的方法几乎是一样的。它是一组语句或代码，执行一个动作。

例如，你正在写一个程序，你需要在代码中的不同地方将两个值相乘。如果没有一个函数或方法，每当你想把两个数字相乘时，你就需要总是重复同样的代码。

有了函数，你只需写一次代码，并在你需要的时候调用做乘法的函数。函数有助于实现代码的模块化和简洁化。在本例中，函数只需执行一项任务，即乘法。

下面是一个代码片段来更好地解释这个问题。

//function declaration

function displayTime(){
   //variable
   const timeNow = new Date();
}

除了setInterval 方法之外，我们建立数字时钟所需要的一切都在这个函数块中。

setInterval，是JavaScript中的一个方法，需要两个参数，一个函数和函数执行前的时间。

下面是关于如何表示setInterval 的语法。

setInterval(displayTime, 1000);

上面的代码意味着函数displayTime ，每隔1000毫秒就会持续执行。

现在我们已经把这个问题解决了，让我们继续声明其他变量。这些变量将取一天中的小时、分钟、秒、一周中的几天、月、年和一天中的周期。

let hourOfDay = timeNow.getHours();
let minutes = timeNow.getMinutes();
let seconds = timeNow.getSeconds();
let weekDay = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
let today = weekDay[timeNow.getDay()];
let months = timeNow.toLocaleString("default", { month: "long" });
let year = timeNow.getFullYear();
let period = "AM";

如果我们仔细观察，你会发现我们正在使用timeNow 这个变量来访问JavaScript日期类中的各种方法。我们在上面的函数块中声明了它。

  • 小时、分钟和秒被分配给hoursOfDay 、minutes 和seconds 变量。
  • weekDay 变量包含一个星期的天数数组。
  • today 变量从weekDay 集合中获得一个特定的日子。
  • months 变量获得一年中各月的字符串表示。我们可以使用timeNow.getMonths 来获得一年中的各个月份，但是使用这种方法将打印出数字表示。因此，需要使用toLocaleString 方法，将月份转换为字符串。括号中的字符串长表示应该打印完整的月份拼写。如果你不希望这样，你可以用short代替long，例如，Feb代替2月将被打印出来。
  • year 变量从getFullYear() 方法中获得年份。
  • period 变量被初始化为AM，这将打印出一天的时段。

我们的下一步是在函数中把所有这些变量连接起来，下面是方法。

function displayTime(){

   const timeNow = new Date();

   let hourOfDay = timeNow.getHours();
   let minutes = timeNow.getMinutes();
   let seconds = timeNow.getSeconds();
   let weekDay = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
   let today = weekDay[timeNow.getDay()];
   let months = timeNow.toLocaleString("default", { month: "long" });
   let year = timeNow.getFullYear();
   let period = "AM"; 

}

这就是我们的函数现在的样子。但这还不足以建立我们的数字时钟，这也是你阅读这篇文章的原因。下一步是设置一天的周期。

下面是说明这一点的代码片断。

// Permit me to declare period and hourOfDay again even though we've declared them before

let period = "AM";

let hourOfDay = timeNow.getHours();

// write a condition that set our period to AM or PM

if(hourOfDay > 12) {
   hourOfDay -= 12;
   period = "PM";
   /*This block checks whether the hour is greater than 12 and if that is true, 12 is subtracted from the hour. The result is then assigned back to ```hour``` and the period is set to PM. 12 is subtracted since we're building a 12-hour time clock*/
}

if(hourOfDay == 0) {
   hourOfDay = 12;
   period = "AM";
  /*This block checks whether the hour is equal to 0. If that is true, we assign 12 to the hourOfDay variable and the period is set to AM.*/
}

下一步是设置我们的时钟显示模式。

在我们的HTML文件中，我们将时钟设置为显示2位数的hourOfDay、秒和分钟（00:00:00）。我们需要写一个程序来符合这个模式。在这样做的时候，我们将使用三元运算符，表示为**?**

三元运算符是一个条件运算符，需要三个操作数。第一个是条件，后面有一个问号（？）第二个是条件为真时要执行的表达式，后面有一个冒号（:）。最后，第三个操作数是另一个表达式，如果条件为假则执行。这是写if-else语句的一种更简单的方法。

下面是说明这一点的代码片断。

hourOfDay = hourOfDay < 10 ? "0" + hourOfDay : hourOfDay;
// if hourOfDay is less than 10, set hour position to 0 plus hourOfDay else set position to hourOfDay
minutes = minutes < 10 ? "0" + minutes : minutes;
// if minutes is less than 10, set minutes position to 0 plus minutes else set position to minutes
seconds = seconds < 10 ? "0" + seconds : seconds;
// if seconds is less than 10, set seconds position to 0 plus seconds else set position to seconds

我们差不多完成了，接下来要做的事情是设置我们的当前时间。要做到这一点，我们需要声明一个名为currentTime 的变量。下面是方法。

let currentTime = hourOfDay + ":" + minutes + ":" + seconds + period;

我们用hourOfDay ，一个冒号，minutes ，一个冒号，seconds ，和period 来初始化currentTime 这个变量。

因此，例如，如果小时是10，分钟是12，秒是23，时期是AM，currentTime ，就会是10:12:23AM。还有两件事，我们就完成了本文的函数体和JavaScript部分。

我们的下一个任务是在网页上显示我们的时钟，为了做到这一点，我们需要我们的JavaScript来操作我们的HTML。这时，文档对象模型（DOM）的知识就派上用场了。

有各种文档方法，但在本教程中，我们将使用document.getElementById 。有了这个方法，我们就能够访问具有特定id的HTML元素。在本例中，我们将访问具有Digital_Clock这个id的元素。

下面是说明方法的代码片断。

document.getElementById('Digital_Clock').innerHTML =  currentTime + " " + today +" " + months + " " + year;

innerHTML 是DOM的一个属性，用于设置或返回一个元素的HTML内容。在这个例子中，id为Digital_Clock 的div标签的内容被设置为显示currentTime,today,months, 和year 的值。

最后一件事是函数调用或调用。在我们的函数被声明后，给定了一个函数体，除非它被调用，否则它仍然不会工作。这可以通过将函数名和大括号放在函数的闭合大括号（}）之后来实现。

这就是我们最终代码的样子。

setInterval(displayTime, 1000);

function displayTime() {

    const timeNow = new Date();

    let hoursOfDay = timeNow.getHours();
    let minutes = timeNow.getMinutes();
    let seconds = timeNow.getSeconds();
    let weekDay = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
    let today = weekDay[timeNow.getDay()];
    let months = timeNow.toLocaleString("default", {
        month: "long"
    });
    let year = timeNow.getFullYear();
    let period = "AM";

    if (hoursOfDay > 12) {
        hoursOfDay-= 12;
        period = "PM";
    }

    if (hoursOfDay === 0) {
        hoursOfDay = 12;
        period = "AM";
    }

    hoursOfDay = hoursOfDay < 10 ? "0" + hoursOfDay : hoursOfDay;
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    let time = hoursOfDay + ":" + minutes + ":" + seconds + period;

    document.getElementById('Clock').innerHTML = time + " " + today + " " + months + " " + year;

}
displayTime();
变量范围

当一个变量可以在程序的任何地方被看到、访问或使用时，它就被称为具有全局范围。全局变量是在一个函数之外声明的。在一个函数中声明的任何变量只能在该函数中使用。

你看到我们是如何故意在函数内声明我们的所有变量的吗？其目的是使它们成为函数的局部变量。因此，局部变量是一个范围只在其函数定义内的变量。也就是说，一个变量的值不能在它被声明的范围之外被访问。

我们在函数中声明了所有的变量，因为没有必要在函数体之外使用它们。

第三步

有了现在的东西，我们的代码应该可以工作了，但我们需要给它添加样式，使它看起来漂亮。

我们需要创建一个CSS文件并添加这些样式。我把我的文件称为index.css 。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}
body {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
     background: #000;
     padding: 0;
     margin: 0;
     box-sizing: border-box;
     font-family: 'IBM Plex Sans', sans-serif;
}
.glow {
     font-size: 60px;
     color: #fff;
     font-weight: bold;
     animation: glow 1s ease-in-out infinite alternate;
     -moz-animation: glow 1s ease-in-out infinite alternate;
     -webkit-animation: glow 1s ease-in-out infinite alternate;
}

总结

在这篇文章中，我们已经了解了函数声明和函数调用。我们还学习了三元运算符和JavaScript日期类。最后，我们谈到了如何使用toLocaleString方法获得一年中各月的字符串值。

通过这些，我们已经能够只用HTML、CSS和JavaScript来建立我们的数字时钟。

avatar
文章
阅读
粉丝