首页 > 代码库 > 仿智能社官网:原生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立方体时钟