JavaScript 在Neumorphism风格下设计一个数字时钟

时钟是用来测量时间的设备。如果以正确的方式使用，时钟对于任何UI元素都是有用的。时钟可以用于时间是主要关注点的网站，例如一些预订网站或一些显示火车、公交、航班到达时间的应用程序。时钟基本上分为两种类型，模拟时钟和数字时钟。在这里，我们将设计数字时钟并添加一些样式，使其更具吸引力。最终的输出如下所示：

先决条件：

方法：

使用HTML编写数字时钟的结构，在div标签内使用虚拟时间。
使用CSS中的transform和shadow等属性以Neumorphism样式设计时钟。
创建一个名为showTime()的新JavaScript函数，使用setTimeout()每秒调用一次，以呈现更新的输出。
使用Date()方法在JavaScript中获取一个新的时间实例，并将其转换为所需的字符串格式“HH:MM:SS”。
使用getElementById将时间字符串设置为输出，并为其分配值。

示例：

Javascript

// script.js 
// Function to display the time 
function showTime() { 
    // Using Date object to get 
    // today's date and time 
    let date = new Date(); 
  
    // getHOurs() function is used 
    // to get hours ones 
    let h = date.getHours(); // 0 - 23 
  
    // getMinutes() function is 
    // used to get minutes ones 
    let m = date.getMinutes(); // 0 - 59 
  
    // getSecond() function is 
    // used to get seconds ones 
    let s = date.getSeconds(); // 0 - 59 
  
    // To show am or pm 
    let session = "AM"; 
  
    // Setting time for 12 Hrs format 
    if (h > 12) { 
        h = h - 12; 
        session = "PM"; 
    } else if (h === 12) { 
        session = "PM"; 
    } else if (h == 0) { 
        h = 12; 
    } 
  
    // Adding "0" before single digit 
    h = h < 10 ? "0" + h : h; 
    m = m < 10 ? "0" + m : m; 
    s = s < 10 ? "0" + s : s; 
  
    let time = h + ":" + m + ":" + s + " " + session; 
  
    // Using DOM element to display 
    // elements on screen 
    document.getElementById("MyClockDisplay").innerText = 
        time; 
  
    document.getElementById("MyClockDisplay").textContent = 
        time; 
  
    // Call the function every second use 
    // setInterval() method and set time-interval 
    // as 1000ms which is equal to 1s 
    setTimeout(showTime, 1000); 
} 
  
showTime();

HTML

<!-- index.html -->
<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Digital clock</title> 
  
    <style> 
  
        /* Link for Google font */ 
        @import url( 
'https://fonts.googleapis.com/css2?family=Orbitron&display=swap'); 
  
        body { 
  
            /* Set background color of body */ 
            background-color: #afd275; 
  
            /* Place item to center */ 
            align-items: center; 
            display: flex; 
            justify-content: center; 
  
            /* Specify the vertical height */ 
            height: 100vh; 
            overflow-y: hidden; 
        } 
  
        .clock { 
            position: absolute; 
  
            /* Put the clock content on  
            center of the screen */ 
            top: 50%; 
            left: 50%; 
            transform: translateX(-50%) translateY(-50%); 
            color: white; 
            font-size: 60px; 
            font-family: Orbitron; 
  
            /* Provide space between letter of clock */ 
            letter-spacing: 7px; 
            align-items: center; 
            border-radius: 50px; 
            display: flex; 
            justify-content: center; 
            margin-right: 4rem; 
            height: 500px; 
            width: 550px; 
  
            /* Set the neumorphism effect to 
             the body of clock */ 
            background-color: #afd275; 
            box-shadow: inset 12px 12px 16px 0 rgba(0, 0, 0, 0.25), 
                inset -8px -8px 12px 0 rgba(255, 255, 255, 0.3); 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container"> 
        <div id="MyClockDisplay" 
            class="clock" onload="showTime()"> 
        </div> 
    </div> 
  
    <!-- Include JavaScript file -->
    <script src="index.js"></script> 
</body> 
  
</html>

输出：

JavaScript 在Neumorphism风格下设计一个数字时钟