仿智能社官网:原生JS实现简单又酷炫的3D立方体时钟

前言

时钟是我们日常生活中经常使用的东西，不仅是我们可以快速查看时间的工具，还可以作为一种时尚和装饰用品。在网络世界中，3D立方体时钟已经成为了一种热门的时钟样式，在这篇文章中，我们将使用原生JS来实现一个简单又酷炫的3D立方体时钟。

效果展示

在开始之前，让我们先来看一下最终的效果展示。

如图所示，这是一个3D立方体时钟，它以红色立方体的形式呈现，秒针以蓝色小球的形式呈现，时分秒都会在对应的面上显示。同时，它也支持自动旋转和手动控制旋转。

实现思路

在实现之前，我们先来了解一下它的实现思路。

- 绘制立方体：我们在页面中绘制一个立方体，这个立方体有6个面，每个面对应一个数字（0-9）和一个指针（时针、分针、秒针）。

- 旋转立方体：通过CSS3 3D变换属性来实现立方体的旋转，同时支持自动旋转和手动控制旋转。

- 显示当前时间：使用JS获取当前时间，并将时分秒对应到对应的立方体面上。

实现步骤

下面我们来逐步实现这个3D立方体时钟。

1.绘制立方体

我们通过CSS来绘制立方体。具体代码如下：

#cube {

position: absolute;

width: 200px;

height: 200px;

transform-style: preserve-3d; /* 遵循 3D 变换 */

transform: rotateX(30deg) rotateY(-45deg); /* 初始立方体的旋转角度 */

}

#cube .surface {

position: absolute;

width: 100%;

height: 100%;

background-color: red;

border: 2px solid #000;

box-sizing: border-box;

}

#face-0 {

transform: rotateY(90deg) translateZ(100px);

}

#face-1 {

transform: rotateY(0deg) translateZ(100px);

}

#face-2 {

transform: rotateY(-90deg) translateZ(100px);

}

#face-3 {

transform: rotateY(180deg) translateZ(100px);

}

#face-4 {

transform: rotateX(90deg) translateZ(100px);

}

#face-5 {

transform: rotateX(-90deg) translateZ(100px);

}

以上代码定义了一个id为“cube”的包含了6个类名为“surface”的div，每个类名为“surface”的div对应了立方体的每个面。其中，以id为“face-0”代表的div对应了“0”这个数字和对应的指针，在这个div里面我们还可以添加分、秒指针。其余的类名为“surface”的div同理。

该代码使用了CSS3的transform属性，它主要用于绕X、Y、Z轴进行旋转、平移、缩放等操作。在立方体绘制时，我们通过rotateX和rotateY方法来设置立方体的初始旋转角度。

通过translateZ方法可以设置元素在Z轴方向上的位移，这里的数值取决于立方体的大小。

2.旋转立方体

通过修改立方体div的transform属性来旋转立方体。我们可以通过定义一个rotateCube方法来实现。“autoRotate”全局变量决定立方体是否自动旋转，当它为true时，会持续每隔一定时间调用rotateCube方法，实现立方体自动不断旋转。

function rotateCube(degX, degY) {

var cube = document.querySelector('#cube');

cube.style.transform = 'rotateX(' + degX + 'deg) rotateY(' + degY + 'deg)';

}

var autoRotate = true;

var degX = -30; // 初始角度

var degY = 45; // 初始角度

var rotateInterval;

function startAutoRotate() {

if (rotateInterval) return;

rotateInterval = setInterval(function () {

degX += 1;

degY += 1;

rotateCube(degX, degY);

}, 50);

}

function stopAutoRotate() {

clearInterval(rotateInterval);

rotateInterval = null;

}

可以看到，在旋转立方体时，我们通过修改rotateCube方法中的degX和degY参数来改变立方体绕X和Y轴的旋转角度。同时，我们定义了一个autoRotate全局变量，用来判断是否自动旋转。

当自动旋转时，我们设置一个定时器来调用rotateCube方法，不断的更改degX和degY，从而实现立方体的自动旋转。

3.显示当前时间

我们通过JS来获取当前时间，并将时分秒对应到相应的立方体面上。具体代码如下：

function setDigit(div, digit) {

var faces = [

'translateZ(100px)',

'translateZ(-100px)',

'rotateY(90deg) translateZ(100px)',

'rotateY(-90deg) translateZ(100px)',

'rotateX(90deg) translateZ(100px)',

'rotateX(-90deg) translateZ(100px)'

];

var nums = [

['0', '1', '2', '3', '4', '5'],

['6', '7', '8', '9', '', '']

];

var digitStr = nums[digit / 6 | 0][digit % 6];

div.querySelector('.digit').textContent = digitStr;

var face = div.querySelector('.surface');

face.style.transform = faces[digit / 6 | 0];

if (digitStr === '') {

face.innerHTML = '';

} else {

face.innerHTML = '

}

}

function setDigits(h, m, s) {

setDigit(document.querySelector('#face-0'), h % 12 * 2 + Math.floor(m / 30)); // 时

setDigit(document.querySelector('#face-1'), m % 60); // 分

setDigit(document.querySelector('#face-2'), s % 60); // 秒

setDigit(document.querySelector('#face-3'), h % 12); // 时（12小时制）

}

函数setDigit接受两个参数，一个是指定的div，一个是当前时间对应的数字。它通过faces和nums数组来获取立方体面的位置，并设置立方体面的内容，其中nums数组对应了0-9的数字。

函数setDigits接受三个参数，分别是当前时间的时分秒。在这个函数里面，我们通过调用setDigit方法将对应的数字和对应的立方体面进行绑定。

总结

在本文中，我们使用原生JS实现了一个简单又酷炫的3D立方体时钟，并且讲解了它的实现思路和具体步骤。这个时钟除了实际时钟的功能外，还拥有自动旋转和手动控制旋转的功能。希望这个案例对初学者有所帮助，同时也为大家留下了更多的思考和实践空间，欢迎大家在此基础上进行更多的创意实现。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/