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

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

先放一下我做的效果: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

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