先放一下我做的效果: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立方体时钟的更多相关文章

  1. 使用Three.js网页引擎创建酷炫的3D效果的标签墙

    使用Three.js引擎(这是开源的webgl三维引擎,gitgub)进行一个简单应用. 做一个酷炫的3d效果的标签墙(已经放在我的博客首页,大屏幕可见), 去我的博客首页看看实际效果 www.son ...

  2. 智能社官网顶部导航实现demo

    从智能社的blue老师公开课中学习到了很多,在此表示感谢. 这个导航很好玩,于是就想实现一个. html <div id="box"> <ul> <l ...

  3. 基于jQuery仿迅雷影音官网幻灯片特效

    分享一款基于jQuery仿迅雷影音官网幻灯片特效迅.雷影音官网jQuery幻灯片特效是一款带左右箭头,索引按钮切换的jQuery幻灯片代码.效果图如下: 在线预览   源码下载 实现的代码. html ...

  4. Threejs 官网 - Three.js 的图形用户界面工具(GUI Tools with Three.js)

    Threejs 官网 - Three.js 的图形用户界面工具(GUI Tools with Three.js) 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) ...

  5. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  6. HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图)

    原文:HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图) 3d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 pers ...

  7. 原生JS实现简单富文本编辑器2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 原生JS实现简单富文本编辑器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 原生JS实现简单留言板功能

    原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang ...

随机推荐

  1. altium designer生成gerber步骤

    什么是gerber文件             Gerber文件是所有电路设计软件都可以产生的文件,在电子组装行业又称为模版文件(stencil data),在PCB制造业又称为光绘文件.可以说Ger ...

  2. PHP指定概率算法

    转载来源链接: https://blog.csdn.net/sinat_35861727/article/details/54980807 PHP指定概率算法,可用于刮刮卡,大转盘等抽奖算法. 假设: ...

  3. 小论“Boolean参数作为入参”的函数

    <Clean Code>一书中对于如何写好函数有着很动人的描写,其中对于函数参数的建议有如下两点: 函数参数的数量应该尽可能少 给一个一元函数传入bool类型的参数很"罪恶&qu ...

  4. 使用ffmpeg进行网络直播

    一.采集:使用python调用摄像头采集,原设想是使用树莓派摄像头采集,但是经费紧张买不起,先用摄像头凑合下,反正很简单.                   原理就是先录一小段视频,然后循环播放,用 ...

  5. 分布式ID方案有哪些以及各自的优势

    1.    背景 在分布式系统中,经常需要对大量的数据.消息.http请求等进行唯一标识.例如:在分布式系统之间http请求需要唯一标识,调用链路分析的时候需要使用这个唯一标识.这个时候数据自增主键已 ...

  6. linux 常用命令总结(一)

    1. 字符串常用命令: 替换: 1). %s/*/*/g 中,替换当前界面的所有符合规则的内容.      2). 替换文件中的字符串内容: find -name '要查找的文件名' | xargs ...

  7. oracle定时器job的使用

    对于DBA来说,数据库Job再熟悉不过了,因为经常要数据库定时的自动执行一些脚本,或做数据库备份,或做数据的提炼,或做数据库的性能优化,包括重建索引等等的工作.但是,Oracle定时器Job时间的处理 ...

  8. JS中的slice和splice

    1,slice  : 定义:接收一个或两个参数,它可以创建一个由当前数组中的一项或多项组成的新数组,注意是新数组哦~ 也就是说它不会修改原来数组的值. 用法:slice( para1 ),会截取从pa ...

  9. HDU 1317 XYZZY(floyd+bellman_ford判环)

    http://acm.hdu.edu.cn/showproblem.php?pid=1317 题意: 给出一个有向图,每到达一个点,都会加上或减去一些能量,我们要做的就是判断从1出发是否能到达n.初始 ...

  10. 请问使用jmeter在tcp取样器测试中服务器名称或ip,端口可以填变量值吗?

    请问使用jmeter在tcp取样器测试中服务器名称或ip,端口可以填变量值吗?