一个霓虹灯数字时钟的3D效果的js源代码

今天我们来聊聊如何实现一个酷炫的霓虹灯数字时钟。这个小项目不仅视觉效果炸裂，而且技术实现也不复杂，适合用来提升自己的前端技能。本文将从源码出发，结合实际案例，详细解析如何用HTML、CSS和JavaScript实现一个3D霓虹灯效果的数字时钟。

web_effect_neon_digital_clock_1

先简单说一下这个时钟的外观：你可以想象一下一个悬浮在空间中的立体数字，蓝色和红色的霓虹灯效果不停切换，仿佛置身于未来科技的场景。整个时钟不仅仅是平面的，还带有一定的3D效果，当鼠标悬停时，时钟会旋转起来。这就像某些科幻电影中的道具，充满了科技感。

实现思路

这个项目的实现思路主要分为两部分：一是用CSS来实现3D立体和霓虹灯效果，二是用JavaScript来实现时间的动态更新。项目的难点主要集中在3D效果的实现上。通过transform属性，我们可以让平面的数字有一个立体的视觉效果，同时通过@keyframes动画实现色彩的变化，模拟霓虹灯的发光效果。

JavaScript部分则主要是基于Date对象的时间获取和更新操作，这部分难度不大，但需要注意时间格式化的问题，确保显示效果的一致性。

HTML部分

HTML这部分其实非常简单，核心结构是一个<figure>标签，里面包含三个面板（前面、左面、顶部），每个面板上都有一个数字，分别对应小时、分钟和秒。每个面板的布局用<div class="face">来表示，时钟的数字通过<p>标签动态渲染。

    html
    <figure>
    <div class="face top">
        <p id="s"></p>
    </div>
    <div class="face front">
        <p id="m"></p>
    </div>
    <div class="face left">
        <p id="h"></p>
    </div>
</figure>

这种结构的好处是简洁明了，三个面板分别呈现出不同的时间值，便于我们之后用CSS和JS来进行控制和动画处理。

CSS部分

接下来，我们重点聊聊CSS部分，因为这里的技术点相对比较集中。我们主要用到了3D变换、字体导入和关键帧动画。

导入字体

首先，我们用到了一个叫Digital-7的数字时钟字体，这种字体看起来就像早期的LED显示器，很符合霓虹灯的风格。

    css
    @font-face {
    font-family: 'Digital-7';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.eot?#iefix') format('embedded-opentype'), 
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.woff') format('woff'), 
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.ttf') format('truetype'), 
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.svg#Digital-7') format('svg');
}

通过@font-face我们导入了一个自定义字体，并通过多个格式的链接确保它在各种浏览器中都能正常加载。

3D变换

在这段代码中，我们用到了3D变换来实现立体效果。transform属性让我们的面板在三维空间中旋转，赋予时钟一种立体的感觉。关键代码如下：

    css
    figure {
    width: 210px;
    height: 210px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -105px;
    margin-left: -105px;
    transform-style: preserve-3d;
    transform: rotateX(-35deg) rotateY(45deg);
    transition: 2s;
}

transform-style: preserve-3d这一行的作用是让其内部元素保持3D空间中的关系，而transform属性则将整个时钟的视角设置为从倾斜的角度去看。

当用户鼠标悬停在时钟上时，会触发旋转动画，使时钟的角度发生变化：

    css
    figure:hover {
    transform: rotateX(-50deg) rotateY(45deg);
}

霓虹灯效果

霓虹灯效果是通过颜色动画和文字阴影实现的。我们用到了@keyframes定义颜色变化的动画，时钟数字会在蓝色和红色之间不停切换，看上去就像霓虹灯在闪烁。

    css
    @keyframes color {
    0% {
        color: #2982ff;
        text-shadow: 0px 0px 5px #000;
    }
    50% {
        color: #cc4343;
        text-shadow: 0px 0px 5px #ff0000;
    }
}

这里text-shadow属性通过阴影模拟出一种光晕效果，给人一种发光的感觉，配合霓虹色的变化，就显得十分生动。

JavaScript部分

CSS负责了时钟的外观，JS则负责了时钟的核心功能——显示当前的时间。

首先，通过new Date()方法获取当前时间，并对小时、分钟和秒进行格式化。如果时间是个位数，比如“9:05:07”，为了显示成标准的两位数格式“09:05:07”，我们手动给每一个时间单位加了个前导零。

    javascript
    function date_time(id) {
    date = new Date;
    h = date.getHours();
    if (h < 10) { h = "0" + h; }
    m = date.getMinutes();
    if (m < 10) { m = "0" + m; }
    s = date.getSeconds();
    if (s < 10) { s = "0" + s; }
    document.getElementById("s").innerHTML = '' + s;
    document.getElementById("m").innerHTML = '' + m;
    document.getElementById("h").innerHTML = '' + h;
    setTimeout('date_time("' + "s" + '");', '1000');
    return true;
}

这里有几个细节需要注意：

我们通过getHours()、getMinutes()和getSeconds()方法获取当前的小时、分钟和秒。
然后，通过条件判断（if语句）保证时间以两位数显示。
最后，通过setTimeout每隔1秒钟重新调用date_time()函数，保持时钟每秒更新。

这些操作看起来并不复杂，但它们确保了时钟能准确无误地显示出实时的时间。

结语

这个霓虹灯数字时钟项目看起来很炫酷，但其实现思路并不复杂。核心思路是利用CSS的3D变换和动画效果来实现视觉上的冲击力，再结合JavaScript实现时钟的功能。这种项目不仅能帮助你提升CSS动画和3D变换的能力，还能熟悉JavaScript的时间处理逻辑。

你可以自己试着扩展这个项目，比如给时钟加上不同的配色方案，或者让它根据白天黑夜自动切换背景色等等。