javascript实现数字时钟特效

2023年5月27日下午1:17 • JavaScript

下面是实现数字时钟特效的完整攻略。

一、准备工作

在开始实现之前，我们需要先搭建一个简单的HTML框架，并且引入jQuery库和一个字体库。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数字时钟特效</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">

</head>
<body>
    <div id="digital-clock"></div>
</body>
</html>

二、实现数字时钟特效

在HTML中添加一个容器，用于承载时钟展示区域。我们需要通过Javascript来生成时钟样式，并且更新显示时间。

$(document).ready(function() {
    setInterval(function() {
        var currentTime = new Date();
        var hours = currentTime.getHours();
        var minutes = currentTime.getMinutes();
        var seconds = currentTime.getSeconds();
        var meridiem = "AM";

        // 将24小时制转化为12小时制显示
        if (hours > 12) {
            hours = hours - 12;
            meridiem = "PM";
        }
        if (hours === 0) {
            hours = 12;
        }

        // 将时间格式化为00:00:00的形式
        if (hours < 10) {
            hours = "0" + hours;
        }
        if (minutes < 10) {
            minutes = "0" + minutes;
        }
        if (seconds < 10) {
            seconds = "0" + seconds;
        }

        // 将生成的时分秒拼接成一个字符串显示
        var clockTime = hours + ":" + minutes + ":" + seconds + " " + meridiem;
        var clock = document.getElementById('digital-clock');

        // 在时钟样式中插入时间
        clock.innerText = clockTime;
    }, 1000);
});

三、样式设置

最后，我们需要添加样式来美化时钟的外观，可以通过CSS来添加自己的个性化样式。

#digital-clock {
    font-family: 'Montserrat', sans-serif;
    font-size: 8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

以上就是完整的数字时钟特效的实现攻略，下面是两条实现例子。

示例一

在原有的基础上，当秒数大于30时，数字时钟的背景颜色改为红色。可以在JavaScript代码中添加相应的判断条件，并在CSS中添加红色背景的样式。

if (seconds > 30) {
    clock.style.backgroundColor = 'red';
} else {
    clock.style.backgroundColor = 'transparent';
}

#digital-clock {
    font-family: 'Montserrat', sans-serif;
    font-size: 8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    transition: background-color ease 0.5s;
    background-color: transparent;
}
#digital-clock[style*="red"] {
    background-color: red;
}

示例二

在原有的基础上，数字时钟的数字由红色渐变为黄色，并且时分秒数字的不同位置采用了不同的字体样式。可以在CSS中添加渐变样式和字体样式的设置。

#digital-clock {
    font-family: 'Montserrat', sans-serif;
    font-size: 8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    transition: background-color ease 0.5s;
    background-color: transparent;
}
#digital-clock[style*="red"] {
    background-color: linear-gradient(to bottom, #ff0000, #ff8000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
#digital-clock span {
    font-family: 'Courier New', sans-serif;
    font-weight: bold;
}
#digital-clock span:nth-child(1) {
    color: #ff8496;
    text-shadow: 0px 2px #ff8496;
}
#digital-clock span:nth-child(2) {
    color: #ffe066;
    text-shadow: 0px 2px #fce660;
}
#digital-clock span:nth-child(3) {
    color: #b4d3d9;
    text-shadow: 0px 2px #b4d3d9;
}

以上就是两个实现样式不同的数字时钟特效的示例。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript实现数字时钟特效 - Python技术站