并不简单的翻页时钟（二）：JavaScript篇

最新推荐文章于 2024-08-10 08:39:06 发布

云梦影

最新推荐文章于 2024-08-10 08:39:06 发布

阅读量1.5k

点赞数 4

分类专栏：从实践学知识文章标签： javascript

本文链接：https://blog.csdn.net/yunmengying/article/details/105755050

版权

本文介绍了使用JavaScript创建翻页时钟的思路和代码实现。首先初始化Flipper类，包括时间位、动画时间和当前及下一秒时间。接着，根据是否为12小时制设置时钟。然后，遍历时间的每一位，判断变化并执行相应的动画效果。代码注释清晰，易于理解。

摘要由CSDN通过智能技术生成

上一篇：并不简单的翻页时钟（一）：样式篇

思路

初始化Flipper类，包括对应的节点（时间的每一位，动画的持续时间，以及现在的时间和下一秒的时间）
根据option参数（是否是十二小时制）来初始化时钟
为时间上的每一位进行判断：这个数位上的时间照上一秒是否有变化->有=>为其添加对应css类名，前边执行翻转动画，并在动画执行结束后移除类名，后边准备下一秒的时间。->没有=>不变，continue进入下一次循环判断

代码

//Filpper类，每个实例对应时间上的一位，即一个翻页的部分
var Flipper =/**@Class*/ (function () {
    function Flipper(node , currentTime , nextTime) {
        //this指向实例化的对象
        this.isFlipping=false;
        this.duration=600;
        this.flipNode=node;//.flipNumber
        this.frontNode=node.querySelector(".front");
        this.backNode=node.querySelector(".back");
        this .setFrontTime(currentTime);
        this.setBackTim