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

思路

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

代码

//Filpper类，每个实例对应时间上的一位，即一个翻页的部分
var Flipper =/**@Class*/ (function () {function Flipper(node , currentTime , nextTime) {//this指向实例化的对象this.isFlipping=false;this.duration=600;this.flipNode=node;//.flipNumberthis.frontNode=node.querySelector(".front");this.backNode=node.querySelector(".back");this .setFrontTime(currentTime);this.setBackTime(nextTime);}Flipper.prototype.setFrontTime=function (time) {this.frontNode.dataset.number=time;//设置front的data-number};Flipper.prototype.setBackTime=function (time) {this.backNode.dataset.number=time};/*** 前边显示当前时间，后边准备即将到来的时间* 给.flipNumber添加一个running类名，启动动画* 600ms（css中的动画时间）后，将.flipNumber的.running类名移除*前边显示即将到来的时间（即下一阶段的当前时间）*/Flipper.prototype.flipDown=function (currentTime , nextTime) {var _this=this;this.isFlipping=true;this.setFrontTime(currentTime);//当前时间显示在前边this.setBackTime(nextTime);//后边准备即将到来的时间this.flipNode.classList.add("running");//给flipNumber添加running类，开始动画setTimeout(function () {_this.flipNode.classList.remove("running");_this.isFlipping=false;_this.setFrontTime(nextTime);} , this.duration);//600ms 后移除动画};return Flipper;
} () );/*** 获取时间字符串* @param date 日期时间字符串 ， option 是否为十二小时制* @returns {string}*/
var getTimeFromDate=function (date , option ) {var time= date.toTimeString()//时间=>字符串.slice(0,8)//取前八位hh:mm;ss.split(":")//根据：分隔成数组.join("");//=>字符串var hour=parseInt(time.slice(0,2));var rest=time.slice(2);var ampm=document.getElementById("ampm");//当选择十二小时制if(option){if ( hour>12 ){hour=hour-12;hour=formatHour(hour);time=hour+rest;ampm.innerText="PM";}else {hour=formatHour(hour);time=hour+rest;ampm.innerText="AM";}}else {hour=formatHour(hour);time=hour+rest;}return time;
};function formatHour(hour) {hour=hour.toString();return hour.length==1? "0"+hour : hour;
}//存放时钟每一位的实例化对象的数组
var flippers=[]
//是否是十二小时制
var isTwelve=false/*** 初始化时钟* @param format 时间格式*/
function initClock(format) {isTwelve=format ==12;var flips=document.querySelectorAll(".flipNumber");var now=new Date();
//当前时间（由于翻页，实际上是上一秒的时间）var nowTimeStr=getTimeFromDate( new Date(now.getTime()-1000) , isTwelve );
//即将到来的时间（实际上是当前时间）var nextTimeStr=getTimeFromDate( now , isTwelve );
//将节点集合转换为数组，为时间的每一位实例化Flipper对象，返回对象集合flippersflippers= Array.from(flips).map(function (flip , i) {return new Flipper(flip , nowTimeStr[i] , nextTimeStr[i]);});
}/*** 每秒执行一次,为时钟的每一位判断是否应该翻转并执行翻转动画*/
setInterval(flipEverySecond, 1000);
function flipEverySecond() {var now=new Date()var nowTimeStr=getTimeFromDate( new Date(now.getTime()-1000) , isTwelve);var nextTimeStr=getTimeFromDate(now , isTwelve);for (let i=0 ; i<flippers.length ; i++){//如果前后时间一样，也就是该位置上的时间没有变化，则跳过，进入下一次循环if (nowTimeStr[i] === nextTimeStr[i]) continue;flippers[i].flipDown(nowTimeStr[i] , nextTimeStr[i]);}
}/*** 时钟设置*/
//切换十二小时制
function toggleFormat () {var controlFormat=document.getElementById("controlFormat");var twelve=document.getElementById("twelve");if (controlFormat.checked) {twelve.style.display="block"initClock(12)}else{twelve.style.display="none"initClock(24)}}
//切换秒钟显示
function toggleSecond() {var seconds=document.getElementsByClassName("second");var controlSecond=document.getElementById("controlSecond")console.log(controlSecond.checked)if (controlSecond.checked) {for( let second of seconds){second.style.display="none"}}else {for( let second of seconds){second.style.display="block"}}
}//初始化时钟，默认24小时制
initClock(24)

注释写的还是比较全的，结合思路比较容易看懂。

并不简单的翻页时钟（二）：JavaScript篇相关推荐

并不简单的翻页时钟（一）：样式篇（Flex布局、line-height、data-set用法、css before after伪元素）
目录并不简单的翻页时钟我以为的翻页时钟实际上的翻页时钟关键的知识点效果展示代码解析 HTML CSS 详解CSS 1.display:flex 元素居中 2.:before .:after ...
OneClock 不息屏的极简时钟，不仅仅是翻页时钟那么简单！
OneClock Mac时钟软件包括翻页时钟.数字时钟.表盘时钟,更多表盘三种样式.支持黑色和白色主题切换.透明度设置等设计. 不仅仅适配Mac 在iOS设备上,限于苹果并未开放任何屏保时钟.桌面时钟 ...
mac屏保时钟_OneClock 不息屏的极简时钟，不仅仅是翻页时钟那么简单！
OneClock Mac时钟软件包括翻页时钟.数字时钟.表盘时钟,更多表盘三种样式.支持黑色和白色主题切换.透明度设置等设计. 不仅仅适配Mac 在iOS设备上,限于苹果并未开放任何屏保时钟.桌面时钟 ...
买不起时钟的我，为自己写个翻页时钟
买不起时钟的我,为自己写个翻页时钟为了提高自己的时间观念,我决定为自己配一个时钟,迷上了翻页时钟,但是发现翻页时钟软件都是付费的,再就是达不到自己的要求,于是决定为自己写个.看似简单,实则非易.为自 ...
html+js翻页时钟
html+js翻页时钟 index.html <!doctype html> <html> <head> <meta charset="utf-8& ...
全屏时钟软件Linux,翻页时钟下载-翻页时钟安卓版下载v1.2.3-Linux公社
翻页时钟中有很丰富的时钟样式可以供用户随心切换,这上面的时间也是十分的准确哦,支持横屏.竖屏两种方式展现,更有酷炫的背景等着用户来更换,也能够自定义喜欢的图片进行背景设置,非常人性化的功能,翻页时钟中 ...
creator 数字翻页效果_用好这款Fliqlo翻页时钟屏保让你电脑瞬间提升逼格和幸福感！...
?本文共计:2088字·⏰阅读时长:6分钟 ?目录预览 -------------- ① 电脑屏幕保护有啥? ② Fliqlo的基本介绍 ③ Fliqlo不同系统的使用教程 + Mac OS系统的使用 ...
iClock 一款能够「满足“挑剔”的翻页时钟与任务闹钟」
iClock 是一款能够「满足"挑剔"的翻页时钟与任务闹钟」,设计极简化,支持自定义配色,手势操作.非常适合摆在床头.写字台上当作数字时钟. 现如今很多人家里都不配电脑了,那么用 ...
Fliqlo——翻页时钟屏保（最新版本，附有链接）
Fliqlo--翻页时钟屏保(最新版本,附有链接) Fliqlo ,一个极简约而又充满逼格的屏保软件,还可以欣赏和当作拍照的道具,在朋友圈偶尔"装"一下,提升逼格,深受简约爱好者的 ...

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

思路

代码

并不简单的翻页时钟（二）：JavaScript篇相关推荐

最新文章

热门文章