翻页时钟
在苹果商店中我下载了一款翻页时钟，感觉非常好用，所以我想在插件中加入这个功能，参考了zhuanlan.zhihu.com/p/93519427的…
翻页时钟分为两个功能，一个是时钟功能，一个是翻页功能
下面我会从切换数字，**
切换数字
在翻页中的核心其实是切换数字，将切换数字封装成一个函数，在此之前，需要将时钟的状态进行一个初始化，如下，形成一个数组包含六个元素，分别对应着时钟的六个格子，false为翻转结束状态即数字未改动
let fliping = [false, false, false, false, false, false] 复制代码
数字切换函数体如下
const changeNumber = (digit, num) => { // 正在翻转中则返回 if (fliping[digit]) return fliping[digit] = true // 获取 DOM const flip = document.querySelectorAll('.flip')[digit] const front = document.querySelectorAll('.front')[digit] const back = document.querySelectorAll('.back')[digit] // 更改背后数字 & 增加动画 back.setAttribute('class', `digital back n-${num}`) flip.classList.add('go') // 600ms 后清除动画 & 修改前面数字 setTimeout(() => { flip.classList.remove('go') front.setAttribute('class', `digital front n-${num}`) // 翻转结束 fliping[digit] = false }, 600) } 复制代码
切换数字函数中包含两个参数，digit为数组下标即要切换的格子，num为切换数字值 除此之外还需要对时钟的状态进行判断，避免出现快速连续翻转情况，其是通过fliping[digit]来判断，在此并没有采用响应式的方法，所以是直接通过DOM获取各格子并进行赋值，在翻页场景下使用双向绑定可能会有些麻烦。
定时回调
在整个翻页时钟三个功能是通过定时器的回调来进行控制的，即interval，在初始状态定义为null
let interval = null 复制代码
当需要进行定时or倒计时or开启时钟时，都需要进行一个停止计时器的操作
interval && clearInterval(interval) 复制代码
钟的核心理念
下面以番茄钟代码举例
const pomodoroClock = () => { interval && clearInterval(interval) // 番茄工作时间 let pomodoro = [0, 25, 0] interval = setInterval(() => { pomodoro[2]-- if (pomodoro[2] === -1) { pomodoro[2] = 59 pomodoro[1]-- } if(pomodoro[1] === -1) { pomodoro = [0,5,0] } // 转为字符串 const timeStr = numToStr(pomodoro[0], 2) + numToStr(pomodoro[1], 2) + numToStr(pomodoro[2], 2) // 遍历时间字符串 for (let i = 0, len = timeStr.length; i < len; i++) { // 判断数字是否修改 if (timeStr[i] !== old[i]) { // 修改翻牌器数字 changeNumber(i, timeStr[i]) } } old = timeStr },1000) } 复制代码
时间的数据格式
数据格式在处理状态下是通过数值形式来进行处理的，比如说在番茄钟的倒计时减法，初始状态下是使用以数值为数组元素的数组进行一个时间的初始化，再通过字符串转换，将数值形式的时间转换为字符串再通过遍历循环来进行时间的更新，计时和时钟都是根据这个进行翻页。
数据留存
因为这个翻页时钟开发了三个时间功能，所以在功能切换上肯定会存在更新问题，所以特别要注意的是需要使用old来对数据进行一个留存，比如在时钟与番茄中的切换上在没有留存的情况下会导致数据不更新问题，所以在时钟，番茄钟，倒计时要留存数据比如番茄钟的 old = timeStr，还有就是因为在判断时间更新的情况下是需要用到old来进行判断的
时间的回溯与流逝
番茄钟和计时器其本质是时间的回溯与流逝，所以在数据判断上需要一个对时分秒的判断与更改 时间前进就对60秒1分进位，60分1时进位，时间倒退则为，0秒分减位，以此类推，如上述番茄钟
if (pomodoro[2] === -1) { pomodoro[2] = 59 pomodoro[1]-- } 复制代码
打包配置
因为是基于vue+electron，所以打包需要在vue.config.json进行配置
electronBuilder: { nodeIntegration: true, mainProcessFile: 'app/main.js', rendererProcessFile: 'pages/main.js', builderOptions: { productName: 'Monit', appId: 'com.fzf404.monit', artifactName: '${productName}-${version}-${os}-${arch}.${ext}', linux: { target: 'AppImage', publish: ['github'], }, mac: { target: { target: 'dmg', arch: ['x64', 'arm64'], }, }, }, }, 复制代码
配置了主进程和渲染进程的入口文件路径，以及相关的构建选项
- 主进程入口：
mainProcessFile - 渲染进程入口：
rendererProcessFile - 构建选项：
builderOptions
- 打包后exe文件前缀：
productName - 包名：
appId - 工件文件名模板：
artifactName - 不同端口的打包形式：
linux&mac&win
如何使用
掘友们想基于现在的版本继续向上开发，比如说：一个实时监测掘金信息的桌面应用（我也想这么干来着）
克隆下来二次开发：项目传送门：监控github信息的桌面小组件 (github.com)
又或者直接下载使用，支持linux,window,mac。
- 下载地址： fzf404/Monit (github.com)
- 当前版本（0.2.4）：
🚨 v0.3.0 版本前的最终版，v0.3.0 起会引入插件机制，除 Github 外还支持其他平台及电脑控制。
✨ Mac 系统安装可能会提示 Monit.app 已损坏，请参考 项目中README.md 中的 安装 部分
🚑 目前只支持 Windows 端自动检查更新
✨ 支持了各平台的开机自启，增加了消息通知功能
♿ 菜单栏增加了 开机自启 和 消息通知 的开关
功能介绍
github信息实时监测
- 启动或点击右上角设置按钮会弹出信息模态框，输入你的github用户名即可（说起来还可以监测其他人的github信息）
- 左上角第三个按钮的作用分别为是
退出,隐藏,置顶/取消置顶 - 左侧依次为用户获得的
follower、star、fork总数并可以显示实时动态 - 当数字变动时点击可查看变动详情
- 右侧为全部仓库及
star数，点击可跳转到浏览器查看仓库详情，仓库列表可以滚动 - 网络异常时右上角红色图标会有一个断网指示
翻页时钟
翻页时钟共分为三个功能，一个功能为时钟，另一个为计时，还有一个为番茄钟（未上线）其中时钟和计时功能是通过按钮控制的
下一步的想法
- 音乐播放器❌
- todo待办项❌
- bilibili创作监测❌
- 掘金创作信息监测❌
- 翻页时钟✅
- 计数器✅ 目前项目中初步搭建好了todo还有bilibili的文件，如果掘友感兴趣可以进行二次开发并提pr。
最后
关于electron，我这几天也在社区中看到一些好文章比如说
- 包佬：从 Electron 架构出发，深究 Electron 跨端原理 | 多图详解 - 掘金 (juejin.cn)
- 小浪：快速入手Electron，拥有一个自己的桌面应用 - 掘金 (juejin.cn)
如果喜欢这款跨端监测github桌面应用软件，欢迎star与一键三连😍
小活动
如果掘友们有好的其他功能想法欢迎在评论区中进行留言并点赞，在6月十五号我会抽出一名幸运掘友分别送出克里克抱枕！！！
幸运掘友
恭喜中奖掘友，请留下你的联系方式我会和你联系并将克里克抱枕邮寄给你！！！
