北京八维集团JavaScript培训如何使用JavaScript制作数字时钟
北京八维集团JavaScript培训如何使用JavaScript制作数字时钟。北京八维集团JavaScript培训。北京八维集团建校二十余年拥有丰富的JavaScript培训经验,学习JavaScript就来北京八维集团。JavaScript是Web的编程语言,JavaScript可以更新和更改HTML和CSS,JavaScript可以计算、操作和验证数据。JavaScript是面向对象的脚本语言。万维网使用 HTML、CSS 和JavaScript (JS) 作为其核心技术。JavaScript是一种高级编程语言,广泛用于Web开发。它创建于 90 年代中期,此后成为世界上最流行的编程语言之一
在本教程中,我们将使用 JavaScript 构建数字时钟。
让我们开始创建一个<div>用于显示时间的元素:
接下来创建一个getTime计算时间的函数:
我们在这里使用了 JavaScripts 内置Date()对象,它代表了一个单一的时刻。然后我们从中提取小时、分钟和秒。每个测量都被分配了它自己的变量,因为我们需要在下一步中进行一些操作。
小于 10 的小时、分钟和秒没有前导零数字,这通常在格式化数字时间时使用。为此,我们将检查度量单位是否小于 10。如果是,我们将在前面加上一个零,否则将保留度量值:
我们现在可以将时间插入我们的时钟<div>:
getTime如果您此时要运行该函数,它将在执行时获取当前时间。SetInterval当我们构建数字时钟时,我们需要每秒(1000 毫秒)使用该方法获取和更新时间:
当前时钟以 24 小时格式显示时间。要转换为 12 小时制时钟,我们只需要检查当前小时是否大于 12,如果为真则减去 12 小时。我们还将声明一个 merdiem 变量并为其分配一个 AM 或 PM,这将在时间之后显示:
您现在应该拥有一个使用 JavaScript 构建的功能齐全的数字时钟。在设计此时钟的样式时,最好使用等宽字体 ( font-family: monospace;)。这将防止由于不同数字之间的可变字体宽度而导致时钟尺寸发生变化。