zoukankan      html  css  js  c++  java
  • 仿智能社官网:原生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

  • 相关阅读:
    积水路面Wet Road Materials 2.3
    门控时钟问题
    饮料机问题
    Codeforces Round #340 (Div. 2) E. XOR and Favorite Number (莫队)
    Educational Codeforces Round 82 (Rated for Div. 2)部分题解
    Educational Codeforces Round 86 (Rated for Div. 2)部分题解
    Grakn Forces 2020部分题解
    2020 年百度之星·程序设计大赛
    POJ Nearest Common Ancestors (RMQ+树上dfs序求LCA)
    算法竞赛进阶指南 聚会 (LCA)
  • 原文地址:https://www.cnblogs.com/zhengrunlin/p/5947523.html
Copyright © 2011-2022 走看看