前言

从零开始，Electron打造下班倒计时工具

这里说明一下关于electron， Electron 是可以构建跨平台桌面程序(Mac、Windows、Linux)，是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，相当于你会js、html 你就可以开发一个桌面程序，又给前端工程师职业发展扩展另外一条选择。

效果图

闲话少说，先给XDM看一下效果图

做这个小工具查不到是我想要的效果，其主要包括一个透明的，可移动到桌面的右下角，而且其他应用（软件窗口）也不会覆盖掉，拥有最高级。还有可以随便拖拽。

实现功能：

自定义透明窗口，可拖拽到任意位置
可自定义自己的下班时间
窗口是否永远在别的窗口的上面
下班倒计时弹窗提醒

开发工具及环境

vsCode node 我的node版本是 18.12.1 想来别的版本应该也是没问题的。

创建项目

项目初始化

基于 npm 搭建，以 package.json 文件作为入口点。首先创建一个文件夹(my-electron-app)，然后在其中执行npm init初始化项目。

npm init

npm install electron --save-dev

在执行初始化并且安装完 Electron 之后，我们会得到大致这样的 package.json。同时文件夹中会出现一个 node_modules 文件夹，其中包含了 Electron 可执行文件；除此之外还有一个 package-lock.json 文件，指定了各个依赖的确切版本。

{
  "name": "my-count-down",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron-forge start",
    "test": "echo \"Error: no test specified\" && exit 1",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  "author": "lyqiang",
  "license": "MIT",
  "devDependencies": {
    "@electron-forge/cli": "^6.0.5",
    "@electron-forge/maker-deb": "^6.0.5",
    "@electron-forge/maker-rpm": "^6.0.5",
    "@electron-forge/maker-squirrel": "^6.0.5",
    "@electron-forge/maker-zip": "^6.0.5",
    "electron": "^23.1.1"
  },
  "dependencies": {
    "electron-squirrel-startup": "^1.0.0",
    "node-notifier": "^10.0.1"
  }
}

至此一个简单地electron的一个项目框架已经差不多创建好了

我的main对应的是main.js，所以，我们需要在根目录下创建一个main.js, 为啥这要单独说明一下呢？因为有的XDM喜欢使用index.js命名只需要对应改一下main就好了。

我们可以得到这样一个大致这样的文件目录

功能实现

创建一个index.html页面

这里就写了一个简单地倒计时的页面，供大家参考，主要是起示例效果，页面写的并不美观，功能为先。

<!--index.html-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>你好!打工人</title>
    <link rel="stylesheet" href="./time.css">
  </head>
  <body>
    <div class="countdown">
      <p class="next"></p>
      <p class="title">距离下班还有</p>
      <p class="clock">
        <span id="hour"></span>
        <i>:</i>
        <span id="minutes"></span>
        <i>:</i>
        <span id="second"></span>
      </p>
      <p class="tip">tips：小编的下班时间是每天下午五点半<br>请按照时间格式在下面自定义自己下班时间</p>
      <input type="text" class="form-control input-medium" placeholder="设置下班时间" name="" id="startTime"/>
    </div>
    <script src="./time.js"> </script>
  
    <!-- 您也可以此进程中运行其他文件 -->
    <script src="./renderer.js"></script>
  </body>
 
</html>

自定义窗口

透明窗口拖拽 打开刚刚创建的main.js,设置三个参数实现上述效果transparent、 frame、alwaysOnTop属性

frame：设置为false可以得到一个无边框的窗口默认值是true
transparent：可以使窗口透明默认值为 false. 在Windows上，仅在无边框窗口下起作用。默认值是true
alwaysOnTop: true 窗口最高级，不被其他的软件窗口覆盖，永远在别的窗口的上面,

当然还有很多其他属性配置，这里我目前就用到这些，其他窗口属性详见BrowserWindow 创建并控制浏览器窗口

具体实现如下：

// 创建浏览器窗口
  win = new BrowserWindow({
    width: 400,
    height: 400,
    transparent: true, 
    frame: false,
    alwaysOnTop: true,
    webPreferences: {
      nodeIntegration: true
    }
  })
  
  # 增加 transparent: true, frame: false 两个属性, 该参数表示窗口透明
  # alwaysOnTop 窗口是否永远在别的窗口的上面
  
  // 加载index.html文件
  win.loadFile('index.html')

桌面通知（下班提醒）

我这个是每隔1分钟检查一次，是否到了设置的下班时间，具体实现如下。详细请见：桌面通知

// 每隔1分钟检查一次是否到了下班时间
  setInterval(function() {
    // 获取当前时间和下班时间
    var now = new Date();
    var offWorkTime = new Date();
    offWorkTime.setHours(17);
    offWorkTime.setMinutes(30);
    offWorkTime.setSeconds(0);

    // 计算当前时间和下班时间的时间差
    var timeDiff = offWorkTime.getTime() - now.getTime();
    // 如果时间差不到1小时，则弹窗提醒
    if (timeDiff > 0 && timeDiff <= 3600000) {
      notifier.notify({
        title: '下班倒计时提醒',
        message: '距离下班还有不到1小时，请注意时间！'
      });
    }
  }, 60000)

倒计时

倒计时就是简单地js 获取当前时间计算时间差，在这里我就不在赘述了。如果需要的可以留言评论。

打包

执行命令 npm run make，生成out文件夹下有个.exe文件双击打开

npm run make

最后

双击.exe文件打开也可以创建快捷方式至此完成一个简单地桌面小工具下班提醒

这个版本的有想要的小伙伴可以关注私信发给你

❤️ 谢谢支持

以上便是本次分享的全部内容，希望对你有所帮助^_^

如果你有任何想法和疑问，欢迎留言～一起探讨

点赞收藏不迷路

快速入手electron，分分钟开发一个自己的"下班摸鱼倒计时"桌面应用

前言

效果图