Electron desktop development (development of an alarm clock [End])

Bump Timer

First episode :CSDN Bump , Share your learning log

---

Fine

---

knowledge has no limit

---

2022/6/10

---

Introduce

be based on Electron+Layui An alarm clock developed on the desktop

Project structure

css---- style
img---- Background map
js----- The main process and js Documents, etc. …
layui—Layui My bag
out---- That is, the folder after successful packaging

index.html— home page
dsj.html— Countdown page
myinfo.html– Personal information page
icon.ico——– Application icon

Install and run the tutorial

1. cd Current directory ( To the current file directory )
2. npm install( Install dependency packages )
3. electron . ( function )
   3-1： Or run out Under the folder — Bump Time-win32—‘ Bump Time’.exe

How to pack

//win10 pack electron-packager . Bump Time --platform=win32 --arch=x64 --out=./out --icon=./Tal.ico --app-version=0.01 --overwrite --electron-zip-dir=…/

• –out Storage address after packaging
• –icon Application icon
• –app-version Application version number
• . apply name

Function is introduced

use layui Enrich the interface

1. home page
   

The home page mainly displays the current time and the alarm clock ( Delete )
2. Add alarm clock

Adding alarm clock data is local
3. About author

It mainly introduces and popularizes the author
5. Reminder function

When the alarm clock arrives, it will pop up to remind you
6. Countdown function

Equivalent to the alarm clock details page , Perform a second reading operation , When the time expires, it will show that it has expired

Participation and contribution

1. The author himself
   Love learning , End use Electron Consolidate your learning achievements
   2. Difficulty system : Simple
   3. Purpose : Making an alarm clock can be a good reminder !

Technology stack

• layui
• electron
• js
• html
• css

Project address (git)

https://gitee.com/Beanbao/pengke-timer
I have uploaded to gitee🤭