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

Posted 2020-08-14

先放一下我做的效果：https://linrunzheng.github.io/3Dclock/3Dclock/new.html

至于3D立方体怎么做这里就不在阐述了，可以看一下我之前的博客。

这里默认你已经做好了6个立方体，直接上JS代码：

页面进来的时候，先给6个立方体赋值上现在的时间，由于立方体比较小，左右2个面看不清且影响效果，这里左右2个面就不赋time了；

//获取元素

var oul = document.querySelectorAll("ul");
var back = document.querySelectorAll(".back");
var front = document.querySelectorAll(".front");
var Top = document.querySelectorAll(".top");
var bot = document.querySelectorAll(".bot");
var btn = document.querySelector("button");

//获取当前时间，放到数组数组方便循环赋值var arr = [];

arr[0] = Math.floor(new Date().getHours() / 10);
arr[1] = new Date().getHours() % 10;
arr[2] = Math.floor(new Date().getMinutes() / 10);
arr[3] = new Date().getMinutes() % 10;
arr[4] = Math.floor(new Date().getSeconds() / 10);
arr[5] = new Date().getSeconds() % 10;

//页面进来的时候循环给6个立方体的几个面分别赋值时间，（由于定时器的存在，不然会有0.5秒的间隔是没有时间的）

//分别对应前后上下
for (var i = 0; i < arr.length; i++) {
       front[i].innerHTML = arr[i];
       back[i].innerHTML = arr[i] + 2 >= 10 ? (arr[i] + 2) % 10 : arr[i] + 2;
   T   op[i].innerHTML = arr[i] + 3 >= 10 ? (arr[i] + 3) % 10 : arr[i] + 3;
       bot[i].innerHTML = arr[i] + 1 >= 10 ? (arr[i] + 1) % 10 : arr[i] + 1;
}

我们只关注front前面这一个面，其他的面只是修饰作用

//关键：定时器执行的函数

定时器函数开始：

function time() {

//重新获取当前时间

var arr2 = [];
arr2[0] = Math.floor(new Date().getHours() / 10);
arr2[1] = new Date().getHours() % 10;
arr2[2] = Math.floor(new Date().getMinutes() / 10);
arr2[3] = new Date().getMinutes() % 10;
arr2[4] = Math.floor(new Date().getSeconds() / 10);
arr2[5] = new Date().getSeconds() % 10;

 

//循环判断立方体front的数字时候有变化，如有有变化就加上类，实现翻转效果，css代码写在transition类里了，

//css关键类

       .transition {
            transition: all 0.5s;
            transform: rotateY(-7deg) rotateX(95deg);
}

 

关键：判断数字是否变化

for (var i = 0; i < oul.length; i++) {

if (front[i].innerHTML != arr2[i]) {
oul[i].classList.add("transition");
}

 

//给每个立方体加上过渡结束事件webkitTransitionEnd （其他浏览器有不同的写法，这里只写chrome的）

oul[i].index = i;
oul[i].addEventListener("webkitTransitionEnd", function() {

　　//为几个面赋值数字

front[this.index].innerHTML = arr2[this.index];
back[this.index].innerHTML = arr2[this.index] + 2 < 10 ? arr2[this.index] + 2 : (arr2[this.index] + 2) % 10;
Top[this.index].innerHTML = arr2[this.index] + 3 < 10 ? arr2[this.index] + 3 : (arr2[this.index] + 3) % 10;
bot[this.index].innerHTML = arr2[this.index] + 1 < 10 ? arr2[this.index] + 1 : (arr2[this.index] + 1) % 10;

  //移除过渡事件，让立方体回到翻转前的效果

this.classList.remove("transition");

})

}

}

//开启定时器
setInterval(time, 500)

 

至此已经完成了，打开网页看看效果吧。

源代码见：https://github.com/linrunzheng/3Dclock