Electron实现简易番茄钟

最新推荐文章于 2024-07-30 09:12:08 发布
最新推荐文章于 2024-07-30 09:12:08 发布
阅读量402 收藏 3
点赞数 3
文章标签： electron javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56097487/article/details/137784118
版权

哈喽，大家好！我是油柑，本次带来的是Electron实现简易番茄钟，包括倒计时结束铃声，切换主题，记录任务数等

代码：

1、index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>油柑 番茄钟</title>
  <link rel="stylesheet" href="dark-theme.css" id="theme">
</head>
<body>
  <div class="container">
    <div class="timer">
      <h1 id="timer">00:00:00</h1>
      <select id="hours">
        <option value="1">1 小时</option>
        <option value="2">2 小时</option>
        <option value="3">3 小时</option>
        <option value="4">4 小时</option>
        <option value="5">5 小时</option>
      </select>
      <div class="buttons">
        <button id="start">开始</button>
        <button id="reset">重置</button>
        <button id="toggleTheme">切换主题</button>
      </div>
      <ul id="tasks">
      </ul>
      <div class="task-input">
        <input type="text" id="taskInput" placeholder="添加任务">
        <button id="addTask">添加</button>
      </div>
      <audio id="audio" src="bell.mp3"></audio>
    </div>
    <div class="statistics">
      <h2>统计</h2>
      <p>共完成多少任务: <span id="tomatoCount">0</span></p>
      <p>总共花费的时间: (hours): <span id="totalTime">0</span></p>
    </div>
  </div>
  <script src="app.js"></script>
</body>
</html>

2、main.js（入口文件）

// 我们需要导入两个electron模块
const { app, BrowserWindow } = require('electron')

// 创建一个createWindow()函数，用于将index.html加载到新BrowserWindow实例中
const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600
    })

    let promise = win.loadFile('index.html');
}
// 调用这个createWindow()函数来打开你的窗口
app.whenReady().then(() => {
    createWindow()
})

3、app.js文件

let timer;
let maxTasks = 3;
let tomatoCount = 0;
let totalTime = 0;
let isDarkTheme = true;

document.getElementById('start').addEventListener('click', startTimer);
document.getElementById('reset').addEventListener('click', resetTimer);
document.getElementById('addTask').addEventListener('click', addTask);
document.getElementById('toggleTheme').addEventListener('click', toggleTheme);

function startTimer() {
  let hoursInput = document.getElementById('hours').value;
  let hours = parseInt(hoursInput);
  if (isNaN(hours) || hours <= 0) {
    alert("Please select a valid number of hours.");
    return;
  }
  let totalSeconds = hours * 60 * 60;
  startCountdown(totalSeconds);
}

function startCountdown(totalSeconds) {
  clearInterval(timer);
  timer = setInterval(function() {
    if (totalSeconds === 0) {
      clearInterval(timer);
      document.getElementById('timer').innerText = 'Time\'s up!';
      document.getElementById('audio').play();
      showNotification("Time's up!", "Your task is complete.");
      tomatoCount++;
      totalTime += parseInt(document.getElementById('hours').value);
      updateStatistics();
      return;
    }

    let hours = Math.floor(totalSeconds / 3600);
    let minutes = Math.floor((totalSeconds % 3600) / 60);
    let seconds = totalSeconds % 60;

    document.getElementById('timer').innerText = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;


    if (totalSeconds === 300) {
      showNotification("5 minutes left", "Finish up your task!");
    }

    totalSeconds--;
  }, 1000);
}

function resetTimer() {
  clearInterval(timer);
  document.getElementById('timer').innerText = '00:00:00';
}

function addTask() {
  let taskInput = document.getElementById('taskInput').value.trim();
  if (taskInput === "") {
    alert("Please enter a task.");
    return;
  }
  let taskList = document.getElementById('tasks');
  if (taskList.children.length >= maxTasks) {
    alert("你只能添加三个任务");
    return;
  }
  let taskItem = document.createElement('li');
  taskItem.textContent = taskInput;
  taskList.appendChild(taskItem);
  let deleteButton = document.createElement('button');
  deleteButton.textContent = '删除';
  deleteButton.className = 'deleteTask';
  taskItem.appendChild(deleteButton);
  document.getElementById('taskInput').value = "";
}

document.addEventListener('click', function(event) {
  if (event.target.classList.contains('deleteTask')) {
    event.target.parentNode.remove();
  }
});

function showNotification(title, message) {
  if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");
  } else if (Notification.permission === "granted") {
    new Notification(title, { body: message });
  } else if (Notification.permission !== "denied") {
    Notification.requestPermission().then(function (permission) {
      if (permission === "granted") {
        new Notification(title, { body: message });
      }
    });
  }
}

function updateStatistics() {
  document.getElementById('tomatoCount').innerText = tomatoCount;
  document.getElementById('totalTime').innerText = totalTime;
}

function toggleTheme() {
  const themeLink = document.getElementById('theme');
  if (isDarkTheme) {
    themeLink.href = 'light-theme.css';
    isDarkTheme = false;
  } else {
    themeLink.href = 'dark-theme.css';
    isDarkTheme = true;
  }
}

4、样式文件（两个）

body {
    font-family: Arial, sans-serif;
    background-color: #000;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  
  .container {
    max-width: 600px;
    padding: 20px;
    background-color: #333;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: space-between;
  }
  
  .timer {
    text-align: center;
  }
  
  .timer img {
    margin-bottom: 20px;
  }
  
  .timer h1 {
    font-size: 3rem;
  }
  
  select {
    padding: 10px;
    margin: 10px;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  .buttons {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }
  
  button {
    padding: 10px 20px;
    margin: 0 10px;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: #007bff;
    color: #fff;
    transition: background-color 0.3s ease;
  }
  
  button:hover {
    background-color: #0056b3;
  }
  
  ul {
    list-style-type: none;
    padding: 0;
    margin-bottom: 20px;
  }
  
  li {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
  }
  
  .deleteTask {
    margin-left: auto;
  }
  
  .task-input {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .task-input input[type="text"] {
    flex: 1;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 5px 0 0 5px;
    border-right: none;
    background-color: #fff;
    color: #000;
  }
  
  .task-input button {
    padding: 10px 20px;
    font-size: 1rem;
    border: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    background-color: #007bff;
    color: #fff;
    transition: background-color 0.3s ease;
  }
  
  .task-input button:hover {
    background-color: #0056b3;
  }
  
  .statistics {
    flex: 1;
    padding: 20px;
  }
  
  .statistics h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }
  
  .statistics p {
    font-size: 1rem;
    margin-bottom: 5px;
  }
  
body {
    font-family: Arial, sans-serif;
    background-color: #fff;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  
  .container {
    max-width: 600px;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: space-between;
  }
  
  .timer {
    text-align: center;
  }
  
  .timer img {
    margin-bottom: 20px;
  }
  
  .timer h1 {
    font-size: 3rem;
  }
  
  select {
    padding: 10px;
    margin: 10px;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  .buttons {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }
  
  button {
    padding: 10px 20px;
    margin: 0 10px;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: #007bff;
    color: #fff;
    transition: background-color 0.3s ease;
  }
  
  button:hover {
    background-color: #0056b3;
  }
  
  ul {
    list-style-type: none;
    padding: 0;
    margin-bottom: 20px;
  }
  
  li {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
  }
  
  .deleteTask {
    margin-left: auto;
  }
  
  .task-input {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .task-input input[type="text"] {
    flex: 1;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 5px 0 0 5px;
    border-right: none;
    background-color: #fff;
    color: #000;
  }
  
  .task-input button {
    padding: 10px 20px;
    font-size: 1rem;
    border: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    background-color: #007bff;
    color: #fff;
    transition: background-color 0.3s ease;
  }
  
  .task-input button:hover {
    background-color: #0056b3;
  }
  
  .statistics {
    flex: 1;
    padding: 20px;
  }
  
  .statistics h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }
  
  .statistics p {
    font-size: 1rem;
    margin-bottom: 5px;
  }

那么，本次分享就到这啦，我们下次再见！

代码下载地址：基于Electron实现简易番茄钟: 本次使用Electron实现简易番茄钟，包括倒计时结束铃声，切换主题，记录任务数等 (gitee.com)

油柑裹糖
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Electron 自定义窗口 —— 桌面时钟
Web_boom的博客
03-16 860
整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
electron实现qq快捷登录的方法示例
10-17
在本文中，我们将深入探讨如何使用Electron框架实现QQ快捷登录功能。首先，我们要了解Electron的基本概念，它是一个允许开发者使用JavaScript、HTML和CSS构建跨平台桌面应用的开源库。利用Electron，我们可以结合...
electron-pomodoro:电子番茄定时器
05-25
电子番茄 :tomato: 什么 :red_question_mark: :atom_symbol: :tomato: :horizontal_traffic_light: :alarm_clock: 〜！ 描述 这个项目是一个计时器，可以帮助使用电子制造的番茄技术发生React。 Pomodoro在意大利语中意为西红柿，它是一种通过查看1980年代的番茄形计时器而创建的时间管理方法。 工作时间为25分钟，无条件休假5分钟。 使用者介面 转变 状态 解释 上 在下班和上班时提醒您 离开 在休息和工作时间禁止显示通知 柜台 状态 解释 数字 显示30分钟的重复次数 番茄交通灯 状态 解释 30至6 绿番茄（工作时间） 6至5 黄色番茄（休息前1分钟） 5比0 红番茄（休息时间） 计时器 状态 解释 MM：SS 显示剩余时间 按钮 状态 解释 开始停止按钮 选择停止还是启动计时器 刷新按钮 将计时器重置为30分钟 安装 可以从以下链接下载。 下载 关联 赢得便携式（慢） https://drive.google.co
electron 定时任务 scheduleJob
小码农
04-30 3221
废话不多说,直接上代码 var fs=require('fs'); var schedule = require("node-schedule"); var http = require('http'); var content = document.getElementById('content'); var button = document.getElementById('button'); var api_url = document.getElementById("api_url")
使用Angular和Electron构建原生桌面计时器应用 - AngularElectron
gitblog_00065的博客
06-12 462
使用Angular和Electron构建原生桌面计时器应用 - AngularElectron 项目地址:https://gitcode.com/AngularFirebase/angular-electron 1、项目介绍 AngularElectron是一个开源项目，它将现代Web开发框架Angular与强大的Electron平台相结合，帮助开发者轻松创建桌面应用程序。项目中包含一个简洁的计时...
桌面时钟（JS版本）-electron
沉淀，积累、进步
09-14 1184
基于electron 的桌面打包应用程序-桌面时钟
electron倒计时程序
Yajyaj123的博客
07-29 177
electron倒计时程序。
electron 简易编辑器
02-10
1. **JavaScript**：作为Electron的主要编程语言，JavaScript负责实现应用程序的逻辑。开发者可以使用ES6及以上版本的ECMAScript特性，借助于Babel或其他工具进行转换，以保证兼容性。 2. **Electron API**：...
electron实现静默打印的示例代码
10-16
在本文中，我们将探讨如何使用Electron实现静默打印功能，以及如何在结合Vue CLI 3的情况下，实现一个具有设置打印机和静默打印小票功能的简单应用程序。 首先，根据给定的描述和部分内容，我们需要确保使用的...
番茄时钟毕业设计—（包含完整源码可运行）.zip
04-23
2. **编程语言**：实现番茄时钟应用可能使用的编程语言有多种，如Python、Java、C#、JavaScript等，每种语言都有其特点和适用场景。 3. **事件驱动编程**：为了实现定时提醒，开发者可能使用了事件驱动编程，让程序...
electron-schedule
04-19
电子时间表 供初学者使用 $ cd client $ npm run e:serve 用于构建 $ npm run electron:build 往后退 $ npx nodemon ./server 后端JSON 得到 [ { group: string, id: int, schedule_week: [ { day: string, schedule_day: [ { time: string, white_week: { couple_name: string, lecturer: string, groups[]: string, a
从零开始，用electron做一个倒计时工具
04-30
从零开始，用electron做一个倒计时工具 博客：用electron做个五一倒计时 博客地址：https://tinycool.blog.csdn.net/article/details/124510990
vue-electron-timer:一个简单的倒计时应用程序
05-11
电子计时器 一个简单的倒计时应用程序 构建设置 # install dependencies yarn # run in development mode yarn dev # build app under your OS (Linux, macOS, Windows) yarn build
electron从零开始做个倒计时
微小冷的学习笔记
04-30 1517
文章目录简介与入门获取时间倒计时到了之后会怎样 从0开始，通过electron写一个倒计时工具，其最终效果为 简介与入门 electron-fiddle自带了一个Hello world项目，按F5启动程序，就会出现如下窗口。 倒计时程序可以在此基础上进行修改，而丐版的倒计时，其实只需要把Hello World变成不断变化的时间，而将下面一小行字改成当前的时间信息。 在默认项目中，共有5个文件： index.html：很显然，是一个和布局相关的文件 style.css：html对应的渲染文件 main.
Vue框架开发Electron6 - 定时器介绍
qq_39388660的博客
09-08 2109
1. setTimeout函数用于延时 n ms后执行一次，返回值是唯一的标识符ID let OnlyID OnlyID= setTimeout(() => { // 写逻辑代码 OnlyID= null // 清空 }, 500) 注释: 500ms之后异步执行setTimeout里面的逻辑代码，只是执行一次； 如果需要取消执行setTimeout里面的逻...
nodejs模块 node-schedule使用,定时任务
热门推荐
意外金喜
07-13 6万+
一. 安装 npm install node-schedule 二. 使用 例子通过定时访问url展示 1.确定的时间
Electron桌面端开发(开发一个闹钟【完结】)
没有途径，只有努力
06-10 744
基于Electron+Layui桌面端开发的一款闹钟css----样式 img----背景图 js-----主进程与js文件等等… layui—Layui的包 out----即打包成功后的文件夹index.html—首页 dsj.html—倒计时页 myinfo.html–个人信息页 icon.ico——–应用图标//win10打包electron-packager . 碰磕Time --platform=win32 --arch=x64 --out=./out --icon=./Tal.ico --app
electron实现定时关机和提醒
最新发布
程序员日志
07-30 158
做个定时关机和提醒的小练习。
通过electron实现electron国际化
06-02
要在 Electron 中实现国际化，可以使用 Electron 提供的 i18n API。以下是实现步骤： 1. 在项目中创建一个 `locales` 文件夹，用于存放不同语言的翻译文件。 2. 在 `locales` 文件夹中创建一个 `en.json` 文件，用于存放英文翻译。 3. 在 `en.json` 文件中定义键值对，表示需要翻译的文本，如： ```json { "hello": "Hello!", "world": "World!" } ``` 4. 在 Electron 主进程中使用 `app.getPath('userData')` 获取用户数据存储路径，并在此路径下创建一个 `locales` 文件夹，用于存放用户选择的语言文件。 5. 在 Electron 渲染进程中使用 `electron.remote.app` 获取主进程实例，并使用 `app.getLocale()` 获取用户系统语言。 6. 使用 `electron.remote.require` 引入 `electron-i18n` 模块，并在 `index.html` 中使用 `data-i18n` 属性标记需要翻译的文本，如： ```html <h1 data-i18n="hello"></h1> <p data-i18n="world"></p> ``` 7. 在渲染进程中使用 `electron.remote.require('electron-i18n')` 加载翻译文件，并使用 `i18n.translator.translate()` 方法进行翻译，如： ```javascript const i18n = electron.remote.require('electron-i18n'); i18n.translator.loadLocale('en', `${app.getPath('userData')}/locales`); i18n.translator.translateDocument(document); ``` 这里使用 `loadLocale` 方法加载英文翻译文件，并使用 `translateDocument` 方法翻译整个页面。 8. 如果需要支持多语言切换，可以在渲染进程中监听 `select` 元素的 `change` 事件，并使用 `i18n.translator.setLocale()` 方法切换语言，如： ```javascript const select = document.querySelector('select'); select.addEventListener('change', () => { const locale = select.value; i18n.translator.setLocale(locale); }); ``` 这里使用 `setLocale` 方法切换语言。 以上就是在 Electron 中实现国际化的基本步骤。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值