使用 JavaScript 设计新拟态风格的数字时钟

javascriptfront end technologyprogramming scriptsweb development

在本教程中，我们将讨论如何使用 JavaScript 设计新拟态风格的数字时钟。新拟态 是一种近年来越来越流行的新设计趋势。它的特点是柔和、圆润的形状和微妙的阴影。

HTML

我们将首先为我们的时钟创建一个基本的 HTML 结构。我们需要一个容器元素，其中，我们将有一个用于钟面的元素和另一个用于控制按钮的元素。

以下是我们时钟的 HTML 代码 −

<div class="clock">
<div class="clock-face">
<div class="clock-display">
<div class="clock-controls">
<button class="clock-button">开始</button>
<button class="clock-button">停止</button>
</div>
</div>
</div>
</div>

CSS

现在让我们用 CSS 来设计时钟。我们将为时钟指定宽度和高度，然后为钟面和控制按钮指定样式。

对于钟面，我们将宽度和高度设置为 100%，并为其指定浅灰色背景颜色。然后，我们将添加边框和一些框阴影以创建新形态效果。

clock-face {
   width: 100%;
   height: 100%;
   background-color: #e0e0e0;
   border: 1px solid #bdbdbd;
   box-shadow: 0px 3px 6px rgba(0,0,0,0.16),
   0px 3px 6px rgba(0,0,0,0.23);
}

对于时钟显示，我们将宽度设置为 50% 并将其置于钟面中央。然后，我们将为其添加深灰色背景颜色并添加一些填充。

.clock-display {
   width: 50%;
   margin: 0 auto;
   background-color: #424242;
   padding: 10px;
}

最后，对于控制按钮，我们将宽度设置为 25%，并将它们置于钟面中央。我们将为它们设置浅灰色背景颜色，并添加一些填充。

.clock-controls {
    width: 25%;
    margin: 0 auto;
    background-color: #e0e0e0;
    padding: 10px;
}

JavaScript

现在让我们为时钟添加 JavaScript 代码。我们将首先创建一个函数，该函数将获取当前时间并将其显示在钟面上。

function getTime() {
   var date = new Date();
   var hours = date.getHours();
   var minutes = date.getMinutes();
   var seconds = date.getSeconds();
   if (hours < 10) {
      hours = "0" + hours;
   }
   if (minutes < 10) {
      minutes = "0" + minutes;
   }
   if (seconds < 10) {
      seconds = "0" + seconds;
   }
   var time = hours + ":" + minutes + ":" + seconds;
   document.getElementById("clock-display").innerHTML = time;
}

接下来，我们将创建一个函数，当单击"开始"按钮时，该函数将启动时钟。

function startClock() {
    setInterval(getTime, 1000);
}

最后，我们将向"开始"按钮添加一个事件监听器，当单击该按钮时，该事件监听器将调用 startClock() 函数。

document.getElementById("start-button").addEventListener("click", startClock);

示例

现在我们已经掌握了所有部分，让我们将它们放在一起。下面是新拟态风格的数字时钟的完整工作代码。

<!DOCTYPE html>
<html>
<head>
<title>Neumorphic Clock</title>
   <style>
      .clock {
         width: 500px;
         height: 400px;
      }
      .clock-face {
         width: 100%;
         height: 100%;
         background-color: #e0e0e0;
         border: 1px solid #bdbdbd;
         box-shadow: 0px 3px 6px rgba(0,0,0,0.16),
         0px 3px 6px rgba(0,0,0,0.23);
      }
      .clock-display {
         width: 50%;
         height: 10%;
         margin: 0 auto;
         background-color: #f0f0f0;
         font-size: xx-large;
         padding: 20px;
         box-shadow: 0px 3px 6px rgba(0,0,0,0.16),
         0px 3px 6px rgba(0,0,0,0.23);
      }
      .clock-controls {
         width: 10%;
         margin: 0 auto;
         background-color: #e0e0e0;
         padding: 10px;
      }
   </style>
</head>
<body>
   <div class="clock">
   <div class="clock-face">
   <div class="clock-display">
   <div id="clock-display"></div>
   </div>
   <div class="clock-controls">
   <button id="start-button" class="clock-button">Start</button>
   </div>
   </div>
   </div>
   <script>
      function getTime() {
         var date = new Date();
         var hours = date.getHours();
         var minutes = date.getMinutes();
         var seconds = date.getSeconds();
         if (hours < 10) {
            hours = "0" + hours;
         }
         if (minutes < 10) {
            minutes = "0" + minutes;
         }
         if (seconds < 10) {
            seconds = "0" + seconds;
         }
         var time = hours + ":" + minutes + ":" + seconds;
         document.getElementById("clock-display").innerHTML = "<center>" + time + "</center>";
      }
      function startClock() {
         setInterval(getTime, 1000);
      }
      document.getElementById("start-button").addEventListener("click", startClock);
   </script>
</body>
</html>